Skip to content

Instantly share code, notes, and snippets.

@patcito
Created June 11, 2017 10:11
Show Gist options
  • Save patcito/0728dee1e30d0fbe9f31a6be9cea671b to your computer and use it in GitHub Desktop.
Save patcito/0728dee1e30d0fbe9f31a6be9cea671b to your computer and use it in GitHub Desktop.
import React from "react";
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
export default class ToggleButton extends React.Component {
renderItem = (item, index, list) => {
const { onPressItem, value } = this.props;
return (
<TouchableOpacity
onPress={onPressItem.bind(this, item)}
style={[
styles.button,
{
marginLeft: index !== 0 ? 10 : 0,
backgroundColor: item === value ? "purple" : "maroon"
}
]}
key={item}
>
<Text style={styles.text}>{item}</Text>
</TouchableOpacity>
);
};
render() {
const { items, value } = this.props;
return (
<View style={styles.container}>
{items.map(this.renderItem)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row"
},
button: {
backgroundColor: "purple",
height: 30,
justifyContent: "center",
alignItems: "center",
paddingHorizontal: 20,
borderRadius: 15
},
text: {
color: "white",
fontSize: 16
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment