https://github.com/qeepsake/react-native-subset-navigator
An in-built navigator to simplify embedded navigation flows.
https://github.com/qeepsake/react-native-subset-navigator
Last synced: 3 months ago
JSON representation
An in-built navigator to simplify embedded navigation flows.
- Host: GitHub
- URL: https://github.com/qeepsake/react-native-subset-navigator
- Owner: Qeepsake
- Created: 2021-02-15T19:43:35.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-03T20:24:17.000Z (about 5 years ago)
- Last Synced: 2025-01-31T06:48:52.527Z (over 1 year ago)
- Language: TypeScript
- Size: 2.28 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-subset-navigator
An in-built navigator to simplify embedded navigation flows.
## Install
```sh
npm install react-native-subset-navigator --save
```
or
```sh
yarn add react-native-subset-navigator
```
## Usage
1. Create the Subset Navigator
`createSubsetNavigator(nameOfFirstOverlay, Overlays, props)`
````js
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 (
// <-- modal common container
{OverlaySubset}
);
}
.....
````
2. Render the subset navigator
- The `passProps` props passes props to the first screen of the subset navigator
````js
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
...
)
}
````
3. 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
````js
const OnboardingOne = ({ navigator, passProps }) => {
return (
<>
{
navigator.push("OnboardingTwo", {
setPageNumber: passProps.setPageNumber,
})}
}>
navigator.pop()}>
passProps.setPageNumber(2)}>
>
);
}
````
### Animations
We can now add animations when switching between screens in the subset navigator.
Example
````js
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
navigator.push("OnboardingTwo")}>
navigator.pop()}>
passProps.setPageNumber(2)}>
);
}
````
#### 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](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
