In React Native, there are two primary ways to apply styles to components:
Inline Styles: Styles can be applied directly to components using the style prop with a JavaScript object.
StyleSheet: React Native provides a StyleSheet API that allows you to define styles in a separate object, which can improve performance by optimizing the styles during compilation.
//Inline Styles
import React from 'react';
import { View, Text } from 'react-native';
const MyComponent = () => {
return (
<View style={{ backgroundColor: 'blue', padding: 20 }}>
<Text style={{ color: 'white', fontSize: 18 }}>Hello, React Native!</Text>
</View>
);
};
export default MyComponent;
//StyleSheet
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
backgroundColor: 'blue',
padding: 20,
},
text: {
color: 'white',
fontSize: 18,
},
});
const MyComponent = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
</View>
);
};
export default MyComponent;
© www.thecoderjob.com. All Rights Reserved. Designed by HTML Codex