React-native styling View, Flex Dimensions, Flexbox

In this article, we learn about react-native styling view, flex dimensions, flexbox layout and how to use these using these components you can design awesome UI. All components in react-native accept common props called style 

React native view

In react native all components must be displayed inside View, without view we can not render components on the screen

<View>
  <Text>Hello world</Text>
</View>

This is not gone be displayed until you set height and width to parent View

You can stylesheet to text as well as View as follows

export default class App extends Component<Props> {
   render() {
       return (
         <View style={styles.container}>
           <Text style={styles.welcome}>
            Welcome to React Native!
           </Text>
           <Text style={styles.instructions}>
            To get started, edit App.js
           </Text>
        </View>
       );
   }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
});

flex: 1 will expand the view and fill all available space make sure its parent dimension is greater than 0, otherwise it won’t be work to avoid this you must set height, width or flex to parent view if you don’t set height, width or flex to view it will be considered as 0

we can set height and width dynamically with respect to window

const Dimensions = require('Dimensions');

const window = Dimensions.get('window');
var height = (window.height ) / 2;
var width = (window.width) / 2;

now you can add your own logic using these height and width i suggest you to make another file for style called Style.js and make new directory under root folder called CSS and keep this Style.js in CSS folder so that you can access it globally

Code for Style.js

import { StyleSheet } from 'react-native';

const Dimensions = require('Dimensions');

const window = Dimensions.get('window');
var height = (window.height ) / 2;
var width = (window.width) * 0.85;
export default StyleSheet.create({
  container: {
   // flex: 1,
    height: height,
    width: width,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
}
});

Now just import this Style.js like below

import Styles from '../css/Styles';

Usage you can add style from here also

<View style={Styles.container,{margin: 5}}>

Flex Dimensions

To know more about Flex dimensions please check this react-native official website click here

Flexbox

It provide consistent layout on different screen sizes, that’s why it is very useful

export default class App extends Component<Props> {
 render() {
   return (
     <View style={{flex: 1, flexDirection: 'row',flexWrap: 'wrap'}}>
     <View style={{width: 150, height: 150, backgroundColor: '#6f8233'}} />
     <View style={{width: 150, height: 150, backgroundColor: '#94ae44'}} />
     <View style={{width: 150, height: 150, backgroundColor: '#bada55'}} />
     </View>
   );
 }
}

If we remove flexWrap: ‘wrap’ from style then have to add horizontal scroll view like below

export default class App extends Component<Props> {
  render() {
     return (
       <ScrollView horizontal={true}>
       <View style={{flex: 1, flexDirection: 'row'}}>
       <View style={{width: 150, height: 150, backgroundColor: '#6f8233'}} />
       <View style={{width: 150, height: 150, backgroundColor: '#94ae44'}} />
       <View style={{width: 150, height: 150, backgroundColor: '#bada55'}} />
       </View>
       </ScrollView>
     );
  }
}

When we remove height width and add flex: 1 then

 render() {
   return ( 
     <View style={{flex: 1, flexDirection: 'row',flexWrap: 'wrap'}}>
     <View style={{flex: 1, backgroundColor: '#6f8233'}} />
     <View style={{flex: 1, backgroundColor: '#94ae44'}} />
     <View style={{flex: 1, backgroundColor: '#bada55'}} />
     </View> 
   );
}

Let’s change  flexDirection: ‘column’ see the result

Now, we can render this view inside a loop to display dynamic data don’t need to create Adapter for displaying list just put view inside a loop like below

var names = ['Jasmin', 'Jhon', 'Robart'];


return ( 
    <View style={{flex: 1, flexDirection: 'column',flexWrap: 'wrap'}}>
       {names.map(function(name, index){
         return <View key={ index }><Text style={welcome}>{name}</Text></View>;
       })}
    </View> 
);

This is how we can render dynamic data

Thank you 🙂 enjoy coding…