Lesson 2: Using React Native Stylesheets

Using React Native Stylesheets

1. Creating Stylesheets:

   • Use StyleSheet.create to define styles.
   import { StyleSheet } from 'react-native';

   const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});


2. Applying Styles:

   • Use the style prop to apply styles to components.
   <View style={styles.container}>
<Text style={styles.text}>Hello, JUST-Learning!</Text>
</View>


3. Combining Styles:

   • Combine multiple styles using an array.
   <Text style={[styles.text, { color: 'blue' }]}>Styled Text</Text>


4. Best Practices:

   • Keep styles modular and reusable.
   • Define common styles in separate files.
   • Avoid inline styles for better performance.

Conclusion: Using React Native Stylesheets allows you to create organized and maintainable styles for your Expo applications. By following best practices, you can ensure your styles are reusable and efficient.