Flipkart options menu

CategoryScreen.js

// All your menu options go here. 
const [menuItems, setMenuItems] = useState([
    { id: '1', name: 'Age', },
    { id: '2', name: 'Price', },
  ])

// this holds the keys of the menuItems for the view to know which category is currently being rendered. 
const [selectedItem, setSelectedItem] = useState('1')

<View style ={styles.content}>
<View style={styles.menuColumn}>
          {menuItems.map(
            (item, index) => {
              return (
                <TouchableOpacity key={item.id} onPress={() => setSelectedItem(item.id)} style={[styles.menuItem, item.id === selectedItem ? styles.selectedMenuItem : null]}>
                  <Text style={styles.menuItemText}>{item.name}</Text>
                </TouchableOpacity>
              )
            }
          )
          }

        </View>
        <View style={styles.settingsColumn}>
          
            {/* Option 1: AGE */}
          {
            selectedItem === '1' &&
            <View style={styles.settingsView} >
              {* YOUR VIEW HERE with settings for the user to select *}
              </View>

.... AND SO FORTH FOR ALL OPTIONS
</View>

//STYLES

 // CONTENT BODY
    content: {
      flexDirection: 'row',
      flex: 0.70,
    },
  
    // menu Column - left
    menuColumn: {
      flex: .4,
      flexDirection: 'column',
      borderRightColor: '#F8F8FF',
      borderRightWidth: 1,
    },
    menuItem: {
      // flex: 1,
      flex: 0,
      height:hp(8.5),
      justifyContent: 'center',
      alignItems: 'center',
      // alignItems: 'flex-start',
      // borderWidth:1,
    },
    selectedMenuItem: {
      backgroundColor: '#F8F8FF',
      borderLeftColor: Colors.darkPurple,
      borderLeftWidth: 5,
    },
  
    menuItemText: {
      marginLeft: 10,
      alignSelf: 'flex-start',
      color: Colors.kiteDark,
      fontSize: 16,
      fontWeight: 'bold',
    },
  
  
    // settings column -right
    settingsColumn: {
      flex: .6,
      padding: 15,
    },