Flex in React Native

1) How to use flex in react native 
Flex or flexbox has many properties like flex-direction and justify-content and align-items etc
Let's try with some random examples.

Example1
import React from 'react';
import { View, StyleSheet } from 'react-native';
export default function Example1() {
  return (
    <View style={styles.conatainer}>
      <View style={styles.view1}/>
      <View style={styles.view2}/>
      <View style={styles.view3}/>
      <View style={styles.view4}/>
    </View>
  );
}

const styles = StyleSheet.create({
  conatainer: {
    flex: 1,
  },
  view1:{
    backgroundColor:'red',
    height:100,
    width:100
  },
  view2:{
    backgroundColor:'pink',
    height:100,
    width:100
  },
  view3:{
    backgroundColor:'yellow',
    height:100,
    width:100
  },
  view4:{
    backgroundColor:'green',
    height:100,
    width:100
  },
})


OUTPUT:


Example2
import React from 'react';
import { View, StyleSheet } from 'react-native';
export default function Example() {
  return (
    <View style={styles.conatainer}>
      <View style={styles.view1}/>
      <View style={styles.view2}/>
      <View style={styles.view3}/>
      <View style={styles.view4}/>
    </View>
  );
}

const styles = StyleSheet.create({
  conatainer: {
    flex: 1,
    alignItems:'center'
  },
  view1:{
    backgroundColor:'red',
    height:100,
    width:100
  },
  view2:{
    backgroundColor:'pink',
    height:100,
    width:100
  },
  view3:{
    backgroundColor:'yellow',
    height:100,
    width:100
  },
  view4:{
    backgroundColor:'green',
    height:100,
    width:100
  },
})



OUTPUT:



Example 3

import React from 'react';
import { View, StyleSheet } from 'react-native';
export default function Example() {
  return (
    <View style={styles.conatainer}>
      <View style={styles.view1}/>
      <View style={styles.view2}/>
      <View style={styles.view3}/>
      <View style={styles.view4}/>
    </View>
  );
}

const styles = StyleSheet.create({
  conatainer: {
    flex: 1,
    alignItems:'center',
    justifyContent:'center'
  },
  view1:{
    backgroundColor:'red',
    height:100,
    width:100
  },
  view2:{
    backgroundColor:'pink',
    height:100,
    width:100
  },
  view3:{
    backgroundColor:'yellow',
    height:100,
    width:100
  },
  view4:{
    backgroundColor:'green',
    height:100,
    width:100
  },
})

OUTPUT:



Example 4

import React from 'react';
import { View, StyleSheet } from 'react-native';
export default function Example() {
  return (
    <View style={styles.conatainer}>
      <View style={styles.view1}/>
      <View style={styles.view2}/>
      <View style={styles.view3}/>
      <View style={styles.view4}/>
    </View>
  );
}

const styles = StyleSheet.create({
  conatainer: {
    flex: 1,
    flexDirection:'row',
    //alignItems:'center',
    //justifyContent:'center'
  },
  view1:{
    backgroundColor:'red',
    height:100,
    width:100
  },
  view2:{
    backgroundColor:'pink',
    height:100,
    width:100
  },
  view3:{
    backgroundColor:'yellow',
    height:100,
    width:100
  },
  view4:{
    backgroundColor:'green',
    height:100,
    width:100
  },
})


OUTPUT:



Example 5

import React from 'react';
import { View, StyleSheet } from 'react-native';
export default function Example() {
  return (
    <View style={styles.conatainer}>
      <View style={styles.view1}/>
      <View style={styles.view2}/>
      <View style={styles.view3}/>
      <View style={styles.view4}/>
    </View>
  );
}

const styles = StyleSheet.create({
  conatainer: {
    flex: 1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center'
  },
  view1:{
    backgroundColor:'red',
    height:100,
    width:100
  },
  view2:{
    backgroundColor:'pink',
    height:100,
    width:100
  },
  view3:{
    backgroundColor:'yellow',
    height:100,
    width:100
  },
  view4:{
    backgroundColor:'green',
    height:100,
    width:100
  },
})

OUTPUT:



Example 6: Flex with all Views

import React from 'react';
import { View, StyleSheet } from 'react-native';
export default function Example() {
  return (
    <View style={styles.conatainer}>
      <View style={styles.view1}/>
      <View style={styles.view2}/>
      <View style={styles.view3}/>
      <View style={styles.view4}/>
    </View>
  );
}

const styles = StyleSheet.create({
  conatainer: {
    flex: 1,
  },
  view1:{
    backgroundColor:'red',
    flex:1
  },
  view2:{
    backgroundColor:'pink',
    flex:1
  },
  view3:{
    backgroundColor:'yellow',
    flex:1
  },
  view4:{
    backgroundColor:'green',
    flex:1
  },
})

OUTPUT:



Comments

Post a Comment

Popular posts from this blog

Button in React-Native

Image
1) Button Example in React Native import   React   from   'react' ; import  {  StyleSheet ,  Button ,  View ,  SafeAreaView ,  Text ,  Alert  }  from   'react-native' ; function   ButtonExample () {      return (    < SafeAreaView   style = { styles . container } >      < View >        < Text   style = { styles . title } >         The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.        </ Text >        < Button          title = "Press me"       ...
Read more

StyleSheet in React Native

Image
 1) How to create StyleSheet in React Native   We can create StyleSheet for each component or element in the UI screen rather than creating an inline stylesheet as we saw in previous blog see below example import   React   from   'react' ; import  {  View ,  Text ,  StyleSheet  }  from   'react-native' ; export   default   function   Example () {    return  (      < View   style = { styles . container } >        < Text   style = { styles . text } > See below StyleSheet for each View </ Text >        < View   style = { styles . firstView }   />          < View   style = { styles . secondView } />        < View   style = { styles . thirdView } />   ...
Read more

State in React Native

Image
 1) How to use State in React Native in Class Component State:- State is very common in react native, the state is mutable property which we can change the value at any time. import   React , { Component }  from   'react' ;   import  {  Text ,  View ,  Button  }  from   'react-native ;      export   default   class   StateExample   extends   Component  {        state  = {            myState : 0   //this is default state value     }        //here we are updating the state through below function      updateState  = ()  =>   this . setState ({ myState :   this . state . myState  +  1 })     ...
Read more