https://github.com/eveningkid/react-native-dynamic-styles
Dynamic stylesheet and styles for React Native
https://github.com/eveningkid/react-native-dynamic-styles
react-native style stylesheet
Last synced: 6 months ago
JSON representation
Dynamic stylesheet and styles for React Native
- Host: GitHub
- URL: https://github.com/eveningkid/react-native-dynamic-styles
- Owner: eveningkid
- License: mit
- Created: 2021-03-14T17:24:22.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-14T18:16:29.000Z (over 4 years ago)
- Last Synced: 2025-04-24T04:13:01.142Z (6 months ago)
- Topics: react-native, style, stylesheet
- Language: JavaScript
- Homepage:
- Size: 289 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-dynamic-styles
Dynamic stylesheet and styles for React Native.
```js
const [color, setColor] = useState('red');
// From unecessary style objects created at every render...
return ;
// ...to recreating a style object ONLY when dependencies have changed!
// And this time, it's not just an object but a StyleSheet reference instead :)
const style = useDynamicStyle(
() => ({
backgroundColor: color,
}),
[color]
);
return ;
```
⚡️ Generate optimized, dynamic styles just when you need it
⏩ Skip unecessary style object recreations
💅 Get `StyleSheet.create`d styles, even when they're dynamic
## Usage
```sh
npm install react-native-dynamic-styles
```
```js
import { useState } from 'react';
import { Button, Text, View } from 'react-native';
import { useDynamicStyle } from 'react-native-dynamic-styles';
export default () => {
const [opened, setOpened] = useState(false);
const toggle = () => setOpened(!opened);
const style = useDynamicStyle(
() => ({
flex: 1,
opacity: opened ? 1 : 0,
}),
[opened]
);
return (
<>
This will be our secret!
>
);
};
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT © eveningkid