Not Pictured: Mangoes

    @blackbox-vision/react-native-paper-use-styles
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    RN Paper makeStyles Hook License: MIT

    Custom Hook to define RN StyleSheets in a dynamic way.

    Table of contents

    Use case

    You're using RN for building an app, and you need to make custom styles based on theme and props.

    Compatibility

    Our package currently supports apps with RN >= 0.60. We don't have a plan currently to support olders ones, but if you need we're open to support it.

    Pre Requisites

    You're using react-native-paper components in your app.

    Installation

    You can install this library via NPM or YARN.

    NPM

    npm i @blackbox-vision/react-native-paper-use-styles

    YARN

    yarn add @blackbox-vision/react-native-paper-use-styles

    Example Usage

    After reading and performing the previous steps, you should be able to import the library and use it like in this example:

    // MyComponent.js
    import React from 'react';
    import { View } from 'react-native';
    
    import { useStyles } from './styles';
    
    const deviceWidth = Dimensions.get('screen').width;
    const deviceHeight = Dimensions.get('screen').height;
    
    const MyComponent = (props) => {
      const styles = useStyles({
        deviceWidth,
        deviceHeight,
      });
    
      return <View style={styles.container}> .... </View>;
    };
    
    export default MyComponent;
    // styles.ts
    
    export const useStyles = makeStyles((theme, props) => ({
      container: {
        backgroundColor: theme.colors.backgroundColor,
        height: props.deviceHeight,
        width: props.deviceWidth,
      },
    }));

    Issues

    Please, open an issue following one of the issues templates. We will do our best to fix them.

    Contributing

    If you want to contribute to this project see contributing for more information.

    License

    Distributed under the MIT license. See LICENSE for more information.

    Install

    npm i @blackbox-vision/react-native-paper-use-styles

    DownloadsWeekly Downloads

    26

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • jonatansalas
    • manutuero