use-react-native-navigation (Experimental)

A utility library for easier use of react-native-navigation library.

Installation

npm: npm install use-react-native-navigation

yarn: yarn add use-react-native-navigation

Prerequisite

This library assumes that your React-Native project has integrated the following libraries:

- React-Native-Navigation
- MobX and Mobx-React /Mobx-React-Lite

How to get started

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.

$3

``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
}
`

$3

`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))
`

$3

`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.

Limitation

$3

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

navigation.push({ ...layout })} />
}
`

NavigationUtility

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.

$3

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
}
})
)
`

$3

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
},
},
]),
})
``