Coders In C

Lets take deep dive into styling of React Native Applications. We will see how we can style using Style Sheet apis and how we can implement and design with style.

Basically there are two ways you can style your React Native components

1. Inline Style
2. With StyleSheet API

1. Inline Style

You can directly style any of your React Native App component within the style attribute.

<TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="Name me!"
      />

2. Using StyleSheet API

Your can use StyleSheet API from React Native library. first yuo have to import it from the React native Library

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

after That Define Style for your component like this

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

and then you can directly use this styles veriable to your component’s style attribute.

<View style={styles.container}>
      <Text style={styles.red}>just red</Text>
      <Text style={styles.bigBlue}>just bigBlue</Text>
      <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
      <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
    </View>

How to use Multiple Styles ?

You can use multiple style to avoid writing same / common styles for the component each time. Write once and reuse it. This can be achieve with Style Array [], You can pass array of style in side style attribute.

<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

Some Box Styling properties

Name	Descriptions
Width	set component width
height	set component height
paddingHorizontal / paddindVertical
marginHorizontal / marginVertical
borderWidth / boarderColor/ borderRadius	for border styling to component (View allowed on both android and ios)/ text view border is not allowed in ios apps)

Box Shadow :

Box shadow only works for Ios applications. For android you have to relay on elevation property. Here are set of properties to setup box shadow

boxshadow : {
shadowColor : 
shadowOffset: {height : 6, width  : 6},
shadowOpacity : between 0 to 1,
shadowRadius : for blur radius 
//for android just use 
elevation : 6
}