React Native Components and a bit Styling.

So let us start with the component, component is a javascript function that is re-usable and returns jsx. JSX stands for “JavaScript XML”, allows us to write HTML in React by converting HTML into React components, helping you to easily create user interfaces.

Enough of the definition let's just jump into implementation..

Starting with the Index.js file

Here you can see in line number 9 they are registering a component using registerComponent function and that component is App. Yes App itself is a component that is returning some jsx that we are supposed to see on screen.

Note : Make sure your app is up and running, if not please run it using cmd: npx react-native run-android

Working with App.tsx

Before we get started with App.tsx go through the file and try to understand any of the code, it doesn't matter if you don't understand also.

Done with your reading, just select all and delete the content from the file. Let's start with fresh code.

import { View, Text } from 'react-native'
import React from 'react'

function App() {
  return (
    <View>
      <Text>This is App</Text>
    </View>
  )
}

export default App

starting with the import, we gonna import few components from react-native such as View and Text. The reason why we are importing react here is that react-native uses a lot of react principles and features.

Coming to the App function here it wraps up all the jsx it has to return in one single react-native component. <View> here pretty much acts as div in web development. And in react-native every opening tag should have a closing tag.

Create a component

Before you create a component, create a folder where you can store all your components.

Here I have created a folder name components under that I have my first component "MyComponent.js"

import React from 'react'
import { Text, View } from 'react-native'

 function MyComponent() {
  return (
    <View>
      <Text>My first component !!</Text>
    </View>
  )
}
export default MyComponent;

Styling

Let's try adding a bit of styling to our new component by using styleSheets.

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

 function MyComponent() {
  return (
    <View>
      <Text style={styles.textStyle}>
        My first component !!
      </Text>
    </View>
  )
}
export default MyComponent;
const styles = StyleSheet.create({
    textStyle:{
        fontSize:15,
        margin:10
    }
})

Instead of creating a new style object every time, StyleSheet helps to create style objects with an ID which is further used to reference instead rendering it again. Using StyleSheet.create() we can create a style object, where we create our own objects containing CSS and refer it to any react native component with style attribute.

importing Component in App.tsx

import { View,Text} from 'react-native'
import React from 'react'
import MyComponent from './components/MyComponent'

function App() {
  return (
    <View>
      <Text>App</Text>
      <MyComponent></MyComponent>
      </View>
  )
}
export default App

The output would look something like this.

React Native is meant for mobile app development so here the screen size is different compare to web development.

The flex here works a bit differently from the web. In React Native alignItems refers the screen from top to bottom, whereas in Web alignitems refers the screen from left to right. And the same thing goes with justifyContent. We will try exploring more on this topic in our next blog until then goodbye.