Course:
Basic Components in React Native
Introduction: The View component is the most fundamental component for building layouts in React Native.
Using the View Component:
Example Code:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<View style={styles.box}>
<Text>Box 1</Text>
</View>
<View style={styles.box}>
<Text>Box 2</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
box: {
width: 100,
height: 100,
backgroundColor: 'lightblue',
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
Conclusion: The View component is crucial for creating structured and responsive layouts. Understanding how to use View effectively will allow you to build complex UI structures.