Cascading Styles in React Native

This post is inspired by the ReactNative course – React Native – The Practical Guide [2025]

Passing and Overriding Styles via Props

When building React Native apps, especially with modular UI components, it’s common to reuse smaller components (like buttons, labels, or instruction text) inside larger screens. However, you often need to customize or override their styles depending on the parent screen’s context, just like CSS cascading works in the web world.

Let’s see how this works with a practical example from a game screen.

🕹 Example: GameScreen.js and InstructionText.js

Suppose we have a reusable InstructionText component that displays a short hint or message for the player.

InstructionText.js

import { Text, StyleSheet } from 'react-native';

export default function InstructionText({ children, style }) {
  return <Text style={[styles.text, style]}>{children}</Text>;
}

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    color: '#222',
    textAlign: 'center',
  },
});

Here, the component defines a base style (styles.text) but also accepts a style prop.
Notice the array syntax in style={[styles.text, style]}, this is key. It allows the parent to override or extend styles dynamically.

🧠 Using It Inside GameScreen.js

Now we want to show this text inside a game screen, but with slightly different styling — say, a different color or font size.

GameScreen.js

import { View, StyleSheet } from 'react-native';
import InstructionText from '../components/InstructionText';

export default function GameScreen() {
  return (
    <View style={styles.container}>
      <InstructionText style={styles.instructionText}>
        Guess the number!
      </InstructionText>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  instructionText: {
    color: '#007AFF', 
    fontSize: 22,      
  },
});

When rendered, React Native merges the styles:

1. Starts with InstructionText’s base styles.text.
2. Applies any styles from GameScreen’s instructionText.
3. The later styles in the array take precedence, allowing parent components to override specific properties.

Why This Pattern Matters

• Reusability: The child component (InstructionText) can be used across multiple screens with different visual requirements.
• Consistency: The base styles ensure design coherence.
• Flexibility: Parent components have the freedom to adapt visuals per context without editing the child’s internal code.

Key Takeaways

• Use the array syntax style={[baseStyle, props.style]} in child components.
• Pass style props down via { style } to make components extensible.
• The last style in the array overrides earlier ones — think of it like cascading priority.

By applying this cascading style approach, you’ll make your React Native components more modular, scalable, and maintainable, perfect for apps like games with dynamic visual themes.