Styling
Most of the core React Native components has a property called style
that can be used for inline styling.
<Text style={{ fontSize:18, color: 'red' }}>Red text</Text>
The better way is to use StyleSheet
component. Styles defined in StyleSheet can be reused across multiple components:
Import the StyleSheet
component:
import { StyleSheet, Text } from "react-native";
StyleSheet create
method creates a StyleSheet object, which groups styles together and assign each style a unique identifier:
const styles = StyleSheet.create({
alerttext: {
fontSize: 18,
color: "red",
},
});
Use styles in the component's style
attribute
<Text style="{styles.alerttext}">Red text</Text>
Task
Continue with the Todolist app created in the Flatlist section. Add a style for the list item using StyleSheet
to have a light blue background and rounded corners as shown in the following image.