Style React Native Components

Style React Native Components Differently on iOS and Android

Most React Native code is shared between iOS and Android, but sometimes there is a need for different styling on each platform, or to have completely different code run on each device. We’ll look at three different ways to change styles or entire components between iOS and Android.

Platform helper

Sometimes we need to write iOS or Android specific code in our apps. The Platform helper can be used inline to help us specify specific styles for the different target platforms.

import { Platform } from 'react-native'
import HeaderStyle from '../styles/Header'

const headerStyle = Platform.select({
	ios: HeaderStyle.iOSHeader,
	android: HeaderStyle.androidHeader
})

<View styled={headerStyle} />

Alternatively, different versions of the entire component can be specified by appending .android or .ios before the .js file extension.

├── Header.android.js
├── Header.ios.js

The component is still imported without the .android or .ios.

import Header from './Header'

This will magically import the .ios version on iOS and .android version on Android.

🐦   Previous   💼   Next