Napping Panda Missionaries

    use-react-native-navigation
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.6 • Public • Published

    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:

    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.

    Step 1 - Create a HOC with useTrackNavigation hook

    // 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 <WrappedComponent {...props} />
      })
     
      // Hoise RNN options.
      HOC.options = WrappedComponent.options
      return HOC
    }

    Step 2 - Register your screen with HOC

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

    Step 3 - Using useNavigation hook

    // 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 (
        <View>
          <Button title="Push!" onPress={push} />
        </View>
      )
    })

    That's it! Now you should be able to push, pop, dismissModal and dismissOverlay from anywhere in the component tree.

    Limitation

    Immediate availability of tracked componentId

    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.

    // 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 <Button onPress={() => 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.

    setLayoutComponent

    Create a single layout component.

    // Vanilla RNN
    import { Navigation } from 'react-native-navigation'
     
    Navigation.push(
      'screenComponentId',
      NavigationUtility.setLayoutComponent<PushScreenProps>({
        name: 'PushScreen',
        passProps: {
          // ...props
        },
        option: {
          // ...navigation options
        }
      })
    )
     
    // useNavigation
    import { useNavigation } from 'use-react-native-navigation'
     
    const navigation = useNavigation()
    navigation.push(
      NavigationUtility.setLayoutComponent<PushScreenProps>({
        name: 'PushScreen',
        passProps: {
          // ...props
        },
        option: {
          // ...navigation options
        }
      })
    )

    setLayoutStackComponents

    Create a stack layout component.

    // Vanilla RNN
    import { Navigation } from 'react-native-navigation'
     
    Navigation.setRoot({
      root: NavigationUtility.setLayoutStackComponents<RootScreenProps>([
        {
          name: 'RootScreen',
          passProps: {
            // ...props
          },
          option: {
            // ...navigation options
          },
        },
      ]),
    })
     
    // useNavigation
    import { useNavigation } from 'use-react-native-navigation'
     
    const navigation = useNavigation()
    navigation.setRoot({
      root: NavigationUtility.setLayoutStackComponents<RootScreenProps>([
        {
          name: 'RootScreen',
          passProps: {
            // ...props
          },
          option: {
            // ...navigation options
          },
        },
      ]),
    })

    Install

    npm i use-react-native-navigation

    DownloadsWeekly Downloads

    13

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    68.8 kB

    Total Files

    41

    Last publish

    Collaborators

    • jinshin1013