https://github.com/atlj/react-native-reuix
A redux-like store system for React Native Reanimated 2 shared values
https://github.com/atlj/react-native-reuix
npm-package react react-native reanimated2 redux redux-toolkit typescript
Last synced: about 2 months ago
JSON representation
A redux-like store system for React Native Reanimated 2 shared values
- Host: GitHub
- URL: https://github.com/atlj/react-native-reuix
- Owner: atlj
- License: mit
- Created: 2022-04-21T18:08:07.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-04-21T19:48:16.000Z (about 3 years ago)
- Last Synced: 2025-04-06T04:59:45.487Z (about 2 months ago)
- Topics: npm-package, react, react-native, reanimated2, redux, redux-toolkit, typescript
- Language: Java
- Homepage: https://www.npmjs.com/package/react-native-reuix
- Size: 414 KB
- Stars: 4
- 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-reuix
A [redux](https://github.com/reduxjs/redux)-like store system for React Native Reanimated 2 shared values
## Prerequisites
This module needs
[React Native Reanimated 2](https://docs.swmansion.com/react-native-reanimated/docs) to work, first make sure you have this package installed
## Installation
### Using Yarn
```sh
yarn add react-native-reuix
```
### Using npm
```sh
npm install react-native-reuix
```
## Usage
### 1. Create a Store
```ts
export const sharedValueStore = createSharedValueStore({
initialState: {
testOpacity: 0.5,
},
actions: {
setTestOpacity(state, payload: number) {
state.testOpacity = payload;
},
},
});
```
### 2. Wrap Your App With SharedValueStoreProvider and Pass Your Store
```tsx
export default function App() {
return (
);
}
```
### 3. Read Values From Store
Get the store using useSharedValueStore hook
```ts
const sharedValueStore = useSharedValueStore();
```
Then you can freely read values from store
```ts
sharedValueStore.value.testOpacity
```
### 4. Dispatch Actions to Change Values
Get the dispatcher using useSharedValueDispatch hook
```ts
const sharedValueDispatch = useSharedValueDispatch();
```
Dispatch actions to change values
```ts
sharedValueDispatch('setTestOpacity', 1);
```
## Rest
Rest of the docs are coming soon
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT