kanzitelli / rnn-screens Goto Github PK

View Code? Open in Web Editor NEW

27.0 2.0 3.0 644 KB

🃏 Predictable Navigation for React Native.

License: MIT License

JavaScript 4.15% TypeScript 95.85%

react react-native react-native-navigation react-native-navigaiton-screens rnn-screens rnn-starter react-navigation

rnn-screens's Introduction

☣️ Experiment This is an experimental library and may have breaking changes in the future.

Goal

The goal of RNN Screens is to provide React Native developers with more simplified and predictable Navigation. It's built on top of React Native Navigation.

Quick start

Starters

starters-dev/rnn-with-expo - minimalistic starter with React Native Navigation, Expo Modules and RNN Screens.
rnn-starter - more advanced starter that is powered by cli-rn, React Native Navigation, Expo Modules, RNN Screens, RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.

Bare RNN

1. Install React Native Navigation and RNN Screens

> yarn add react-native-navigation rnn-screens
> npx rnn-link
> npx pod-install

If you had problems installing RNN, please follow more detailed tutorial

2. Build screen components

import {generateRNNScreens, Root, BottomTabs, Screen, ScreenComponent} from 'rnn-screens';

// src/screens/main.tsx
export const Main: ScreenComponent = ({componentId}) => {
  return <>...</>;
};

// src/screens/settings.tsx
type SettingsProps = {type: 'push' | 'show'};
export const Settings: ScreenComponent<SettingsProps> = ({componentId, type}) => {
  return <>...</>;
};

3. Describe screens

// src/screens/index.tsx

import {generateRNNScreens} from 'rnn-screens';
import {Main} from './main';
import {Settings} from './settings';

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

4. Build root component

// App.tsx

// single screen app
export const App = () => Root(Screen(screens.get('Main')));

// tab based app
export const TabsApp = () =>
  Root(
    BottomTabs([
      Screen(screens.get('Main')),
      Screen(screens.get('Settings'))
    ])
  );

5. Update `index.js`

// index.js

import {registerRootComponent} from 'rnn-screens';
import {App} from './App';

registerRootComponent(App);

6. Navigate with predictability

// navigate from any screen

// push screen
screens.push(componentId, 'Settings');

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

// push screen with passProps
screens.push<SettingsProps>(componentId, 'Settings', {type: 'push'});

// use RNN Navigation instance
screens.N.dismissAllModals();

Enhancements

Feel free to open an issue for suggestions.

Credits

Thanks to the React Native Navigation team @ Wix!

License

This project is MIT licensed

rnn-screens's People

Contributors

Stargazers

Watchers

Forkers

tavvfiq dumbdev168 kristenjestin

rnn-screens's Issues

Not working since last version

Hellooo,

The navigation constant system seems to have changed in react-native-navigation.
When I run the application, I get an error message telling me that a variable is null when retrieving constants.
Digging into react-native-navigation, I see that the function you use in your library now requires a parameter (Constants.ts).

I'll link a PR for the fix if it can help you.

Best practice for adding global components

First of all, awesome library!
I am trying to add a global modal and what I usually do is wrap the root App component and add a custom modal component within.
I am wondering is there a way to do something like it with rnn-screens?

how to apply providers to specific screens only ?

hi, currently generateRNNScreens accepts an array of providers that will be applied to all screens defined in the config.

how can we apply the providers only to specific screens, not to all of them ?

Also, how would that work in the case of using something like BottomTabs, i'd prefer to apply providers only to the "root", not to each tab

Bottom Tab Style

Hello,
Thanks for this awesome package :)
Please how could I set some styles to bottom tabs: backgroundColor, tabBarBadge, ... etc

setRoot causes Error: Invariant Violation: "Screen" has not been registered.

Hi, @kanzitelli

I am now using rnn-screens 0.3.1 and facing some strange problems.

I have a main screen that goes to different feature screens and I am using screens.N.setRoot(Root(screens.get("screenName"))) to navigate to different feautre screens.

Originally I have a component named "Login" and it worked fine. But when I changed the name to "LoginScreen" and navigate to login screen by using setRoot, this error shows up "Invariant Violation: "LoginScreen" has not been registered. This can happen if: ....".

It only happens when setRoot, push and show work fine. I am wondering if I am using setRoot wrong.

Here's the Login component

const Login = ({ componentId, type, passProps }) => 
	
	return <View>...</View>
}

export default Login

// error occurs after I changed Login to LoginScreen

here's my screens object in screens/index.js

export const screens = generateRNNScreens(
	{
		Main: {
			component: MainScreen,
			options: {
				topBar: {
					...withTitle('Main')
				}
			}
		},
		Sample: {
			component: SampleScreen,
			options: {
				topBar: {
					...withTitle('Sample')
				}
			}
		},
		Login: {
			component: LoginScreen,
			options: {
				topBar: {
					visible: false
				}
			}
		},
		Feature1: {
			component: Feature1Screen,
			options: {
				topBar: {
					...withTitle('Feature1 Screen')
				}
			}
		}
	},
	[withGestureHandler, withServices]
)

Thanks for your time and help in advance!

how to switch rootscreen

1 check if has token or not before screens show
2 if token use main tab, not use loginscreen
3 switch to main tab after login

how to show overlayScreen?

Hi, Dear @kanzitelli. how can i fix this problem?

PinOverlay: {
  component: PinOverlay,
    options: {
        layout: {
          backgroundColor: '#12469A',
        },
        overlay: {
          interceptTouchOutside: true,
        },
    },
},

This doesnt work. it says "Type '"PinOverlay"' has no properties in common with type 'Layout'."
screens.N.showOverlay('PinOverlay');

My goal here is to show pinScreen to hide content.

How to implement a loading screen or swap root?

I need to implement a loading screen. There is a long issue in rnn-starter about splash screen. It seems it wouldn't come for a while.

I am thinking of using the technique of swapping root. It is not very clear from doc.

Is there a way to do so with rnn-screens without using react native navigation directly?