react-native-style-helper

This package allows you to create compatible styles from your predefined styles and prop styles.

Usage no npm install needed!

<script type="module">
  import reactNativeStyleHelper from 'https://cdn.skypack.dev/react-native-style-helper';
</script>

README

react-native-style-helper

This package allows you to create compatible styles from your predefined styles and prop styles.

Documentation

Preview

Preview

Installation

Install the package using npm:

npm i --save react-native-style-helper

or using yarn:

yarn add react-native-style-helper

Why?

When mixing own styles with prop styles, the parent component often has to pass a style object. It would be better if there would be more variants to pass styles. This problem solves this package. Currently, you can pass a style object, or an array of style objects.

Usage

Example

Example on how to use this.

Create your component:

export default function ExampleComponent(props) {
    // Destruct own props
    const { text, style, ...other } = props;
    
    return <Text {...other}>{text}</Text>;
}

Use createStyles to pass your styles

export default function ExampleComponent(props) {
    // Destruct own props
    const { text, style, ...other } = props;
    
    return <Text style={createStyles(yourStyle, style)} {...other}>{text}</Text>;
}

Usage

This package basically only provides this function:

createStyles

You pass all the styles in that (no matter whether they are style objects or array of style objects), and you get a single style object back!

Note

Styles will be rewritten. The next style rewrites the current style.