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

How to use React Native style sheet?

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







Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.