react-native-component-for-platform

Component For platform

Sometimes in React Native you want subtle layout differences for a platform. But you cannot justify writing an entire .ios .android or have multiple Platform.OS === platform conditions.

So introducing react-native-component-for-platform. its just 11 lines of code. copy and paste and do what you want with it. if you want.

import React, {PureComponent, Fragment} from 'react';
import {Platform} from 'react-native';

export default class RenderComponentFor extends React.PureComponent {
  render() {
    const {ios, android, ...rest} = this.props;
    if (this.props[Platform.OS]) {
      const Component = this.props[Platform.OS];
      return <Component {...rest}>{this.props.children}</Component>
    }
    return <React.Fragment>{this.props.children}</React.Fragment>
  }
}

Usage

Example usage where android will get a scrollview and ios will not. Ios will get a React.Fragment.

// MyComponent.js
import RenderComponentFor from 'react-native-component-for-platform';
...
render() {
	return <RenderComponentFor android={ScrollView} contentContainerStyle={{
		flexGrow: 1,
		justifyContent: 'between'
	}}>
		...
	</RenderComponentFor>
}