Building Consistent UI Components

In this lesson, you will learn how to wrap React Native’s primitive components to ensure your app looks and behaves identically across different operating systems.

The Problem: Platform Inconsistency

Even though React Native gives us "cross-platform" components like View and Text, they often behave differently under the hood. For instance, a TouchableOpacity might have different default opacity settings or ripple effects on Android versus iOS. If you use raw primitives throughout your app, you’ll find yourself fixing the same layout quirks in dozens of different files.

The Solution: Abstraction Layers

To fix this, we build an internal "Component Library." Instead of importing TouchableOpacity from react-native everywhere, we create our own AppButton component. This component acts as a gatekeeper: it handles the native platform differences once, and the rest of your app simply consumes your standardized version.

Example: Creating a Unified Button

By abstracting the component, you can enforce styles, typography, and touch behavior in one place:

// components/AppButton.js
import { TouchableOpacity, Platform, StyleSheet } from 'react-native';

export const AppButton = ({ children, onPress }) => {
  return (
    <TouchableOpacity 
      activeOpacity={Platform.OS === 'ios' ? 0.7 : 0.8} 
      style={styles.button}
      onPress={onPress}
    >
      {children}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 16,
    borderRadius: 8,
    backgroundColor: 'blue',
  }
});

By using AppButton throughout your project, you ensure that every button in your application respects your specific design constraints, regardless of whether the user is on an iPhone or an Android device. If you decide to change the button's padding or add a new interaction effect later, you only have to edit this single file rather than searching through your entire codebase.

This approach transforms your UI from a collection of fragmented platform-dependent elements into a robust, predictable system that scales with your project.

Key Takeaway: By wrapping native primitives in your own custom components, you isolate platform-specific logic and guarantee a consistent visual language across your entire application.