If you are thinking, Hey what is a StyleSheet🤔 and how can I use it 🧑‍💻? Which is the main axis and cross axis of react-native 🤔? If you want to clear these questions you have come to the right place.😄

What is StyleSheet

StyleSheet is a component in react-native which is responsible for all the styling of different components.

How to use StyleScheet

To use StyleSheet we need to create an object styles

const styles = StyleSheet.create({})

To create a new style we need to define the style in the form of a key: value pair where the key is the style name and the value is the properties defined for styling.

const styles = StyleSheet.create({
    container:{
                flex:1,
                alignItems:'Center'
                }
})

Make sure you insert a comma , between each property and each style 🤓

How to apply styles

To apply the style to the component we need to add style = {styles.styleName} in the component tag

• Here in the below code, we are applying the style named container to the Component View

unction AppPro():JSX.Element{
    const isDarkMode = useColorScheme() === 'dark';
    return(
        <View style={styles.container}>
          <Text>Hello World!</Text>
          </View>
      )
}

Main-axis and Cross-axis in react-native

Main-axis and Cross-axis of react-native are opposite to what's on web dev

Understanding in depth about Main-axis and Cross-axis with the help of justify-content and align-items

In flexbox, we know two concepts align-items and justify-content. With the help of align-items and justify-content let's try to understand more about Main-axis and Cros-Axis

justify-content

• justify-content aligns all the items on the main axis.

• On web justify-content:center places all the items toward the centre of the main axis (The main axis is the horizontal axis: Left to right)

  

• On react-native justifyContent:'center' places all the items toward the centre of the main axis (The main axis is the Vertical axis: Top to bottom)

  

align-items

• align-items aligns all the items on the cross axis

• On web align-items:center places all the items toward the centre of the cross axis(Cross axis is the vertical axis: Top to bottom )

  

• on react-native alignItems:'center' places all the items toward the centre on the cross axis(Cross axis is the horizontal axis: Left to right)