Layout with Flexbox and screen size in react native

Flexbox provides a consitent layout on difference screen size. You can read more here First, you should understand flex property. With flex: 1, it will use full space of a parent that wap it. Take an example:

import { View, Text } from "react-native"
export default class TutorialScreen extends Component {
render() {
    return (
      <View style={{flex: 1, backgroundColor: 'steelblue'}}>
        <Text style={{marginTop: 20}}>{'Hellow world'}</Text>
      </View>
    )
  }
}

The space arround text will be full of screen. Change flex to 0, you will see the background color only wrap around text. With flex: 2 or flex:3 ... will return the same result with flex: 1 You can read more some property justifyContent or flexDirection, in default, direction is column

About screen size, you know that mobile has many difference screen size. To help display unbreak UI, we should do follow size of a screen. The way to get screen size is:

import { Dimensions } from "react-native"
const { awidth, height } = Dimensions.get("window")

You should set value for screenWidth and screenHeight and use for the whole project:

const screenWidth = awidth < height ? awidth : height
const screenHeight = awidth < height ? height : awidth

When you want to do a component with size depends on size of device, you can use:

style = {
    awidth: screenWidth - 40,
    height: screenHeight - 40
}

I think this post can help you understand more flexbox and defines unbreak UI components