@blackbox-vision/react-native-paper-use-styles
v0.1.2
Published
Custom Hook for dynamic styles with react-native-paper
Downloads
8
Readme
RN Paper makeStyles Hook
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.