Creating Reusable Component Themes

In this lesson, you’ll learn how to build flexible React Native components that maintain a consistent structure while allowing for custom visual overrides.

The "Skeleton vs. Skin" Pattern

When building reusable components, think of your component in two layers: the Skeleton and the Skin. The skeleton is the core layout logic—the margins, padding, and Flexbox properties that ensure the component fits into your design system. The skin represents the aesthetic choices—colors, border styles, and fonts—that might change depending on the screen or context.

To keep your layout integrity intact while allowing for themes, we use a technique called Style Merging. Instead of hardcoding every style, we pass a style prop that merges with our base layout styles.

Implementation

Here is how you structure a reusable button that keeps its "flex" but allows for theme-based overrides:

const BaseButton = ({ style, themeColor, children }) => {
  // We define the core layout that should NEVER change
  const coreLayout = {
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  };

  // We merge our component's theme with the incoming style override
  return (
    <View style={[coreLayout, { backgroundColor: themeColor }, style]}>
      <Text>{children}</Text>
    </View>
  );
};

Maintaining Layout Integrity

The danger in allowing users to pass custom styles is that they might accidentally break your Flexbox structure by overriding display or position properties. To prevent this, you can structure your component to pass the style prop only to a container layer, or use a "style composition" approach where you explicitly pick which properties can be overridden.

By keeping your core layout (like the padding and borderRadius) fixed inside the coreLayout object, you ensure that even if a developer changes the background color or adds a border, the component remains exactly where it belongs in your grid. This creates a "contract" between your component and the rest of the app: the parent dictates the theme, but the component guards its own structural consistency.

Key Takeaway: Separate your structural "Skeleton" from your visual "Skin" by merging core layout styles with user-provided overrides to maintain consistency across your UI.