Styling in React Native: Flexbox and StyleSheet

Styling is a really important concept in building mobile applications. This aspect is responsible for making your mobile application attractive and user-friendly for users and people to use. React Native has an inbuilt styling giving you the ability to design your apps based on javascript objects.

Understanding Flexbox in React Native

Flexbox is the primary layout system in React Native. It's designed to provide a consistent layout on different screen sizes. React Native implements Flexbox with a few differences from web CSS, but the core concepts remain the same.

Using StyleSheet in React Native

React native comes out of the box with styling implemented using the Stylesheet API.

In our example below we look at inline styling 

<Text style={{ color: 'blue' }}>Hello Styling</Text>

In the code above we see how inline styling has been implemented to the specific text component as compared to how the next one below has been styled using the React Native stylesheet. Although inline styling is faster to implement, it can become challenging especially when working with too many components making your code look bulky.

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

import React from 'react'

const reaactnativestyling = () => {
  return (
    <View>
      <Text style={{ color: 'blue' }}>Hello Styling</Text>
      <Text style={styles.inBuiltStyling}>Hello In built Styling</Text>
      <Text>Hello Flexbox Styling</Text>
    </View>
  )
}

export default reaactnativestyling

const styles = StyleSheet.create({
  inBuiltStyling: {
    color: 'red',
  }
})

In the code above we see how to implement styles using React Native inbuilt stylesheet.

Benefits of using StyleSheet

Let’s look at some of the benefits of using the React Native Stylesheet

• It enables one to write CSS-like styles written in Javascript
• It enables the reusability of styles which can be applied to multiple components reducing code duplication
• Styles are separated from the logic making it easier to maintain
• It gives room for defining themes that can be easily switched giving your app a consistent look and feel

Advanced Styling Techniques

Now that you have seen the basics of styling React Native components using the inbuilt Stylesheet API, we will dive into advanced styling techniques to enhance your app's look and feel.

Conditional Styling

Let’s start implementing conditional styling in our code below, as you will see. We are going to add a button and the button will use useState to check the different colours on the text component showing conditional formatting

const reaactnativestyling = () => {
  const [color, setColor] = useState('yellow')
  return (
    <View>
      <Text style={{ color: 'blue' }}>Hello Styling</Text>
      <Text style={styles.inBuiltStyling}>Hello In built Styling</Text>
      <Text style={{ color: color }}>Hello conditional styling</Text>
      <View>
        <Text>Hello Flexbox Box 1</Text>
        <Text>Hello Flexbox Box 2</Text>
        <Text>Hello Flexbox Box 3</Text>
      </View>
      <Button
        title="Change Conditional Styling text"
        onPress={() => {
          const changedColor = color === 'yellow' ? 'green' : 'purple'
          setColor(changedColor)
        }}
      />
    </View>
  )
}

In our code we see how we use state to first set the color to yellow. After that we added an onPress property on the button to handle the change clicks and display the defined colors in the changeColor function

Platform-Specific Styles

In the process of building enterprise applications, there are times when you might want to separate different styles on either Android or IOS. React Native provides two ways of of separating platforms. You can either use :

• Platform Module
• Platform-Specific File extensions

Let’s look at an example of platform-specific code. We will only look at Platform module styles in our application.

First, we will start by importing Plafrom in our React native import

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

After Importing we add a state that will be used to show the platform the app is running on. Currently, i am on Android so it should show android. We also create a function that uses the Platform API to show the platform you are in

const [platfromInfo, setPlatfromInfo] = useState('')

  const showPlatform = () => {
    setPlatfromInfo(`You are currently running this app on an ${Platform.OS}`)
  }

Also to see how platform-specific styling works we add platform styles using the Platfrom.select method which returns the most fitting value of the platform your app is running on.

platformCode: {
    borderRadius: 8,
    padding: 16,
    margin: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    ...Platform.select({
      ios: {
        backgroundColor: 'Orange',
      },
      android: {
        backgroundColor: 'green'
      },
      default: {
        backgroundColor: 'pink'
      }
    }),

To show the text for the platform you are running on we used the platfromInfo state with a trigger button that when pressed calls the showPlafrom function.

<Button 
      title="Show running Platfrom"
      onPress={showPlatform}
      />

Here is the full code:

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

const reaactnativestyling = () => {
  const [color, setColor] = useState('yellow')
  const [platfromInfo, setPlatfromInfo] = useState('')

  const showPlatform = () => {
    setPlatfromInfo(`You are currently running this app on an ${Platform.OS}`)
  }
  
  return (
    <View style={styles.container}>
      <Text style={{ color: 'blue' }}>Hello Styling</Text>
      <Text style={styles.inBuiltStyling}>Hello In built Styling</Text>
      <Text style={{ color: color }}>Hello conditional styling</Text>
      <View>
        <Text>Hello Flexbox Box 1</Text>
        <Text>Hello Flexbox Box 2</Text>
        <Text>Hello Flexbox Box 3</Text>
      </View>
      <View style={styles.platformCode}>
        <Text style={styles.platformText}>{platfromInfo}</Text>
      </View>
      <Button
        title="Change Conditional Styling text"
        onPress={() => {
          const changedColor = color === 'yellow' ? 'green' : 'purple'
          setColor(changedColor)
        }}
      />
      <Button 
      title="Show running Platfrom"
      onPress={showPlatform}
      />
    </View>
  )
}

export default reaactnativestyling

const styles = StyleSheet.create({
  container: {
    flex:1,
    padding: 20
  },
  inBuiltStyling: {
    color: 'red',
  },
  platformCode: {
    borderRadius: 8,
    padding: 16,
    margin: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    ...Platform.select({
      ios: {
        backgroundColor: 'Orange',
      },
      android: {
        backgroundColor: 'green'
      },
      default: {
        backgroundColor: 'pink'
      }
    }),
  },
  platformText : {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'white',
  }
})

Best Practices for Styling in React Native

Let’s look at the best practices while styling your React Native applications.

Organizing Styles

Themeing your application or organizing the styles through a single source, which is recommended allows you to save all commonly used properties like the colours, font sizes, typography etc.

Choosing stylesheet over inline-styling

Inline styles not only make components more challenging to read but also hinder maintainability and the reusability of styles. It is recommended to use the StyleSheet object to define styles separately from functional components.

Avoid pixel values

Mobile apps are designed to cater to devices with different screen sizes and resolutions. It is crucial to avoid using hardcoded pixel values when defining the layout and styling to ensure that your app provides a seamless user experience across all devices. Instead, it is recommended to adopt a more flexible approach by using flexbox and percentage-based units for styles.

Happy styling!