Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
kanzitelli committed Oct 28, 2021
1 parent d4ec1c6 commit 0ada6e4
Showing 1 changed file with 73 additions and 20 deletions.
93 changes: 73 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,87 @@
<img src="https://xxx-files.ggc.team/oss/rnn-screens/rnn-screens-logo.png" width="80%" title="Logo">
</p>

### Install it
Purpose of [RNN Screens](https://github.com/kanzitelli/rnn-screens) is to simplify and accelerate the process of React Native App development with [React Native Navigation](https://github.com/wix/react-native-navigation). It is not a replacement for RNN but a good addition!

### Quick start

Make sure you have [react-native-navigation](https://github.com/wix/react-native-navigation) installed in your project.

```
yarn add @kanzitelli/if-component
yarn add rnn-screens
```

### Usage

#### 1. Describe app's screens

```tsx
import {generateRNNScreens, Root, Stack, Component, BottomTabs} from 'rnn-screens';

export const screens = generateRNNScreens<'Main' | 'Settings'>({
Main: {
component: Main,
options: {
topBar: {
title: {
text: 'Home',
},
},
},
},
Settings: {
component: Settings,
options: {
topBar: {
title: {
text: 'Settings',
},
},
},
},
});
```

### Use it
#### 2. Set app's navigation root

```tsx
import {If} from '@kanzitelli/if-component';

class OrdersScreen = () => {
return (
<>
<If _={loading}
_then={<LoadingIndicator />}
_else={<SomethingElse />} />
</>
)
}
// One screen app
screens.N.setRoot(Root(Stack(Component(screens.get('Main')))));

// Tab based app
screens.N.setRoot(
Root(
BottomTabs([
Stack(Component(screens.get('Main'))),
Stack(Component(screens.get('Settings'))),
]),
),
);
```

### TS lib starter
#### 3. Navigate with predictability

```tsx
// push screen
screens.push(componentId, 'Example');

// show modal
screens.show('Example');

```bash
> git clone https://github.com/kanzitelli/if-component rn-lib
> cd rn-lib && rm -rf .git
> yarn
// push screen with passProps
screens.push<ExampleScreenProps>(
componentId,
'Example',
{ value: randomNum() },
)
```

Don't forget to change your lib's name in `package.json` and check other scripts.
An integration example could be found at [kanzitelli/rnn-starter](https://github.com/kanzitelli/rnn-starter).

### Credits

Thanks to the team @ Wix behind [React Native Navigation](https://github.com/wix/react-native-navigation)!

### License

This project is [MIT licensed](https://github.com/kanzitelli/rnn-screens/blob/master/LICENSE.md)

0 comments on commit 0ada6e4

Please sign in to comment.