├── .gitignore ├── .npmignore ├── LICENSE ├── package.json ├── src └── index.ts ├── README.md └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | tsconfig.json 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Raiden 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-navigation-mobx-helpers", 3 | "version": "2.0.1", 4 | "description": "React-Navigation bindings for MobX", 5 | "main": "dist/index.js", 6 | "types": "dist/index.d.js", 7 | "scripts": { 8 | "prepublishOnly": "tsc" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/Javascript-Ninja/react-navigation-mobx-helpers.git" 13 | }, 14 | "keywords": [ 15 | "react-native", 16 | "react-navigation", 17 | "react-navigation", 18 | "react-navigation-helpers", 19 | "react-navigation-utils", 20 | "mobx", 21 | "react-navigation-mobx" 22 | ], 23 | "author": "Raiden ", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/Javascript-Ninja/react-navigation-mobx-helpers/issues" 27 | }, 28 | "homepage": "https://github.com/Javascript-Ninja/react-navigation-mobx-helpers#readme", 29 | "dependencies": { 30 | "@types/react-navigation": "^2.0.9", 31 | "react-navigation": "^2.5.5" 32 | }, 33 | "devDependencies": { 34 | "mobx": "^5.0.3", 35 | "typescript": "^2.9.2" 36 | }, 37 | "peerDependencies": { 38 | "mobx": ">=3.0.0", 39 | "react-navigation": "^2.x" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { observable, action } from 'mobx'; 2 | import { NavigationScreenProp, NavigationState, NavigationContainerComponent, NavigationAction, NavigationParams, NavigationNavigateAction } from 'react-navigation'; 3 | 4 | export default class Navigation { 5 | @observable.ref navigation: NavigationScreenProp | undefined; 6 | 7 | @action.bound createRef(ref: NavigationContainerComponent & { _navigation: NavigationScreenProp }) { 8 | if(ref){ 9 | this.navigation = ref._navigation; 10 | } 11 | } 12 | 13 | @action.bound dispatch(action: NavigationAction) { 14 | if (!this.navigation) { 15 | throw new Error('please create navigation refs first.'); 16 | } 17 | this.navigation.dispatch(action); 18 | } 19 | 20 | @action.bound getParam(paramName: string, fallback?: NavigationParams) { 21 | if (!this.navigation) { 22 | throw new Error('please create navigation refs first.'); 23 | } 24 | this.navigation.getParam(paramName, fallback); 25 | } 26 | 27 | @action.bound setParams(newParams: NavigationParams) { 28 | if (!this.navigation) { 29 | throw new Error('please create navigation refs first.'); 30 | } 31 | this.navigation.setParams(newParams); 32 | } 33 | 34 | @action.bound navigate( 35 | routeNameOrOptions: string | { 36 | routeName: string | { 37 | routeName: string; 38 | params?: NavigationParams; 39 | action?: NavigationAction; 40 | key?: string; 41 | }; 42 | params?: NavigationParams; 43 | action?: NavigationAction; 44 | key?: string; 45 | }, 46 | params?: NavigationParams, 47 | action?: NavigationAction, 48 | ) { 49 | if (!this.navigation) { 50 | throw new Error('please create navigation refs first.'); 51 | } 52 | this.navigation.navigate(routeNameOrOptions as string, params, action); 53 | } 54 | 55 | @action.bound push(routeName: string, params?: NavigationParams, action?: NavigationAction) { 56 | if (!this.navigation) { 57 | throw new Error('please create navigation refs first.'); 58 | } 59 | this.navigation.push(routeName, params, action as NavigationNavigateAction); 60 | } 61 | 62 | @action.bound replace(routeName: string, params?: NavigationParams, action?: NavigationAction) { 63 | if (!this.navigation) { 64 | throw new Error('please create navigation refs first.'); 65 | } 66 | this.navigation.replace(routeName, params, action as NavigationNavigateAction); 67 | } 68 | 69 | @action.bound goBack(routeKey?: string | null) { 70 | if (!this.navigation) { 71 | throw new Error('please create navigation refs first.'); 72 | } 73 | this.navigation.goBack(routeKey); 74 | } 75 | 76 | @action.bound pop(n?: number, params?: { immediate?: boolean }) { 77 | if (!this.navigation) { 78 | throw new Error('please create navigation refs first.'); 79 | } 80 | this.navigation.pop(n, params); 81 | } 82 | 83 | @action.bound popToTop(params?: { immediate?: boolean }) { 84 | if (!this.navigation) { 85 | throw new Error('please create navigation refs first.'); 86 | } 87 | this.navigation.popToTop(params); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-navigation-mobx-helpers 2 | 3 | [React-Navigation](https://github.com/react-navigation/react-navigation) bindings for [MobX](https://github.com/mobxjs/mobx) 4 | 5 | ## Installation 6 | 7 | ```shell 8 | npm install react-navigation-mobx-helpers --save 9 | ``` 10 | 11 | ## Usage 12 | 13 | ```jsx 14 | import React from 'react'; 15 | import { Provider, inject, observer } from 'mobx-react'; 16 | import { StackNavigator } from 'react-navigation'; 17 | import NavigationStore from 'react-navigation-mobx-helpers'; 18 | 19 | const RootNavigator = StackNavigator(RouteConfigs); 20 | 21 | const rootNavigation = new NavigationStore(); 22 | 23 | class Root extends React.Component { 24 | render() { 25 | return ( 26 | 27 | 28 | 29 | ); 30 | } 31 | } 32 | 33 | @inject('rootNavigation') 34 | @observer 35 | class App extends React.Component { 36 | render() { 37 | const { rootNavigation } = this.props; 38 | return ; 39 | } 40 | } 41 | ``` 42 | 43 | ## API 44 | 45 | | Action | Parameter | Description | 46 | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | 47 | | `createRef` | `ref: React.Component` | Save an instance of navigation to store | 48 | | `dispatch` | `action: NavigationAction` | Send an action to router | 49 | | `getParam` | `paramName: string, fallback?: NavigationParams` | Get a specific param with fallback | 50 | | `setParams` | `newParams: NavigationParams` | Make changes to route's params | 51 | | `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 | 52 | | `push` | `routeName: string, params?: NavigationParams, action?: NavigationAction` | Navigate forward to new route in stack | 53 | | `replace` | `routeName: string, params?: NavigationParams, action?: NavigationAction` | Replace the current route with a new one | 54 | | `goBack` | `routeKey?: string \| null` | Close active screen and move back in the stack | 55 | | `pop` | `n?: number, params?: { immediate?: boolean }` | Go back in the stack | 56 | | `popToTop` | `params?: { immediate?: boolean }` | Go to the top of the stack | 57 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | "lib": ["esnext"], /* Specify library files to be included in the compilation. */ 7 | // "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | "outDir": "./dist/", /* Redirect output structure to the directory. */ 15 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "composite": true, /* Enable project compilation */ 17 | "removeComments": true, /* Do not emit comments to output. */ 18 | // "noEmit": true, /* Do not emit outputs. */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | 23 | /* Strict Type-Checking Options */ 24 | "strict": true, /* Enable all strict type-checking options. */ 25 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 26 | // "strictNullChecks": true, /* Enable strict null checks. */ 27 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 28 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 29 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 30 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 31 | 32 | /* Additional Checks */ 33 | "noUnusedLocals": true, /* Report errors on unused locals. */ 34 | "noUnusedParameters": true, /* Report errors on unused parameters. */ 35 | "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 36 | "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 37 | 38 | /* Module Resolution Options */ 39 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 40 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 41 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 42 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 43 | // "typeRoots": [], /* List of folders to include type definitions from. */ 44 | // "types": [], /* Type declaration files to be included in compilation. */ 45 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 46 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 47 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 48 | 49 | /* Source Map Options */ 50 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 51 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 52 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 53 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 54 | 55 | /* Experimental Options */ 56 | "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 57 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 58 | } 59 | } 60 | --------------------------------------------------------------------------------