Alternative API for react-native-navigation
npm install rnn-hooksAn Alternative API for react-native-navigation.
componentId to perform navigation actions. It will be handled internally by rnn-hooks.``sh`
yarn add rnn-hooks
1. Create your screen with a navId property.
``
export class HomeScreen extends React.Component {
static navId = 'HomeScreen';
static options(): Options {
return {
topBar: {
title: {
text: 'Home',
},
},
bottomTab: {
text: 'Home',
},
};
}
render() {
return
}
}
2. Register your screen using withNavProvider HOC.
``
const SCREENS = [HomeScreen, SettingsScreen, AboutScreen, RandomScreen];
export const registerScreens = () => {
SCREENS.forEach(screen =>
Navigation.registerComponent(screen.navId, () => withNavProvider(screen)),
);
};
3. import useNav and start pushing screens.
``
const nav = useNav();
const handlePush = () => {
nav.push(RandomScreen, { color: 'red' });
};
For a more detailed example, please check this project
- useNav
``
const nav = useNav();
nav.push(RandomScreen, { color: 'red' });
nav.showModal(RandomScreen, { color: 'red' });
nav.showOverlay(RandomScreen, { color: 'red' });
nav.mergeOptions({ topBar: { title: { text: 'Random Screen' } } });
nav.dismissAllModals();
nav.dismissModal();
nav.dismissOverlay();
nav.pop();
nav.popToRoot();
- useNavButtonPressed
```
useNavButtonPressed(buttonId => {
if (buttonId === YOUR_BUTTON_ID) {
// handle press
}
});
MIT