How to create 3x3 grid menu in react native without 3rd party lib?

Question

I want to create grid center menu in react native, I just read the doc and looks good to start, but I have a problem to creating line for each grid menu

I\'ve created 3x

Answer 1

I change the last color to be more visible and made the line "grey" (you can use lightgrey or any custom color you want) so that you can change it easily.

import {Dimensions, View} from 'react-native'    
const DeviceWidth = Dimensions.get('window').width

Here is the code inside the render function:

  <View style={{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }}>
    <View style={{
      flexDirection: 'row',
      backgroundColor: "grey"}}>
      <View>
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, backgroundColor: 'powderblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, backgroundColor: 'skyblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, backgroundColor: 'yellow'}} />
      </View>
      <View>
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, marginLeft:1, backgroundColor: 'powderblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, marginLeft:1, backgroundColor: 'skyblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginLeft:1, backgroundColor: 'yellow'}} />
      </View>
      <View>
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, marginLeft:1, backgroundColor: 'powderblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, marginLeft:1, backgroundColor: 'skyblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginLeft:1, backgroundColor: 'yellow'}} />
      </View>    
    </View>
  </View>