? Inline vs External Styles in React Native

? Quick Overview

In React Native, styling is done using JavaScript objects instead of traditional CSS files. Two common approaches are Inline Styles and External Styles (StyleSheet). Understanding when and how to use each approach helps in writing clean, reusable, and performant UI code.

? Key Concepts

• React Native uses JavaScript-based styling
• No separate CSS files like web development
• Styles are applied using the style prop
• StyleSheet.create() is used for external styles

? Syntax / Theory

• Inline Styles are written directly inside the component JSX
• External Styles are defined once and reused across components
• External styles improve readability and performance

? Code Example(s)

// Inline styles written directly inside JSX
import { Text, View } from "react-native";

export default function App() {
  return (
    <View>
      <Text style={{ color: "blue", fontSize: 20, marginTop: 20 }}>
        Inline Styled Text
      </Text>
    </View>
  );
}

// External styles using StyleSheet.create
import { Text, View, StyleSheet } from "react-native";

export default function App() {
  return (
    <View>
      <Text style={styles.text}>
        External Styled Text
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    color: "green",
    fontSize: 20,
    marginTop: 20
  }
});

? Live Output / Explanation

? Interactive Example / Visualization

Use the simulator below to understand how the code structure changes between Inline and External styling while the visual result remains the same.

? Use Cases

• Inline styles for quick testing or dynamic values
• External styles for large applications
• Reusable UI components
• Team-based projects