React Native - Styling


To make application Look and feel we need to apply some style for it.

We have different ways to apply styles in React-Native

Inline style: We can use the style property to add the styles inline. But this is not  best practice because it can be hard to read the code.

In this chapter, we will use the Stylesheet for styling

Lets check example 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentorComponentfrom './PresentorComponent'

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentorComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

 

PresentorComponent

IHere we will import the StyleSheet. At the bottom of the file, we will create our stylesheet and assign it to the styles constant.

Note : Styles are in camelCase and we do not use px or % for styling.

To apply styles to our text, we need to add style = {styles.myText} property to the Text element.

PresentorComponent.js

class PresentorComponent extends React.Component {

  render() {

    return <Text>This is from Props {this.props.id}</Text>;

  }

}

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

 

That's this is very simple application to apply style for React Components.

 


Subscribe For Daily Updates