React Native Stylesheet

In this post, you will see the Styling of React Native Component Using Stylesheet. StyleSheet is similar to CSS StyleSheets which is used in web development. React Native provides a number of basic components that can be used directly but according to the application’s theme, we have to customize the components sometimes and that is why we use StyleSheet.

Similar to CSS we can use StyleSheet in both ways. By making a separate StyleSeet or inline.

Separate StyleSheet

You can easily create your StyleSheet as shown below. You can use style={styles.container} to access the StyleSheet for any element.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    fontWeight: 'bold',
  }
});

Here StyleSheet.create will create a style sheet and assign it to the variable styles. You can see the structure to define style is the same as making a JSON.

Code

After making a StyleSheet we can use it like the below example

App.js

//React Native Stylesheet – Styling in React Native
//https://aboutreact.com/react-native-stylesheet/

//import React in our code
import React from 'react';

//import all the components we are going to use
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello!</Text>
      <Text>I am a Text in side View</Text>
      <Text
        style={{
          color: 'green',
          fontSize: 18
        }}>
          Who you are ?
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    alignItems: 'center',
    fontWeight: 'bold',
    color: 'red',
  },
});

export default App;

Download Source Code

Output Screenshot

The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

Inline Style

We can also customize the components inline. For example

<Image source={pic} style={{width: 250, height: 150}}/>

Here we have an image which needs to define width , heightand that can also be done by adding Inline style.

For more about React Native UI Kits, you can visit the post Best UI Libraries for React Native.

Output in Online Emulator

That was the React Native StyleSheet. If you have any doubts or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂