i am making a list item for the first time and noticed nothing changes if i use this code:
**EDIT!
import React from "react";
import { StyleSheet, View } from "react-native";
import { ListItem } from "react-native-elements";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
export default class ChangePassword extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
accountIcon = () => (
<MaterialIcons name="account-box" size={35} type="MaterialIcons" />
);
changePasswordIcon = () => (
<MaterialCommunityIcons
name="textbox-password"
size={35}
type="MaterialCommunityIcons"
/>
);
render() {
return (
<View>
<ListItem title="Account" leftIcon={this.accountIcon} bottomDivider />
<View style={{ backgroundColor: "#007bff" }}>
<ListItem
title="Change password"
leftIcon={this.changePasswordIcon}
bottomDivider
/>
</View>
</View>
);
}
}
Can someone explain to me why that is and how i can fix this please.
Appreciate it, thank you for your time
You are using react-native-elements
. Therefore, you must use the style of that module.
You can use containerStyle={{backgroundColor:""}}
If you just want to change the color of the title, titleStyle={{backgroundColor:""}}
Example
<ListItem
title="Change password"
leftIcon={this.changePasswordIcon}
bottomDivider
containerStyle={{backgroundColor:"blue"}}
titleStyle={{backgroundColor:"red"}}
/>