Live Demo, fork to alter and experiment
Color Palette
1. Mapping Dynamic BackGround Colors in React Native?
Primary issue is setting dynamic style.backgroundColor while mapping through the List Items. So Red should have a red backgroundColor while Yellow would of course have a Yellow backgroundColor. Essentially making each one a color swatch. And I’d like to make the text dark or light depending on which would stand out per each color. The list is hard coded in App.Js, and theoretically I could just hard code the swatches if they aren’t being added to the list. But the whole point was to set Colors as Variables. This is a mix of a tutorial from Traversy doing a shopping list and then Maximillian using color variables. He reads them in from a file and then sets them similar to bootstrap, like Colors.Primary or Colors.Accent. But I’m having trouble figuring out how to change them dynamically while mapping through the list of colors… I tried mapping style=backgroundColor:{item.colorCode}, but I kept getting a syntax error.
ListItem.js
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
TextInput,
} from 'react-native';
import Icon from 'react-native-vector-icons/dist/FontAwesome';
const ListItem = ({
item,
deleteItem,
editItem,
isEditing,
editItemDetail,
saveEditItem,
handleEditChange,
itemChecked,
checkedItems,
}) => {
const checked = checkedItems.filter(
checkedItem => checkedItem.id === item.id,
);
return (
<TouchableOpacity style={styles.listItem}>
<View style={styles.listItemView}>
{isEditing && editItemDetail.id === item.id ? (
<TextInput
placeholder="Edit Item..."
style={styles.editItemInput}
onChangeText={handleEditChange}
/>
) : (
<Text
onPress={() => itemChecked(item.id, item.text)}
style={
checked.length ? styles.checkedItemText : styles.listItemText
}>
{item.text}
</Text>
)}
<View style={styles.iconView}>
{isEditing && editItemDetail.id === item.id ? (
<Icon
name="save"
size={20}
color="green"
onPress={() => saveEditItem(item.id, item.text)}
/>
) : (
!checked.length && (
<Icon
name="pencil"
size={20}
color="blue"
onPress={() => editItem(item.id, item.text)}
/>
)
)}
<Icon
name="remove"
size={20}
color="firebrick"
onPress={() => deleteItem(item.id)}
/>
</View>
<View style={styles.codeView}>
<Text>
{item.colorCode}
</Text>
</View>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
listItem: {
padding: 15,
// backgroundColor: '#f8f8f8',
backgroundColor: 'red',
borderBottomWidth: 1,
borderColor: '#eee',
width: 100,
height: 100,
flexDirection: 'row',
},
listItemView: {
// flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
listItemText: {
fontSize: 18,
},
checkedItemText: {
fontSize: 18,
textDecorationLine: 'line-through',
color: 'green',
},
iconView: {
flexDirection: 'row',
justifyContent: 'space-evenly',
width: 70,
},
codeView: {
// flexDirection: 'row',
justifyContent: 'space-evenly',
width: 70,
backgroundColor: '#00FF00',
},
editItemInput: {
padding: 0,
fontSize: 18,
},
});
export default ListItem;
