react-native-swag-styles
Dynamic Styles for React Native and Expo Web
Highlights
- Dynamic. Based on React Hook. It automatically re-renders when necessary.
- Unopinionated. Use whatever component or theme library you want.
- Simple to use. No HOC, no special syntax. Easily migrate from plain StyleSheet.
- Strictly typed. Take full advantage of TypeScript. Get auto-completions in VSCode.
Installation
Usage
Replace StyleSheet.create
with makeStyles
with callback:
Use created style hook in component:
To make the style dynamic, pass props to the style creator:
Advanced Usage:
If you use a theming library, you can attach the theme hook when creating styles:
You can also create styles using multiple hooks, as long as the hooks don’t take any argument:
Pass hooks and extra props together to the style creator:
Important Note: Hook returns and props must be plain (serializable) object/values for memoization to work properly. See fast-memoize.js.
Other APIs
createStyleSheet
extends StyleSheet.create
to support constant values:
Example
To see a full working example, with a custom theme, check out the example
folder.