---------------------------------------------
## Install
⚠️ This library is extremely simple (one line), if you prefer you can just copy the contents of [src/index.ts](https://github.com/Luffos/rxn-stylestate/blob/main/src/index.ts) and use it directly in your project without downloads.
Using NPM
```sh
npm install rxn-stylestate
```
Using Yarn
```sh
yarn add rxn-stylestate
```
🌐 Using this module for Web?
Don't forget to setup [react-native-web](https://github.com/necolas/react-native-web)
## Usage
### index.tsx
```tsx
import * as React from 'react';
import { SafeAreaView, View, Text } from 'react-native';
import { myText, myView } from './styles';
function App() {
const textStyle = myText();
const viewStyle = myView();
return (
Hello World
Hello Again How are You?
);
}
export default App;
```
### styles.ts
```ts
import { useState, useEffect } from 'react';
import { TextStyle, ViewStyle } from 'react-native';
import { createStyle } from 'rxn-stylestate';
export const myText = createStyle(() => {
const [colorState, setColorState] = useState('red');
useEffect(() => {
const c = setInterval(() => {
setColorState((prevState) => (prevState == 'red' ? 'blue' : 'red'));
}, 500);
return () => clearInterval(c);
}, []);
return { color: colorState, fontSize: 30 };
});
export const myView = createStyle<{ wrapper: ViewStyle; title: { 0: TextStyle; span: TextStyle } }>(() => {
return {
wrapper: { backgroundColor: 'black', alignSelf: 'flex-start', borderRadius: 8, padding: 20 },
title: {
0: { color: 'white' }, //0 is a fictitious name for "this", but you can use it as you wish
span: {
color: 'cyan',
fontSize: 20
},
},
};
});
```