Divide the whole screen into four equal parts

Question

I want to divide the whole screen into 4 equal parts each having a clickable action and onclick a prompt should appear with a textbox and an okay button on pressing it I need to render a webview

Answer 1

If you are doing this in react-native then use below code. This will divide screens in four parts and with TouchableOpacity you can use click events reflection otherwise you can use simple View.

<View style={{ flex: 1 }}>
  <View style={{ flex: 1 }}>
    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'red' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>

    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'green' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>

  </View>
  <View style={{ flex: 1 }}>
    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'blue' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>

    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'yellow' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>

  </View>
</View>

Yes, you can use common styling and components but for now I use separate So, you can easily edit and test.