Home » React JS

How to use React Native style sheet?

In this article, we will see how to use a style sheet in our react native code?
Submitted by Godwill Tetah, on February 09, 2020

Without wasting much time, a style sheet as commonly known in a CSS is an object or block of code of many styling properties and values which is applied in a code when called.

It's almost the same as in CSS but has a little different regarding some naming conventions.

In react native, a style sheet is created by initiating a constant, assigning it to a styleSheet.create function as seen below.

The style sheet is then invoked or called by passing an inline style reference using a single curly brace.

Open your App.js file and type the following,

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

export default function App() {
  return (
    <View style={styles.box}>
      <View style={styles.container}>
        <TextInput style={styles.myinput} />
        <Button title="GO" />
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  box: {
    padding: 50,
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  myinput: {
    Width: '80%',
    borderBottomColor: 'black',
    padding: 10,
    borderBottomWidth: 1,
  },
});

Output

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