Consistent Input Styling

In this lesson, you’ll learn how to wrap native text input components to ensure a uniform design language while respecting the distinct interaction expectations of iOS and Android.

When building forms, the biggest challenge isn't just the code—it’s the "feel." iOS users expect a specific borderless or pill-shaped aesthetic, while Android users often anticipate a subtle underline or a distinct container shadow. If we hardcode styles into every TextInput, our app becomes fragmented and difficult to maintain.

The Universal Wrapper Pattern

Instead of styling components inline, we create a single AppInput component that acts as a bridge. We leverage our knowledge of Platform-Specific Style File Structures to inject platform-aware styles while keeping the core logic shared.

import { TextInput, StyleSheet, Platform } from 'react-native';

const AppInput = ({ style, ...props }) => {
  return (
    <TextInput 
      {...props} 
      style={[styles.baseInput, Platform.select({
        ios: styles.iosInput,
        android: styles.androidInput,
      }), style]} 
    />
  );
};

const styles = StyleSheet.create({
  baseInput: {
    fontSize: 16,
    padding: 12,
  },
  iosInput: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
  },
  androidInput: {
    borderBottomWidth: 2,
    borderBottomColor: '#6200EE',
  }
});

Why This Matters

By abstracting the TextInput, you ensure that your design team’s requirements—like consistent padding and font scaling—are handled in one place. If you need to update the error state color or the border radius, you change it in the AppInput file, and every form in your app updates instantly.

This approach also lets you inject "platform-parity" props easily. For instance, you might want to force underlineColorAndroid="transparent" on Android to hide the default behavior, while leaving iOS untouched. By containing this logic inside your wrapper, you avoid leaking platform-specific hacks into your screens, keeping your business logic clean and your UI predictable.

Key Takeaway: Create a unified wrapper component that delegates platform-specific stylistic nuances to dedicated stylesheets, ensuring a consistent look and feel without sacrificing native usability.