React Native: What is the difference between StyleSheet.create() and inline styles in React Native?

StyleSheet.create() — optimized. Inline — dynamic.

StyleSheet.create():

• Creates optimized styles.
• Validates at build time.
• Better performance.
• Reusable.

1const styles = StyleSheet.create({
2    container: {
3        flex: 1,
4        backgroundColor: "#fff"
5    },
6    text: {
7        fontSize: 16,
8        color: "#000"
9    }
10});
11
12<View style={styles.container}>
13    <Text style={styles.text}>Hello</Text>
14</View>

Inline styles:

• Dynamic styles.
• No validation.
• Created on each render.
• Good for dynamic values.

1<View style={{ flex: 1, backgroundColor: color }}>
2    <Text style={{ fontSize: size }}>Hello</Text>
3</View>

Key differences:

• StyleSheet — optimized, static.
• Inline — dynamic, flexible.
• Use StyleSheet for static styles.
• Use inline for dynamic styles.