el-psy-k / react-navigation-mobx-helpers Goto Github PK

View Code? Open in Web Editor NEW

27.0 3.0 5.0 25 KB

React-Navigation bindings for MobX

License: MIT License

TypeScript 100.00%

react-navigation-mobx-helpers's Introduction

react-navigation-mobx-helpers

React-Navigation bindings for MobX

Installation

npm install react-navigation-mobx-helpers --save

Usage

import React from 'react';
import { Provider, inject, observer } from 'mobx-react';
import { StackNavigator } from 'react-navigation';
import NavigationStore from 'react-navigation-mobx-helpers';

const RootNavigator = StackNavigator(RouteConfigs);

const rootNavigation = new NavigationStore();

class Root extends React.Component {
  render() {
    return (
      <Provider rootNavigation={rootNavigation}>
        <App />
      </Provider>
    );
  }
}

@inject('rootNavigation')
@observer
class App extends React.Component {
  render() {
    const { rootNavigation } = this.props;
    return <RootNavigator ref={rootNavigation.createRef} />;
  }
}

API

Action	Parameter	Description
`createRef`	`ref: React.Component`	Save an instance of navigation to store
`dispatch`	`action: NavigationAction`	Send an action to router
`getParam`	`paramName: string, fallback?: NavigationParams`	Get a specific param with fallback
`setParams`	`newParams: NavigationParams`	Make changes to route's params
`navigate`	`{ routeName: string, params?: NavigationParams, action?: NavigationAction, key?: string }` OR `routeName: string, params?: NavigationParams, action?: NavigationAction`	Go to another screen, figures out the action it needs to take to do it
`push`	`routeName: string, params?: NavigationParams, action?: NavigationAction`	Navigate forward to new route in stack
`replace`	`routeName: string, params?: NavigationParams, action?: NavigationAction`	Replace the current route with a new one
`goBack`	`routeKey?: string \| null`	Close active screen and move back in the stack
`pop`	`n?: number, params?: { immediate?: boolean }`	Go back in the stack
`popToTop`	`params?: { immediate?: boolean }`	Go to the top of the stack

react-navigation-mobx-helpers's People

Contributors

Stargazers

Watchers

Forkers

github-clonner paomosca warlock1994 trendingtechnology seventhunders07

react-navigation-mobx-helpers's Issues

React navigation v3 support

Hi,

I use your package with Expo an I have to upgrade to React Navigation v3.
Do you plan to support this version ?

Regards.

Can't use typescript with this library

When I use typescript with this library, the error occurs due type definition is not correct. So I workaround by changing from:

import NavigationStore from 'react-navigation-mobx-helpers';
to
import NavigationStore from 'react-navigation-mobx-helpers/dist';

I think when you combine the index.js & index.d.ts inside dist folder. So please add in package.json configure where type definition.

  "main": "index.js",
  "types": "index.d.ts",

请问是否可以添加获取栈的路由层级的方法呢。

目前2.0已经取消了addNavigationHelpers mobx还可以实现获取栈的路由层级吗

Beware of breaking changes of react-navigation 2.3.1

react-navigation/redux-helpers#37

(Question) Using my store

Thank you for this library!

How can I inject my store so that I can access it via this.props.store (or something similar) in my components?

I'd appreciate any help on this. Thanks!

this.Navigator error in index.js

Hi there,
I am new to React native and Mobx so feel free to tell me if i'm not doing it right...

I installed your helper via yarn.
In myApp/node_modules/react-navigation-mobx-helpers/dist/ i get a compiled JS version of your TS file.
While setting new NavigationStore(RootNavigator) i got an error saying that "router" is undefined in line 12 of index.js.

To fix i manually moved "this.Navigator = Navigator;" from line 108 to the top...

Is there an error while compiling to JS or am i doing it wrong ?

Flow types?

Hello,
This has been super helpful! Have created flow-type definitions for this file?
Thanks!

Sometimes I get "s.getChildNavigation is not a function"

Sometimes (rarely) after auth when I redirect user from my auth backed to app via deeplink, I get error catched by Sentry:

TypeError: TypeError: TypeError: s.getChildNavigation is not a function. (In 's.getChildNavigation(t.key)', 's.getChildNavigation' is undefined)

This error is located at:
    in k
    in T
    in v
    in RCTView
    in RCTView
    in l
    in RCTView
    in l
    in RCTView
    in n
    in h
    in k
    in v
    in l
    in k
    in L
    in RCTView
    in n
    in inject-n-with-mainState
    in n
    in n
    in S
    in RCTView
    in RCTView
    in f

This error is located at:
    in L
    in RCTView
    in n
    in inject-n-with-mainState
    in n
    in n
    in S
    in RCTView
    in RCTView
    in f
  at forEach([native code])
  at value([native code])

I think this may be related with this problem react-navigation/react-navigation#4481
Due to react-navigation version 3.0.9 update.

Main packages what I use:

    "expo": "^32.0.0",
    "mobx": "^4.5.0",
    "mobx-react": "^5.2.8",
    "mobx-sync": "^1.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.0.9",
    "react-navigation-mobx-helpers": "^2.0.0",
    "sentry-expo": "~1.9.0",

I will be glad to any help. Because error report not informative.

Open drawer not working

Hi,

The action navigationStore.navigate('DrawerOpen') doesn't open the drawer.

Can you try it in your side ?

Thanks