Lesson 1: Introduction to Styling in Expo

Introduction to Styling in Expo

Styling in Expo is based on React Native’s styling system, which is similar to CSS but uses JavaScript objects. This system allows you to create responsive, flexible, and performance-optimized designs for your mobile applications.

Key Points:

1. JavaScript Objects for Styles:

   • Styles are defined using JavaScript objects instead of traditional CSS.
   const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
};


2. Flexbox Layout:

   • Expo uses Flexbox for layout, making it easy to create responsive designs.
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Welcome to JUST-Learning!</Text>
</View>


3. Differences from Web CSS:

   • No cascade or inheritance.
   • Styles are more performance-oriented.
   • Limited set of properties compared to CSS.

Best Practices:

• Keep styles modular and reusable.
• Use descriptive names for style properties.
• Test styles on different devices to ensure responsiveness.

Conclusion: Understanding the basics of styling in Expo is crucial for creating visually appealing and user-friendly mobile applications. By using JavaScript objects and Flexbox, you can create flexible and efficient designs.