Responsive With CSS Flex in React Native

 

After you've built the UI and functionality of your app and tested it on various devices, you'll notice that something is wrong or missing with the layouts you expected. This is a common developer issue that must be addressed from the start of the development process.

import React from 'react';

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

export default function componentName() {

  return (

    <View style={{flex:1}}>

      <View style={{flex:2,backgroundColor:"red"}}></View>

      <View style={{flex:1,backgroundColor:"orange"}}>

        <Text style={{padding:"20px", width:"340px"}}>

          The quick rown fox jumps over the lazy dog

          The quick rown fox jumps over the lazy dog

          The quick rown fox jumps over the lazy dog

          The quick rown fox jumps over the lazy dog

        </Text>

      </View>

      <View style={{flex:1,backgroundColor:"green"}}></View>

     </View>

  );

}