react-native-style-helper

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

Documentation

• Preview
• Installation
• Why?
• Usage

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.