Skip to content

An in-built navigator to simplify embedded navigation flows.

Notifications You must be signed in to change notification settings

Qeepsake/react-native-subset-navigator

Repository files navigation

react-native-subset-navigator

An in-built navigator to simplify embedded navigation flows.

Install

 npm install react-native-subset-navigator --save

or

 yarn add react-native-subset-navigator

Usage

  1. Create the Subset Navigator createSubsetNavigator(nameOfFirstOverlay, Overlays, props)
import { createSubsetNavigator } from "react-native-subset-navigator";

 // props are optional 
const OnboardingOverlay = (props) => {
        const OverlaySubset = createSubsetNavigator("OnboardingOne", {
          "OnboardingOne": OnboardingOne,
          "OnboardingTwo": OnboardingTwo,
          "OnboardingThree": OnboardingThree,
        }, props)

    return (
        <View style={styles.containerStyle}> // <-- modal common container
            {OverlaySubset}
        </View> 
    );
}
.....
  1. Render the subset navigator
  • The passProps props passes props to the first screen of the subset navigator
import {OnboardingOverlay} from '../components/on-boarding-overlay';

export const OnBoardingPage = () => {
    const [pageNumber, setPageNumber] = useState(1);

    return(
      ...
      // These props will only be passed to the first screen/component
      <OnboardingOverlay passProps={{setPageNumber}} />
      ...
    )
}
  1. Create the components/ screens to take in a 'navigator' prop and use the push and pop methods to navigate.
  • Pass props to subsequent screens/ components with the second parameter of the push method. These props can also be accessed by the passProps prop
const OnboardingOne = ({ navigator, passProps }) => {
    return (
        <>
            <TouchableOpacity onPress={() => {
                navigator.push("OnboardingTwo", {
                setPageNumber: passProps.setPageNumber,
                })}
            }>
                <View />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => navigator.pop()}>
                <View />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => passProps.setPageNumber(2)}>
                <View />
            </TouchableOpacity>
        </>
    );
}

Animations

We can now add animations when switching between screens in the subset navigator.

Example

import { Animated, ... } from 'react-native' //<-- import Animated from react-native
import {
  useFadeInAnimation,
  useSlideRightAnimation,
} from 'react-native-subset-navigator' //<-- import the animations you want


const OnboardingOne = ({ navigator, passProps }) => {
    // Use animations like so
    const animatedOpacity = useFadeInAnimation()
    const slideRightAnimation = useSlideRightAnimation()

    return (
    // Use Animated
    <Animated.View style={[animatedOpacity, slideRightAnimation]}>
        <TouchableOpacity onPress={() => navigator.push("OnboardingTwo")}>
            <View />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigator.pop()}>
            <View />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => passProps.setPageNumber(2)}>
            <View />
        </TouchableOpacity>
    </Animated.View>
    );
}

Available types

Available animations:

  • useFadeInAnimation(finalOpacity, duration): for fade in animation
  • useSlideLeftAnimation(duration, easing): for slide left animation
  • useSlideRightAnimation(duration, easing): for slide right animation
  • useSlideUpAnimation(duration, easing): for slide up animation

The params below are used to configure the animations (if applicable).

Param Type Optional Default Description
finalOpacity number Yes 1 Opacity at the end of the animation. 1 is completely opaque.
duration number Yes 500 Time in milliseconds to execute the animation.
easing ((value: number) => number) Yes Easing.quad The easing function for the animation. You can specify your own or use the standard functions from React Native's Easing module.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Denise-Ng

💻 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!