React- Native- App -Development

CSS Flex in React Native

June 07, 2022

Hey, welcome. If you are here, you must have heard about flex box in CSS or you already know what is flex box. But, What exactly Flex box is ?

What is Flex Box ?

Flex box layout provide us a more efficient way to manage items of a particular container. Flex box layout align, shrink items or make space among items by occupying the given space, and make the website responsive.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.bOne}>First Text</Text>
      <Text style={styles.bTwo}>Second Text</Text>
      <Text style={styles.bThree}>Third Text</Text>
      <Text style={styles.bFour}>Fourth Text</Text>
     
     </View>
  );
}

const styles = StyleSheet.create({
 container :{
  flex:1,
  flexDirection:"column",
  // justifyContent:"space-around",

  padding:"20",
  backgroundColor:"gray"
 },

bOne:{
  backgroundColor:"cyan",
  padding:"20px",
 },

 bTwo:{
  backgroundColor:"orange",
  padding:"20px",
 },
 bThree:{
  backgroundColor:"red",
  padding:"20px",
 },
 bFour:{
  backgroundColor:"blue",
  padding:"20px",
 }
})