Home » React JS

How to do Inline Styling with React Native?

In this article, we will study how to perform inline styling with react native during mobile app development?
Submitted by Godwill Tetah, on February 09, 2020

Just like in CSS, inline styling is adding the style in the same line as the code.
In react native it is very easy to perform inline styling but one can be misled if we don’t respect the syntax.

When performing inline styling in react native, we must apply the JSX syntax and also ensure we use the slight differences when styling with CSS in react native as you can see in the example below.

Open your App.js file and type the following,

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{ backgroundColor: 'yellow' }}>
        <Text style={{ color: 'red' }}>
          {' '}
          Hello I love Programming and building android apps{' '}
        </Text>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Output

From the code above, you can see the use of double curly braces when adding the inline style and also notice the spelling of the property backgroundColor in its use of camel case and without the hyphen unlike in CSS.

Also, Notice that double curly braces were not used in adding style in the first <view> component.

Always have in mind that react native is case sensitive.

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!