Course:
Styling in React Native
Flexbox is a powerful layout system in React Native that allows you to create complex and responsive layouts with ease. Flexbox helps align and distribute space among items in a container, even when their size is unknown or dynamic.
row or column).flex-start, center, flex-end, space-between, space-around).flex-start, center, flex-end, stretch).Imagine you are designing a course overview screen for the “JUST-Learning” app. The screen needs to display a list of courses in a vertically scrollable list.
import React from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
const CourseOverview = () => {
return (
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.courseCard}>
<Text style={styles.courseTitle}>Introduction to React Native</Text>
<Text style={styles.courseDescription}>Learn the basics of React Native.</Text>
</View>
<View style={styles.courseCard}>
<Text style={styles.courseTitle}>Advanced React Native</Text>
<Text style={styles.courseDescription}>Deep dive into advanced topics.</Text>
</View>
{/* Add more course cards as needed */}
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'stretch',
padding: 16,
},
courseCard: {
backgroundColor: '#fff',
padding: 16,
marginVertical: 8,
borderRadius: 8,
shadowColor: '#000',
shadowOpacity: 0.1,
shadowRadius: 4,
shadowOffset: { width: 0, height: 2 },
},
courseTitle: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
},
courseDescription: {
fontSize: 14,
color: '#666',
},
});
export default CourseOverview;
In this lesson, you learned how to use Flexbox to create responsive layouts in React Native. These techniques are essential for building adaptive and user-friendly mobile applications.