React Native Style Prop Type

Description

Validate React Native styles by ensuring the style keys are valid React Native style properties.

• Required prop type validation is supported, similar to the built-in prop types.
  • ReactNativeStylePropType.isRequired
• Style array validation is also supported.
  • style={[styles.textStyle1, styles.textStyle2]}

Usage

import { StyleSheet, Text, View } from 'react-native';
import ReactNativeStylePropType from 'react-native-style-prop-type';

const Component = ({style, textStyle}) => (
  <View style={style}>
    <Text style={textStyle}>My Component</Text>
  </View>
);

Component.propTypes = {
  style: ReactNativeStylePropType.isRequired,
  textStyle: ReactNativeStylePropType
};

const Page = () => (
  <Component style={styles.style} textStyle={[styles.textStyle1, styles.textStyle2]} />
);

const styles = StyleSheet.create({
  style: { ... },
  textStyle1: { ... },
  textStyle2: { ... }
})

Installation

npm i react-native-style-prop-type -S

Special Thanks

Thanks to Frankie Bagnardi for creating the original react-style-proptype package which this package builds on top of.