![WithFrame logo](/logo.full.png)
Toggle Button Group with Selected Contained Button (Color)
Screen is created using these React Native Core Components: <View />
, <Text />
, <TouchableWithoutFeedback />
, <SafeAreaView />
import React from 'react';
import {
StyleSheet,
View,
Text,
TouchableWithoutFeedback,
SafeAreaView,
} from 'react-native';
const tabs = [{ name: 'My Account' }, { name: 'Company' }, { name: 'Team' }];
export default function Example() {
const [value, setValue] = React.useState(0);
return (
<SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
<View style={styles.container}>
{tabs.map((item, index) => {
const isActive = index === value;
return (
<View key={item.name} style={{ flex: 1 }}>
<TouchableWithoutFeedback
onPress={() => {
setValue(index);
}}>
<View
style={[
styles.item,
isActive && { backgroundColor: '#e0e7ff' },
]}>
<Text style={[styles.text, isActive && { color: '#4338ca' }]}>
{item.name}
</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
})}
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
backgroundColor: 'white',
paddingVertical: 24,
paddingHorizontal: 12,
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
},
item: {
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 10,
backgroundColor: 'transparent',
borderRadius: 6,
},
text: {
fontSize: 13,
fontWeight: '600',
color: '#6b7280',
},
});