Nauseating Packaged Meat

    rn-extended-stylesheet

    0.0.1 • Public • Published

    rn-extended-stylesheet

    An extended StyleSheet for React Native that supports Media Queries, caching and lazy overrides

    Dependency Status peerDependency Status devDependency Status build status

    Installation

    npm install rn-extended-stylesheet

    Usage

    ExtendedStyleSheet allows you to specify a set of styles with inline Media Queries. rn-extended-stylesheet will return a function for you to call during the render cycle that will evaluate the current dimensions of the window using Dimensions.get('window'). The library will cache the base styles that aren't dependent on the size, so you are not constantly re-creating the bridged StyleSheet (as mentioned in the React native docs) here.

    import ExtendedStyleSheet from 'rn-extended-stylesheet';
     
    const getSheet = ExtendedStyleSheet.create({
        button: {
            color: "red",
            "@media (min-width:200) and (max-width:500)": {
                color: 'red'
            },
            "@media (min-width: 200)": {
                color: 'yellow'
            },
            "@media (max-width:400)": {
                color: 'blue'
            }
        }          
    });
     
    class Button extends Component {
        render() {
            const styles = getSheet();
            return <Button style={styles.button}></Button>
        }
    }
     

    Advanced Usage

    The returned function from create allows you to pass an override object to pass styling keys that you might not know at creation time (like overrides from props). These overrides are added as the last item to the style set, so they take precedence.

    import ExtendedStyleSheet from 'rn-extended-stylesheet';
     
    const getSheet = ExtendedStyleSheet.create({
        button: {
            color: "red",
            "@media (min-width:200) and (max-width:500)": {
                color: 'red'
            },
            "@media (min-width: 200)": {
                color: 'yellow'
            },
            "@media (max-width:400)": {
                color: 'blue'
            }
        }          
    });
     
    class Button extends Component {
        render() {
            const {buttonStyle} = this.props; // get button overrides from props
            const styles = getSheet({button:buttonStyle}); // mix into the stylesheet
            
            return <Button style={styles.button}></Button>
        }
    }
     

    Install

    npm i rn-extended-stylesheet

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • bringking