Skip to content

Instantly share code, notes, and snippets.

@happyharis
Created December 12, 2018 13:35
Show Gist options
  • Save happyharis/82915ba2a5134606538ae4b4187f2c0c to your computer and use it in GitHub Desktop.
Save happyharis/82915ba2a5134606538ae4b4187f2c0c to your computer and use it in GitHub Desktop.
import React from 'react';
import { StyleSheet, Text, View, Button, FlatList, TouchableOpacity } from 'react-native';
// import { FontAwesome } from '@expo/vector-icons';
import { Icon } from 'react-native-elements';
class FinalProject extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
data: [
'Eat', 'Sleep', 'Teach', 'Grow fat'
]
};
}
remove = (index) => {
this.setState(
prevState => {
const data = prevState.data;
data.splice(index, 1);
return { data };
}
);
};
renderRow = ({ item, index }) =>
(<View style={styles.row} key={index}>
<Text>{item}</Text>
<TouchableOpacity
style={{
alignItems: 'flex-end',
justifyContent: 'center',
borderColor: '#32CD32'
}}
onPress={() => this.remove(index)}
// onPress={() => console.log(index)}
>
<Icon name="minus" type='font-awesome' />
</TouchableOpacity >
</View>);
render() {
return (<FlatList
data={this.state.data}
renderItem={this.renderRow}
keyExtractor={item => item.toString()}
/>);
}
}
const styles = StyleSheet.create({
row: {
padding: 15,
marginBottom: 5,
backgroundColor: 'skyblue'
}
});
export default FinalProject;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment