An intro to style sheets and styling react-native apps

we'll keep this one short as stylesheets is just like CSS, a very huge topic and can never be learned completely.

There are majorly 2 ways we can style out core components of react-native app (core components such as Text, View etc).

First way is Inline styling, just like we do in HTML (inside the tags).

One thing to note here is that in the world of mobile, the main access of styling is verticle and not horizontal. for example, in the web align-items works in the verticle axis but in the world of mobile, it aligns the component horizontally.

Here is the syntax of how we write inline styling in react-native app.

 <View
      style={{
        flexDirection: 'row',
        height: 100,
        padding: 20,
      }}>

Let's understand it with an example. let's say we need to get the hello world text to the center in horizontal axis, we'll surely use alignItems property to achieve this.

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

export default function App() {
  return (
    <View style={{alignItems:"center"}}>
      <Text>
        Hello world !! 
   </Text>
    </View>
  )
}

This is how we use inline style. As the styling gets complex , it is hard to complicated to see it . That is where we separate our styling. All we do is import a core component called StyleSheet and then the syntax goes like this.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>
        Hello world !! 
   </Text>
    </View>
  )
}
const styles = StyleSheet.create({
  container:{
    alignItems:"center"
  }
})

As we can see, all we need to do is create a variable named styles and use the create function of StyleSheet and write just like we write CSS. container is like a classname given to Text component.

That is it, for now, we'll see styling in depth in upcoming blogs.

Thanks for reading !!!!!