Skip to content

Instantly share code, notes, and snippets.

@davorb
Created August 25, 2017 16:22
Show Gist options
  • Save davorb/abf505bac4f3f67f30bffffc539abf0a to your computer and use it in GitHub Desktop.
Save davorb/abf505bac4f3f67f30bffffc539abf0a to your computer and use it in GitHub Desktop.
import React from 'react';
import {
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
const food = [
{
key: 'Sushi'
},
{
active: true,
key: 'Burgare'
},
{
key: 'Pizza'
},
{
key: 'Pasta'
}
];
const FoodList = (props) => {
console.log(props.selected === food[0].key);
return (
<FlatList
data={food}
renderItem={({item}) =>
<View style={styles.item}>
<Text
style={item.key === props.selected ? styles.activeItem : styles.textItem}>
{item.key}
</Text>
</View>}
/>
)
}
export default class App extends React.Component {
constructor(props) {
super(props);
this.i = 0;
this.state = {
selected: food[this.i]
};
setInterval(() => {
this.i = (this.i + 1) % food.length;
this.setState(previousState => {
return {
selected: food[this.i]
};
});
}, 1000);
}
renderFoodlist() {
return (
<FoodList selected={this.state.selected.key} />
)
}
render() {
return (
<View style={styles.container}>
<Text>Shake your phone to open the developer menu.</Text>
{this.renderFoodlist()}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
paddingTop: 22,
},
textItem: {
fontSize: 24,
},
activeItem: {
fontSize: 24,
backgroundColor: 'red',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment