Skip to content

Instantly share code, notes, and snippets.

@samipshah100
Last active June 7, 2020 09:34
Show Gist options
  • Save samipshah100/e19c8297e0a0ac1b422e401655ed4891 to your computer and use it in GitHub Desktop.
Save samipshah100/e19c8297e0a0ac1b422e401655ed4891 to your computer and use it in GitHub Desktop.
Flipkart options menu
// 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,
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment