A utility library for a easier use of react-native-navigation library.
npm install use-react-native-navigationA utility library for easier use of react-native-navigation library.
npm: npm install use-react-native-navigation
yarn: yarn add use-react-native-navigation
This library assumes that your React-Native project has integrated the following libraries:
- React-Native-Navigation
- MobX and Mobx-React /Mobx-React-Lite
When you are registering your RNN screen, you need to wrap your screen with a HOC to add useTrackNavigation to hook into RNN event listener.
``tsx
// HOC.tsx
import React from 'react'
import { observer } from 'mobx-react' // 'mobx-react-lite'
import { useTrackNavigation } from 'use-react-native-navigation'
export const wrapRNNScreen = (WrappedComponent) => {
const HOC = observer(function HOC(props) {
// This will allow the library to hook into RNN event listeners such as
// componentDidAppear, componentDidDisappear and modalDismissed.
useTrackNavigation(props.componentId)
return
})
// Hoise RNN options.
HOC.options = WrappedComponent.options
return HOC
}
`
`tsx
// index.js
import { Navigation } from 'react-native-navigation'
import { wrapRNNScreen } from './HOC'
import { App } from './App'
// Register your screens with wrapRNNScreen HOC.
Navigation.registerComponent('App', () => wrapRNNScreen(App))
`
`tsx
// App.tsx
import React from 'react'
import { Button } from 'react-native'
import { observer } from 'mobx-react' // 'mobx-react-lite'
import { useNavigation, NavigationUtility } from 'use-react-native-navigation'
export const App = observer(function App() {
const navigation = useNavigation()
const push = () => {
// Notice that we are not using componentId!
navigation.push(
NavigationUtility.setLayoutComponent({
name: 'PushScreen', // name of other registered screen.
})
)
}
return (
)
})
`
That's it! Now you should be able to push, pop, dismissModal and dismissOverlay from anywhere in the component tree.
As the library relies on the Navigation events, specifically componentDidAppear, componentDidDisappear and modalDismissed, emitted from React-Native-Navigation, the most recent componentId will only be available after the screen is visible/invisible to the user.
For example, if you try to perform navigation before the screen is visible to the user, you might encounter an unexpected behaviour.
`tsx
// App.tsx
const App = () => {
const navigation = useNavigation()
// You should NOT do this as componentId is not guaranteed to be upto date.
useEffect(() => {
navigation.push({ ...layout })
}, [navigation.push])
// You can do this instead.
useEffect(() => {
// You can assume if updating === false then the navigation event has completed.
if (navigation.status.updating) return
navigation.push({ ...layout })
}, [navigation.status.updating])
// However it's best used with component interaction. As componentId`
// is almost guaranteed to be available if the component is shown.
return
These navigation utility functions aim to abstract some of the RNN Layout boilerplate required. These functions are
also compatible with the vanilla RNN navigation functions.
Create a single layout component.
`tsx
// Vanilla RNN
import { Navigation } from 'react-native-navigation'
Navigation.push(
'screenComponentId',
NavigationUtility.setLayoutComponent
name: 'PushScreen',
passProps: {
// ...props
},
option: {
// ...navigation options
}
})
)
// useNavigation
import { useNavigation } from 'use-react-native-navigation'
const navigation = useNavigation()
navigation.push(
NavigationUtility.setLayoutComponent
name: 'PushScreen',
passProps: {
// ...props
},
option: {
// ...navigation options
}
})
)
`
Create a stack layout component.
`tsx
// Vanilla RNN
import { Navigation } from 'react-native-navigation'
Navigation.setRoot({
root: NavigationUtility.setLayoutStackComponents
{
name: 'RootScreen',
passProps: {
// ...props
},
option: {
// ...navigation options
},
},
]),
})
// useNavigation
import { useNavigation } from 'use-react-native-navigation'
const navigation = useNavigation()
navigation.setRoot({
root: NavigationUtility.setLayoutStackComponents
{
name: 'RootScreen',
passProps: {
// ...props
},
option: {
// ...navigation options
},
},
]),
})
``