https://github.com/dayitv89/react-navigation-helper

react-navigation StackNavigator Helper as convert screensProps, params to props as React prefer component props style.
https://github.com/dayitv89/react-navigation-helper

presentation-style react-native react-native-animatable react-navigation react-navigation-helper transitions

Last synced: 9 days ago
JSON representation

react-navigation StackNavigator Helper as convert screensProps, params to props as React prefer component props style.

• Host: GitHub
• URL: https://github.com/dayitv89/react-navigation-helper
• Owner: dayitv89
• License: mit
• Created: 2017-11-17T10:10:14.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-29T10:59:32.000Z (almost 6 years ago)
• Last Synced: 2024-04-24T01:21:23.691Z (9 months ago)
• Topics: presentation-style, react-native, react-native-animatable, react-navigation, react-navigation-helper, transitions
• Language: JavaScript
• Homepage:
• Size: 15.6 KB
• Stars: 3
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-navigation-helper

![version](https://img.shields.io/badge/version-1.0.7-green.svg)

react-navigation StackNavigator Helper as convert screensProps, params to props as React prefer component props style.

## Why this required?

`StackNavigator` of `react-navigation` has initial some headache about where to pass screenProps, params etc. Where `react` componet does know `props` only. By Implementation of `react-navigation-helper`, you can use your react component with / without `react-navigation` with `props` style.

As assume your 3 component as `MyComponent1, MyComponent2, MyComponent3` expect a props to work. But while using

`StackNavigator`, you have to convert as initial component receives `props` as `props.screenProps`, and pushed element will receive props as `props.navigation.state.params`, which ends up your component independence.

`react-navigation-helper` makes your life easier to provide you component as everything as props and as `StackNavigator` way to. And now your component free to worried about only `props` independently.

Additionally, added some animation types available for screen transition:

1. push(default): right to left,

1. pop: left to right,

1. present: bottom to top,

1. dismiss: top to bottom,

1. none: without animation just switching

### Implementation

```js

/// AppNavigation.js

import { StackNavigator } from 'react-navigation';

import { StackNavigatorHelper } from 'react-navigation-helper';

import { MyComponent1, MyComponent2, MyComponent3, MyComponent4 } from './src';

export default StackNavigatorHelper.exportStackNavigator(

	StackNavigator(

		{

			MyComponent1: { screen: StackNavigatorHelper.setInitParamsToProps(MyComponent1) },

			MyComponent2: { screen: StackNavigatorHelper.paramsToProps(MyComponent2) },

			MyComponent3: { screen: StackNavigatorHelper.paramsToProps(MyComponent3) },

			MyComponent4: { screen: StackNavigatorHelper.paramsToProps(MyComponent4) }

		},

		{

			headerMode: 'none',

			cardStyle: {

				backgroundColor: 'transparent',

				shadowColor: 'transparent'

			},

			transitionConfig: () =>

				StackNavigatorHelper.transitionConfig({

					MyComponent3: 'present',

					MyComponent4: 'pop'

				})

		}

	)

);

```

### Uses

```js

/// App.js

import React from 'react';

import { AppRegistry } from 'react-native';

import AppNavigation from './AppNavigation';

const MyApp = props => ;

AppRegistry.registerComponent('MyApp', () => MyApp);

```