From 35615822d8b615c7119182ef4e45db5468db9745 Mon Sep 17 00:00:00 2001 From: Joe Noon Date: Mon, 11 Apr 2016 12:05:50 -0700 Subject: [PATCH 01/18] direction support for rn 0.24+ --- src/DefaultRenderer.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js index 4337862cf..3c4c089b0 100644 --- a/src/DefaultRenderer.js +++ b/src/DefaultRenderer.js @@ -13,6 +13,12 @@ const { RootContainer: NavigationRootContainer, Header: NavigationHeader, } = NavigationExperimental; + +const { + CardStackPanResponder: NavigationCardStackPanResponder, + CardStackStyleInterpolator: NavigationCardStackStyleInterpolator + } = NavigationCard; + import Actions from "./Actions"; import getInitialState from "./State"; import Reducer from "./Reducer"; @@ -49,7 +55,6 @@ export default class DefaultRenderer extends Component { let applyAnimation = selected.applyAnimation || navigationState.applyAnimation; let style = selected.style || navigationState.style; - let direction = selected.direction || navigationState.direction || "horizontal"; let optionals = {}; if (applyAnimation) { @@ -69,7 +74,6 @@ export default class DefaultRenderer extends Component { navigationState={navigationState} style={[styles.animatedView, style]} renderOverlay={this._renderHeader} - direction={direction} renderScene={this._renderCard} {...optionals} /> @@ -84,13 +88,22 @@ export default class DefaultRenderer extends Component { } _renderCard(/*NavigationSceneRendererProps*/ props) { + const isVertical = props.scene.navigationState.direction === "vertical"; + + const animationStyle = props.scene.navigationState.animationStyle || isVertical ? + NavigationCardStackStyleInterpolator.forVertical(props) : + NavigationCardStackStyleInterpolator.forHorizontal(props); + + const panHandlers = props.scene.navigationState.panHandlers || isVertical ? + NavigationCardStackPanResponder.forVertical(props) : + NavigationCardStackPanResponder.forHorizontal(props); + return ( ); From 1256e03cae02e9d3e4bb2a2f9dbfdb3a0bd65b52 Mon Sep 17 00:00:00 2001 From: Joe Noon Date: Mon, 11 Apr 2016 12:33:56 -0700 Subject: [PATCH 02/18] fix || logic and optimize duration 0 --- src/DefaultRenderer.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js index 3c4c089b0..aed2f065b 100644 --- a/src/DefaultRenderer.js +++ b/src/DefaultRenderer.js @@ -64,7 +64,11 @@ export default class DefaultRenderer extends Component { if (duration === null || duration === undefined) duration = navigationState.duration; if (duration !== null && duration !== undefined) { optionals.applyAnimation = function (pos, navState) { - Animated.timing(pos, {toValue: navState.index, duration}).start(); + if (duration === 0) { + pos.setValue(navState.index); + } else { + Animated.timing(pos, {toValue: navState.index, duration}).start(); + } }; } } @@ -90,13 +94,13 @@ export default class DefaultRenderer extends Component { _renderCard(/*NavigationSceneRendererProps*/ props) { const isVertical = props.scene.navigationState.direction === "vertical"; - const animationStyle = props.scene.navigationState.animationStyle || isVertical ? + const animationStyle = props.scene.navigationState.animationStyle || (isVertical ? NavigationCardStackStyleInterpolator.forVertical(props) : - NavigationCardStackStyleInterpolator.forHorizontal(props); + NavigationCardStackStyleInterpolator.forHorizontal(props)); - const panHandlers = props.scene.navigationState.panHandlers || isVertical ? + const panHandlers = props.scene.navigationState.panHandlers || (isVertical ? NavigationCardStackPanResponder.forVertical(props) : - NavigationCardStackPanResponder.forHorizontal(props); + NavigationCardStackPanResponder.forHorizontal(props)); return ( Date: Sun, 17 Apr 2016 15:27:37 +0200 Subject: [PATCH 03/18] Improve README --- README.md | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 46c386bf7..cf2b30cc3 100644 --- a/README.md +++ b/README.md @@ -49,8 +49,8 @@ class App extends React.Component { } } ``` -Alternatively you could define all your scenes during compile time and use it later within Router: -``` +Alternatively you could define all your scenes during compile time and use it later within `Router`: +```javascript const scenes = Actions.create( @@ -67,21 +67,21 @@ class App extends React.Component { ``` 2. In any app screen: - * import {Actions} from 'react-native-router-flux' - * Actions.ACTION_NAME(PARAMS) will call the appropriate action and params will be passed to the scene. - * Actions.pop() will pop the current screen. - * Actions.refresh(PARAMS) will update the properties of the current screen. + * `import {Actions} from 'react-native-router-flux'` + * `Actions.ACTION_NAME(PARAMS)` will call the appropriate action and params will be passed to the scene. + * `Actions.pop()` will pop the current screen. + * `Actions.refresh(PARAMS)` will update the properties of the current screen. ## Available imports -- Router -- Scene -- Modal -- TabBar -- getInitialState -- Reducer -- DefaultRenderer -- Switch -- Actions +- `Router` +- `Scene` +- `Modal` +- `TabBar` +- `getInitialState` +- `Reducer` +- `DefaultRenderer` +- `Switch` +- `Actions` ## Configuration @@ -263,12 +263,12 @@ Your scene `component` class could implement _static_ renderNavigationBar(props) New feature for 3.x release is custom scene renderer that should be used together with tabs={true} property. It allows to select `tab` scene to show depending from app state. It could be useful for authentication, restricted scenes, etc. Usually you should wrap `Switch` with redux `connect` to pass application state to it: Following example chooses scene depending from sessionID using Redux: -``` - ({profile:state.profile}))(Switch)} tabs={true} - selector={props=>props.profile.sessionID ? "main" : "signUp"}> - - - +```javascript +({profile:state.profile}))(Switch)} tabs={true} + selector={props=>props.profile.sessionID ? "main" : "signUp"}> + + + ``` ## Drawer (side menu) integration From aa744233997d8eb75fe8c24d5a05bda566d99776 Mon Sep 17 00:00:00 2001 From: Chris Ridenour Date: Sun, 17 Apr 2016 13:01:27 -0400 Subject: [PATCH 04/18] Bump example project dependency. --- Example/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Example/package.json b/Example/package.json index 72672d1a2..5b3e37ed4 100644 --- a/Example/package.json +++ b/Example/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "react": "^0.14.7", - "react-native": "^0.22.2", + "react-native": "^0.24.0-rc5", "react-native-button": "^1.2.1", "react-native-drawer": "^1.16.7", "react-native-modalbox": "^1.3.0", From 1f2c98cfa097a623d74cc7592538bef5753edfc4 Mon Sep 17 00:00:00 2001 From: Chris Ridenour Date: Sun, 17 Apr 2016 13:52:37 -0400 Subject: [PATCH 05/18] Cleanup styles and unused imports. --- src/DefaultRenderer.js | 36 +++++++++++++++++------------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js index c8b15bc71..da1242e12 100644 --- a/src/DefaultRenderer.js +++ b/src/DefaultRenderer.js @@ -9,15 +9,13 @@ import React, {Component, Animated, PropTypes, StyleSheet, View, NavigationExperimental} from "react-native"; const { AnimatedView: NavigationAnimatedView, - Card: NavigationCard, - RootContainer: NavigationRootContainer, - Header: NavigationHeader, - } = NavigationExperimental; + Card: NavigationCard +} = NavigationExperimental; const { CardStackPanResponder: NavigationCardStackPanResponder, CardStackStyleInterpolator: NavigationCardStackStyleInterpolator - } = NavigationCard; +} = NavigationCard; import TabBar from "./TabBar"; import NavBar from "./NavBar"; @@ -46,13 +44,13 @@ export default class DefaultRenderer extends Component { return null; } let Component = navigationState.component; - if (navigationState.tabs && !Component){ + if (navigationState.tabs && !Component) { Component = TabBar; } if (Component) { return ( - + ) } @@ -93,14 +91,14 @@ export default class DefaultRenderer extends Component { _renderHeader(/*NavigationSceneRendererProps*/ props) { return state.title} - />; + {...props} + getTitle={state => state.title} + />; } _renderCard(/*NavigationSceneRendererProps*/ props) { - const { key, direction, getSceneStyle } = props.scene.navigationState; - let { panHandlers, animationStyle } = props.scene.navigationState; + const {key, direction, getSceneStyle} = props.scene.navigationState; + let {panHandlers, animationStyle} = props.scene.navigationState; let style = {}; if (getSceneStyle) style = getSceneStyle(props); @@ -108,15 +106,15 @@ export default class DefaultRenderer extends Component { const isVertical = direction === "vertical"; if (!animationStyle) { - animationStyle = (isVertical ? - NavigationCardStackStyleInterpolator.forVertical(props) : - NavigationCardStackStyleInterpolator.forHorizontal(props)); + animationStyle = (isVertical ? + NavigationCardStackStyleInterpolator.forVertical(props) : + NavigationCardStackStyleInterpolator.forHorizontal(props)); } if (!panHandlers) { - panHandlers = panHandlers || (isVertical ? - NavigationCardStackPanResponder.forVertical(props) : - NavigationCardStackPanResponder.forHorizontal(props)); + panHandlers = panHandlers || (isVertical ? + NavigationCardStackPanResponder.forVertical(props) : + NavigationCardStackPanResponder.forHorizontal(props)); } return ( @@ -140,6 +138,6 @@ export default class DefaultRenderer extends Component { const styles = StyleSheet.create({ animatedView: { flex: 1, - backgroundColor:"transparent" + backgroundColor: "transparent" }, }); From 495c7942c8b1fb37beb42b79ee4bcb3956b8c3b9 Mon Sep 17 00:00:00 2001 From: Chris Ridenour Date: Sun, 17 Apr 2016 14:05:54 -0400 Subject: [PATCH 06/18] Remove optionals. --- src/DefaultRenderer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js index da1242e12..c198efcb2 100644 --- a/src/DefaultRenderer.js +++ b/src/DefaultRenderer.js @@ -124,7 +124,6 @@ export default class DefaultRenderer extends Component { style={[animationStyle, style]} panHandlers={panHandlers} renderScene={this._renderScene} - {...optionals} /> ); } From 546c00c0fbce812aa9e5aa3c94a44f3749bb1bad Mon Sep 17 00:00:00 2001 From: Chris Ridenour Date: Sun, 17 Apr 2016 14:11:32 -0400 Subject: [PATCH 07/18] Make sure panHandler can be passed as null. --- Example/Example.js | 2 +- src/DefaultRenderer.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Example/Example.js b/Example/Example.js index 97783a69f..1c1d2e494 100644 --- a/Example/Example.js +++ b/Example/Example.js @@ -59,7 +59,7 @@ export default class Example extends React.Component { - + alert("Right button")} rightTitle="Right" /> diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js index c198efcb2..a58790ad8 100644 --- a/src/DefaultRenderer.js +++ b/src/DefaultRenderer.js @@ -105,13 +105,13 @@ export default class DefaultRenderer extends Component { const isVertical = direction === "vertical"; - if (!animationStyle) { + if (typeof(animationStyle) === 'undefined') { animationStyle = (isVertical ? NavigationCardStackStyleInterpolator.forVertical(props) : NavigationCardStackStyleInterpolator.forHorizontal(props)); } - if (!panHandlers) { + if (typeof(panHandlers) === 'undefined') { panHandlers = panHandlers || (isVertical ? NavigationCardStackPanResponder.forVertical(props) : NavigationCardStackPanResponder.forHorizontal(props)); From 6aac7bd9d79407e5df1957cf31f42a435f141bdf Mon Sep 17 00:00:00 2001 From: Chris Ridenour Date: Sun, 17 Apr 2016 14:25:47 -0400 Subject: [PATCH 08/18] Actually run react-native upgrade. --- Example/.buckconfig | 6 +++ Example/.flowconfig | 9 ++++- Example/.gitignore | 6 +++ Example/android/app/BUCK | 66 ++++++++++++++++++++++++++++++++ Example/android/app/build.gradle | 11 +++++- 5 files changed, 95 insertions(+), 3 deletions(-) create mode 100644 Example/.buckconfig create mode 100644 Example/android/app/BUCK diff --git a/Example/.buckconfig b/Example/.buckconfig new file mode 100644 index 000000000..934256cb2 --- /dev/null +++ b/Example/.buckconfig @@ -0,0 +1,6 @@ + +[android] + target = Google Inc.:Google APIs:23 + +[maven_repositories] + central = https://repo1.maven.org/maven2 diff --git a/Example/.flowconfig b/Example/.flowconfig index 66b57e096..ee340094c 100644 --- a/Example/.flowconfig +++ b/Example/.flowconfig @@ -42,6 +42,12 @@ # Ignore Website .*/website/.* +# Ignore generators +.*/local-cli/generator.* + +# Ignore BUCK generated folders +.*\.buckd/ + .*/node_modules/is-my-json-valid/test/.*\.json .*/node_modules/iconv-lite/encodings/tables/.*\.json .*/node_modules/y18n/test/.*\.json @@ -59,6 +65,7 @@ .*/node_modules/isemail/.*\.json .*/node_modules/tr46/.*\.json + [include] [libs] @@ -86,4 +93,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy [version] -0.22.0 +^0.22.0 diff --git a/Example/.gitignore b/Example/.gitignore index 94fc86711..42c9490e5 100644 --- a/Example/.gitignore +++ b/Example/.gitignore @@ -32,3 +32,9 @@ local.properties # node_modules/ npm-debug.log + +# BUCK +buck-out/ +\.buckd/ +android/app/libs +android/keystores/debug.keystore diff --git a/Example/android/app/BUCK b/Example/android/app/BUCK new file mode 100644 index 000000000..bdec72cd9 --- /dev/null +++ b/Example/android/app/BUCK @@ -0,0 +1,66 @@ +import re + +# To learn about Buck see [Docs](https://buckbuild.com/). +# To run your application with Buck: +# - install Buck +# - `npm start` - to start the packager +# - `cd android` +# - `cp ~/.android/debug.keystore keystores/debug.keystore` +# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck +# - `buck install -r android/app` - compile, install and run application +# + +lib_deps = [] +for jarfile in glob(['libs/*.jar']): + name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) + lib_deps.append(':' + name) + prebuilt_jar( + name = name, + binary_jar = jarfile, + ) + +for aarfile in glob(['libs/*.aar']): + name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) + lib_deps.append(':' + name) + android_prebuilt_aar( + name = name, + aar = aarfile, + ) + +android_library( + name = 'all-libs', + exported_deps = lib_deps +) + +android_library( + name = 'app-code', + srcs = glob([ + 'src/main/java/**/*.java', + ]), + deps = [ + ':all-libs', + ':build_config', + ':res', + ], +) + +android_build_config( + name = 'build_config', + package = 'com.example', +) + +android_resource( + name = 'res', + res = 'src/main/res', + package = 'com.example', +) + +android_binary( + name = 'app', + package_type = 'debug', + manifest = 'src/main/AndroidManifest.xml', + keystore = '//android/keystores:debug', + deps = [ + ':app-code', + ], +) diff --git a/Example/android/app/build.gradle b/Example/android/app/build.gradle index 5f726247a..156630953 100644 --- a/Example/android/app/build.gradle +++ b/Example/android/app/build.gradle @@ -9,7 +9,7 @@ import com.android.build.OutputFile * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server. Below you can see all the possible configurations * and their defaults. If you decide to add a configuration block, make sure to add it before the - * `apply from: "react.gradle"` line. + * `apply from: "../../node_modules/react-native/react.gradle"` line. * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle @@ -59,7 +59,7 @@ import com.android.build.OutputFile * ] */ -apply from: "react.gradle" +apply from: "../../node_modules/react-native/react.gradle" /** * Set this to true to create two separate APKs instead of one: @@ -124,3 +124,10 @@ dependencies { compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules } + +// Run this once to be able to run the application with BUCK +// puts all compile dependencies into folder libs for BUCK to use +task copyDownloadableDepsToLibs(type: Copy) { + from configurations.compile + into 'libs' +} From ff69aaa33428fab2a9620693af57439c0dc290c3 Mon Sep 17 00:00:00 2001 From: Chris Ridenour Date: Sun, 17 Apr 2016 17:14:02 -0400 Subject: [PATCH 09/18] Document why we removed optionals. --- src/DefaultRenderer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js index a58790ad8..21123dfd3 100644 --- a/src/DefaultRenderer.js +++ b/src/DefaultRenderer.js @@ -100,6 +100,7 @@ export default class DefaultRenderer extends Component { const {key, direction, getSceneStyle} = props.scene.navigationState; let {panHandlers, animationStyle} = props.scene.navigationState; + // Since we always need to pass a style for the direction, we can avoid #526 let style = {}; if (getSceneStyle) style = getSceneStyle(props); From 55bb2d2576d0a12742bdcf43e4b6a4779593f331 Mon Sep 17 00:00:00 2001 From: Pavlo Aksonov Date: Mon, 18 Apr 2016 09:59:11 +0200 Subject: [PATCH 10/18] Revert "[WIP] Get Example app working with React 0.24+ " --- Example/.buckconfig | 6 --- Example/.flowconfig | 9 +---- Example/.gitignore | 6 --- Example/Example.js | 2 +- Example/android/app/BUCK | 66 -------------------------------- Example/android/app/build.gradle | 11 +----- Example/package.json | 2 +- src/DefaultRenderer.js | 57 +++++++++------------------ 8 files changed, 23 insertions(+), 136 deletions(-) delete mode 100644 Example/.buckconfig delete mode 100644 Example/android/app/BUCK diff --git a/Example/.buckconfig b/Example/.buckconfig deleted file mode 100644 index 934256cb2..000000000 --- a/Example/.buckconfig +++ /dev/null @@ -1,6 +0,0 @@ - -[android] - target = Google Inc.:Google APIs:23 - -[maven_repositories] - central = https://repo1.maven.org/maven2 diff --git a/Example/.flowconfig b/Example/.flowconfig index ee340094c..66b57e096 100644 --- a/Example/.flowconfig +++ b/Example/.flowconfig @@ -42,12 +42,6 @@ # Ignore Website .*/website/.* -# Ignore generators -.*/local-cli/generator.* - -# Ignore BUCK generated folders -.*\.buckd/ - .*/node_modules/is-my-json-valid/test/.*\.json .*/node_modules/iconv-lite/encodings/tables/.*\.json .*/node_modules/y18n/test/.*\.json @@ -65,7 +59,6 @@ .*/node_modules/isemail/.*\.json .*/node_modules/tr46/.*\.json - [include] [libs] @@ -93,4 +86,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy [version] -^0.22.0 +0.22.0 diff --git a/Example/.gitignore b/Example/.gitignore index 42c9490e5..94fc86711 100644 --- a/Example/.gitignore +++ b/Example/.gitignore @@ -32,9 +32,3 @@ local.properties # node_modules/ npm-debug.log - -# BUCK -buck-out/ -\.buckd/ -android/app/libs -android/keystores/debug.keystore diff --git a/Example/Example.js b/Example/Example.js index 1c1d2e494..97783a69f 100644 --- a/Example/Example.js +++ b/Example/Example.js @@ -59,7 +59,7 @@ export default class Example extends React.Component { - + alert("Right button")} rightTitle="Right" /> diff --git a/Example/android/app/BUCK b/Example/android/app/BUCK deleted file mode 100644 index bdec72cd9..000000000 --- a/Example/android/app/BUCK +++ /dev/null @@ -1,66 +0,0 @@ -import re - -# To learn about Buck see [Docs](https://buckbuild.com/). -# To run your application with Buck: -# - install Buck -# - `npm start` - to start the packager -# - `cd android` -# - `cp ~/.android/debug.keystore keystores/debug.keystore` -# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck -# - `buck install -r android/app` - compile, install and run application -# - -lib_deps = [] -for jarfile in glob(['libs/*.jar']): - name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) - lib_deps.append(':' + name) - prebuilt_jar( - name = name, - binary_jar = jarfile, - ) - -for aarfile in glob(['libs/*.aar']): - name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) - lib_deps.append(':' + name) - android_prebuilt_aar( - name = name, - aar = aarfile, - ) - -android_library( - name = 'all-libs', - exported_deps = lib_deps -) - -android_library( - name = 'app-code', - srcs = glob([ - 'src/main/java/**/*.java', - ]), - deps = [ - ':all-libs', - ':build_config', - ':res', - ], -) - -android_build_config( - name = 'build_config', - package = 'com.example', -) - -android_resource( - name = 'res', - res = 'src/main/res', - package = 'com.example', -) - -android_binary( - name = 'app', - package_type = 'debug', - manifest = 'src/main/AndroidManifest.xml', - keystore = '//android/keystores:debug', - deps = [ - ':app-code', - ], -) diff --git a/Example/android/app/build.gradle b/Example/android/app/build.gradle index 156630953..5f726247a 100644 --- a/Example/android/app/build.gradle +++ b/Example/android/app/build.gradle @@ -9,7 +9,7 @@ import com.android.build.OutputFile * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server. Below you can see all the possible configurations * and their defaults. If you decide to add a configuration block, make sure to add it before the - * `apply from: "../../node_modules/react-native/react.gradle"` line. + * `apply from: "react.gradle"` line. * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle @@ -59,7 +59,7 @@ import com.android.build.OutputFile * ] */ -apply from: "../../node_modules/react-native/react.gradle" +apply from: "react.gradle" /** * Set this to true to create two separate APKs instead of one: @@ -124,10 +124,3 @@ dependencies { compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules } - -// Run this once to be able to run the application with BUCK -// puts all compile dependencies into folder libs for BUCK to use -task copyDownloadableDepsToLibs(type: Copy) { - from configurations.compile - into 'libs' -} diff --git a/Example/package.json b/Example/package.json index 5b3e37ed4..72672d1a2 100644 --- a/Example/package.json +++ b/Example/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "react": "^0.14.7", - "react-native": "^0.24.0-rc5", + "react-native": "^0.22.2", "react-native-button": "^1.2.1", "react-native-drawer": "^1.16.7", "react-native-modalbox": "^1.3.0", diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js index 55f1d7837..5b29bae8a 100644 --- a/src/DefaultRenderer.js +++ b/src/DefaultRenderer.js @@ -9,14 +9,10 @@ import React, {Component, Animated, PropTypes, StyleSheet, View, NavigationExperimental} from "react-native"; const { AnimatedView: NavigationAnimatedView, - Card: NavigationCard -} = NavigationExperimental; - -const { - CardStackPanResponder: NavigationCardStackPanResponder, - CardStackStyleInterpolator: NavigationCardStackStyleInterpolator -} = NavigationCard; - + Card: NavigationCard, + RootContainer: NavigationRootContainer, + Header: NavigationHeader, + } = NavigationExperimental; import TabBar from "./TabBar"; import NavBar from "./NavBar"; import Actions from './Actions'; @@ -63,13 +59,13 @@ export default class DefaultRenderer extends Component { return null; } let Component = navigationState.component; - if (navigationState.tabs && !Component) { + if (navigationState.tabs && !Component){ Component = TabBar; } if (Component) { return ( - + ) } @@ -79,6 +75,7 @@ export default class DefaultRenderer extends Component { let applyAnimation = selected.applyAnimation || navigationState.applyAnimation; let style = selected.style || navigationState.style; + let direction = selected.direction || navigationState.direction || "horizontal"; let optionals = {}; if (applyAnimation) { @@ -88,11 +85,7 @@ export default class DefaultRenderer extends Component { if (duration === null || duration === undefined) duration = navigationState.duration; if (duration !== null && duration !== undefined) { optionals.applyAnimation = function (pos, navState) { - if (duration === 0) { - pos.setValue(navState.index); - } else { - Animated.timing(pos, {toValue: navState.index, duration}).start(); - } + Animated.timing(pos, {toValue: navState.index, duration}).start(); }; } } @@ -102,6 +95,7 @@ export default class DefaultRenderer extends Component { navigationState={navigationState} style={[styles.animatedView, style]} renderOverlay={this._renderHeader} + direction={direction} renderScene={this._renderCard} {...optionals} /> @@ -110,40 +104,25 @@ export default class DefaultRenderer extends Component { _renderHeader(/*NavigationSceneRendererProps*/ props) { return state.title} - />; + {...props} + getTitle={state => state.title} + />; } _renderCard(/*NavigationSceneRendererProps*/ props) { - const {key, direction, getSceneStyle} = props.scene.navigationState; - let {panHandlers, animationStyle} = props.scene.navigationState; - - // Since we always need to pass a style for the direction, we can avoid #526 - let style = {}; - if (getSceneStyle) style = getSceneStyle(props); + const { key, direction, panHandlers, getSceneStyle } = props.scene.navigationState; - const isVertical = direction === "vertical"; - - if (typeof(animationStyle) === 'undefined') { - animationStyle = (isVertical ? - NavigationCardStackStyleInterpolator.forVertical(props) : - NavigationCardStackStyleInterpolator.forHorizontal(props)); - } - - if (typeof(panHandlers) === 'undefined') { - panHandlers = panHandlers || (isVertical ? - NavigationCardStackPanResponder.forVertical(props) : - NavigationCardStackPanResponder.forHorizontal(props)); - } + const optionals = {}; + if (getSceneStyle) optionals.style = getSceneStyle(props); return ( ); } @@ -157,6 +136,6 @@ export default class DefaultRenderer extends Component { const styles = StyleSheet.create({ animatedView: { flex: 1, - backgroundColor: "transparent" + backgroundColor:"transparent" }, }); From 915d3a3b3e40f4ee0c5426085a9b534e25b17d84 Mon Sep 17 00:00:00 2001 From: Pavlo Aksonov Date: Mon, 18 Apr 2016 10:01:58 +0200 Subject: [PATCH 11/18] Revert "Revert "[WIP] Get Example app working with React 0.24+ "" --- Example/.buckconfig | 6 +++ Example/.flowconfig | 9 ++++- Example/.gitignore | 6 +++ Example/Example.js | 2 +- Example/android/app/BUCK | 66 ++++++++++++++++++++++++++++++++ Example/android/app/build.gradle | 11 +++++- Example/package.json | 2 +- src/DefaultRenderer.js | 57 ++++++++++++++++++--------- 8 files changed, 136 insertions(+), 23 deletions(-) create mode 100644 Example/.buckconfig create mode 100644 Example/android/app/BUCK diff --git a/Example/.buckconfig b/Example/.buckconfig new file mode 100644 index 000000000..934256cb2 --- /dev/null +++ b/Example/.buckconfig @@ -0,0 +1,6 @@ + +[android] + target = Google Inc.:Google APIs:23 + +[maven_repositories] + central = https://repo1.maven.org/maven2 diff --git a/Example/.flowconfig b/Example/.flowconfig index 66b57e096..ee340094c 100644 --- a/Example/.flowconfig +++ b/Example/.flowconfig @@ -42,6 +42,12 @@ # Ignore Website .*/website/.* +# Ignore generators +.*/local-cli/generator.* + +# Ignore BUCK generated folders +.*\.buckd/ + .*/node_modules/is-my-json-valid/test/.*\.json .*/node_modules/iconv-lite/encodings/tables/.*\.json .*/node_modules/y18n/test/.*\.json @@ -59,6 +65,7 @@ .*/node_modules/isemail/.*\.json .*/node_modules/tr46/.*\.json + [include] [libs] @@ -86,4 +93,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy [version] -0.22.0 +^0.22.0 diff --git a/Example/.gitignore b/Example/.gitignore index 94fc86711..42c9490e5 100644 --- a/Example/.gitignore +++ b/Example/.gitignore @@ -32,3 +32,9 @@ local.properties # node_modules/ npm-debug.log + +# BUCK +buck-out/ +\.buckd/ +android/app/libs +android/keystores/debug.keystore diff --git a/Example/Example.js b/Example/Example.js index 97783a69f..1c1d2e494 100644 --- a/Example/Example.js +++ b/Example/Example.js @@ -59,7 +59,7 @@ export default class Example extends React.Component { - + alert("Right button")} rightTitle="Right" /> diff --git a/Example/android/app/BUCK b/Example/android/app/BUCK new file mode 100644 index 000000000..bdec72cd9 --- /dev/null +++ b/Example/android/app/BUCK @@ -0,0 +1,66 @@ +import re + +# To learn about Buck see [Docs](https://buckbuild.com/). +# To run your application with Buck: +# - install Buck +# - `npm start` - to start the packager +# - `cd android` +# - `cp ~/.android/debug.keystore keystores/debug.keystore` +# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck +# - `buck install -r android/app` - compile, install and run application +# + +lib_deps = [] +for jarfile in glob(['libs/*.jar']): + name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) + lib_deps.append(':' + name) + prebuilt_jar( + name = name, + binary_jar = jarfile, + ) + +for aarfile in glob(['libs/*.aar']): + name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) + lib_deps.append(':' + name) + android_prebuilt_aar( + name = name, + aar = aarfile, + ) + +android_library( + name = 'all-libs', + exported_deps = lib_deps +) + +android_library( + name = 'app-code', + srcs = glob([ + 'src/main/java/**/*.java', + ]), + deps = [ + ':all-libs', + ':build_config', + ':res', + ], +) + +android_build_config( + name = 'build_config', + package = 'com.example', +) + +android_resource( + name = 'res', + res = 'src/main/res', + package = 'com.example', +) + +android_binary( + name = 'app', + package_type = 'debug', + manifest = 'src/main/AndroidManifest.xml', + keystore = '//android/keystores:debug', + deps = [ + ':app-code', + ], +) diff --git a/Example/android/app/build.gradle b/Example/android/app/build.gradle index 5f726247a..156630953 100644 --- a/Example/android/app/build.gradle +++ b/Example/android/app/build.gradle @@ -9,7 +9,7 @@ import com.android.build.OutputFile * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server. Below you can see all the possible configurations * and their defaults. If you decide to add a configuration block, make sure to add it before the - * `apply from: "react.gradle"` line. + * `apply from: "../../node_modules/react-native/react.gradle"` line. * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle @@ -59,7 +59,7 @@ import com.android.build.OutputFile * ] */ -apply from: "react.gradle" +apply from: "../../node_modules/react-native/react.gradle" /** * Set this to true to create two separate APKs instead of one: @@ -124,3 +124,10 @@ dependencies { compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules } + +// Run this once to be able to run the application with BUCK +// puts all compile dependencies into folder libs for BUCK to use +task copyDownloadableDepsToLibs(type: Copy) { + from configurations.compile + into 'libs' +} diff --git a/Example/package.json b/Example/package.json index 72672d1a2..5b3e37ed4 100644 --- a/Example/package.json +++ b/Example/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "react": "^0.14.7", - "react-native": "^0.22.2", + "react-native": "^0.24.0-rc5", "react-native-button": "^1.2.1", "react-native-drawer": "^1.16.7", "react-native-modalbox": "^1.3.0", diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js index 5b29bae8a..55f1d7837 100644 --- a/src/DefaultRenderer.js +++ b/src/DefaultRenderer.js @@ -9,10 +9,14 @@ import React, {Component, Animated, PropTypes, StyleSheet, View, NavigationExperimental} from "react-native"; const { AnimatedView: NavigationAnimatedView, - Card: NavigationCard, - RootContainer: NavigationRootContainer, - Header: NavigationHeader, - } = NavigationExperimental; + Card: NavigationCard +} = NavigationExperimental; + +const { + CardStackPanResponder: NavigationCardStackPanResponder, + CardStackStyleInterpolator: NavigationCardStackStyleInterpolator +} = NavigationCard; + import TabBar from "./TabBar"; import NavBar from "./NavBar"; import Actions from './Actions'; @@ -59,13 +63,13 @@ export default class DefaultRenderer extends Component { return null; } let Component = navigationState.component; - if (navigationState.tabs && !Component){ + if (navigationState.tabs && !Component) { Component = TabBar; } if (Component) { return ( - + ) } @@ -75,7 +79,6 @@ export default class DefaultRenderer extends Component { let applyAnimation = selected.applyAnimation || navigationState.applyAnimation; let style = selected.style || navigationState.style; - let direction = selected.direction || navigationState.direction || "horizontal"; let optionals = {}; if (applyAnimation) { @@ -85,7 +88,11 @@ export default class DefaultRenderer extends Component { if (duration === null || duration === undefined) duration = navigationState.duration; if (duration !== null && duration !== undefined) { optionals.applyAnimation = function (pos, navState) { - Animated.timing(pos, {toValue: navState.index, duration}).start(); + if (duration === 0) { + pos.setValue(navState.index); + } else { + Animated.timing(pos, {toValue: navState.index, duration}).start(); + } }; } } @@ -95,7 +102,6 @@ export default class DefaultRenderer extends Component { navigationState={navigationState} style={[styles.animatedView, style]} renderOverlay={this._renderHeader} - direction={direction} renderScene={this._renderCard} {...optionals} /> @@ -104,25 +110,40 @@ export default class DefaultRenderer extends Component { _renderHeader(/*NavigationSceneRendererProps*/ props) { return state.title} - />; + {...props} + getTitle={state => state.title} + />; } _renderCard(/*NavigationSceneRendererProps*/ props) { - const { key, direction, panHandlers, getSceneStyle } = props.scene.navigationState; + const {key, direction, getSceneStyle} = props.scene.navigationState; + let {panHandlers, animationStyle} = props.scene.navigationState; + + // Since we always need to pass a style for the direction, we can avoid #526 + let style = {}; + if (getSceneStyle) style = getSceneStyle(props); - const optionals = {}; - if (getSceneStyle) optionals.style = getSceneStyle(props); + const isVertical = direction === "vertical"; + + if (typeof(animationStyle) === 'undefined') { + animationStyle = (isVertical ? + NavigationCardStackStyleInterpolator.forVertical(props) : + NavigationCardStackStyleInterpolator.forHorizontal(props)); + } + + if (typeof(panHandlers) === 'undefined') { + panHandlers = panHandlers || (isVertical ? + NavigationCardStackPanResponder.forVertical(props) : + NavigationCardStackPanResponder.forHorizontal(props)); + } return ( ); } @@ -136,6 +157,6 @@ export default class DefaultRenderer extends Component { const styles = StyleSheet.create({ animatedView: { flex: 1, - backgroundColor:"transparent" + backgroundColor: "transparent" }, }); From 5d124645635a85943d9addb06e7a2eee02ab8bad Mon Sep 17 00:00:00 2001 From: Lynn Hurley Date: Mon, 18 Apr 2016 10:43:48 -0500 Subject: [PATCH 12/18] update redux instructions in README --- README.md | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 145 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 46c386bf7..15a1f50dc 100644 --- a/README.md +++ b/README.md @@ -237,22 +237,156 @@ To display a modal use `Modal` as root renderer, so it will render the first ele ## Redux/Flux This component doesn't depend on any redux/flux library. It uses new React Native Navigation API and provide own reducer for its navigation state. -You may provide your own reducer if needed. To avoid the creation of initial state, you may pass a reducer creator. Example to print all actions: +You may provide your own reducer if needed. To avoid the creation of initial state, you may pass a reducer creator. + +The following example will dispatch the `focus` action when a new scene comes into focus. The current scene will be available to components via the `props.scene` property. + +##### Step 1 + +First create a reducer for the routing actions that will be dispatched by RNRF. + ```javascript -// remember to add the 'Reducer' to your imports along with Router, Scene, ... like so -// import { Reducer } from 'react-native-router-flux' -const reducerCreate = params=>{ - const defaultReducer = Reducer(params); - return (state, action)=>{ - console.log("ACTION:", action); - return defaultReducer(state, action); - } +// reducers/routes.js + +const initialState = { + scene: {}, }; -// within your App render() method -return ; +export default function reducer(state = initialState, action = {}) { + switch (action.type) { + // focus action is dispatched when a new screen comes into focus + case "focus": + return { + ...state, + scene: action.scene, + }; + + // ...other actions + } +} +``` + +##### Step 2 + +Combine this reducer with the rest of the reducers from your app. + +```javascript +// reducers/index.js + +import { combineReducers } from 'redux'; +import routes from './routes'; +// ... other reducers + +export default combineReducers({ + routes, + // ... other reducers +}); + +``` + +##### Step 3 + +Connect the `Router` to your redux dispatching system. + +```javascript +// routes.js + +import { Actions, Router, Reducer } from 'react-native-router-flux'; +import { connect } from 'react-redux'; +// other imports... + +const scenes = Actions.create({ + + {/* create scenes */} + +}); + +class Routes extends React.Component { + static propTypes = { + dispatch: PropTypes.func, + }; + + reducerCreate(params) { + const defaultReducer = Reducer(params); + return (state, action) => { + if (action.type === 'focus') { + this.props.dispatch(action) + } + return defaultReducer(state, action); + }; + } + + render () { + return ( + + ); + } +} ``` + +##### Step 4 + +Create your store, wrap your routes with the redux `Provider` component. + + +```js +// app.js + +import Routes from './routes'; +import { Provider } from 'react-redux'; +import { createStore, applyMiddleware, compose } from 'redux'; +import reducers from './reducers'; +// other imports... + +// create store... +const middleware = [/* ...your middleware (i.e. thunk) */]; +const store = compose( + applyMiddleware(...middleware) +)(createStore)(reducers); + + +class App extends React.Component { + render () { + return ( + + + + ); + } +} + +export default App; +``` + +##### Step 5 + +Now you can access the current scene from any connected component. + +```js +// components/MyComponent.js +import React, { PropTypes, Text } from 'react-native'; +import { connect } from 'react-redux'; + +class MyComponent extends React.Component { + static propTypes = { + routes: PropTypes.object, + }; + + render () { + return ( + + The current scene is titled {this.props.routes.scene.title}. + + ); + } +} + +export default connect(({routes}) => ({routes}))(MyComponent); +``` + ## Tabbar Every tab has its own navigation bar. However, if you do not set its parent `` with `hideNavBar={true}`, the tabs' navigation bar will be overrided by their parient. From 61967e6d8be88db50ac7eaeeeb90107ed7fd168f Mon Sep 17 00:00:00 2001 From: Lynn Hurley Date: Mon, 18 Apr 2016 10:45:36 -0500 Subject: [PATCH 13/18] fix typo in readme --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 15a1f50dc..897dd314f 100644 --- a/README.md +++ b/README.md @@ -310,9 +310,7 @@ class Routes extends React.Component { reducerCreate(params) { const defaultReducer = Reducer(params); return (state, action) => { - if (action.type === 'focus') { - this.props.dispatch(action) - } + this.props.dispatch(action) return defaultReducer(state, action); }; } From 71f58a1b4ac365f572ab367cfb374f1c3d62f4a8 Mon Sep 17 00:00:00 2001 From: Lynn Hurley Date: Mon, 18 Apr 2016 11:38:24 -0500 Subject: [PATCH 14/18] improve redux setup README --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 897dd314f..97f2e0f33 100644 --- a/README.md +++ b/README.md @@ -262,6 +262,9 @@ export default function reducer(state = initialState, action = {}) { }; // ...other actions + + default: + return state; } } ``` @@ -323,6 +326,8 @@ class Routes extends React.Component { ); } } + +export default connect()(Routes); ``` ##### Step 4 From 59821c30a2353d40c66b6582a6ab3b1ff85a3416 Mon Sep 17 00:00:00 2001 From: Pavlo Aksonov Date: Mon, 18 Apr 2016 21:20:48 +0200 Subject: [PATCH 15/18] publish new version --- Example/package.json | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Example/package.json b/Example/package.json index 5b3e37ed4..728fb489f 100644 --- a/Example/package.json +++ b/Example/package.json @@ -7,9 +7,9 @@ }, "dependencies": { "react": "^0.14.7", - "react-native": "^0.24.0-rc5", + "react-native": "^0.24.0", "react-native-button": "^1.2.1", - "react-native-drawer": "^1.16.7", + "react-native-drawer": "^2.0.0", "react-native-modalbox": "^1.3.0", "react-native-router-flux": "file:../" } diff --git a/package.json b/package.json index 61a3ad961..7470385cd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-router-flux", - "version": "3.22.0", + "version": "3.24.0", "description": "React Native Router using Flux architecture", "repository": { "type": "git", @@ -53,7 +53,7 @@ "react": "^0.14.8", "react-addons-test-utils": "^0.14.7", "react-dom": "^0.14.7", - "react-native": "^0.22.2", + "react-native": "^0.24.0", "react-native-mock": "0.0.6", "sinon": "^1.17.3" } From 12f18a5c2539143146875fa0e44959e7a287eb4d Mon Sep 17 00:00:00 2001 From: timzaak Date: Tue, 19 Apr 2016 11:19:10 +0800 Subject: [PATCH 16/18] add render title callback --- README.md | 2 +- src/NavBar.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ff83f2733..7831b4d20 100644 --- a/README.md +++ b/README.md @@ -132,7 +132,7 @@ class App extends React.Component { | sceneStyle | View style | { flex: 1 } | optional style override for the Scene's component | | other props | | | all properties that will be passed to your component instance | | getSceneStyle | function | optional | Optionally override the styles for NavigationCard's Animated.View rendering the scene. | - +| renderTitle | function | optional | Optionally closure to render the title ## Example ![launch](https://cloud.githubusercontent.com/assets/1321329/11692367/7337cfe2-9e9f-11e5-8515-e8b7a9f230ec.gif) diff --git a/src/NavBar.js b/src/NavBar.js index 011802509..cb2b494fa 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -1,7 +1,7 @@ /** * Copyright (c) 2015, Facebook, Inc. All rights reserved. * - * Facebook, Inc. ("Facebook") owns all right, title and interest, including + * Facebook, Inc. ("Facebook") owns all right, tltle and interest, including * all intellectual property and other proprietary rights, in and to the React * Native CustomComponents software (the "Software"). Subject to your * compliance with these terms, you are hereby granted a non-exclusive, @@ -135,6 +135,8 @@ export default class NavBar extends React.Component { } _renderTitle(childState: NavigationState, index:number) { + const title = childState.renderTitle ? + childState.renderTitle():this.props.getTitle ? this.props.getTitle(childState) : childState.title; return ( - {this.props.getTitle ? this.props.getTitle(childState) : childState.title } + {title} ); } From e278588ddcb0a2a97376634778d480c70b408598 Mon Sep 17 00:00:00 2001 From: timzaak Date: Tue, 19 Apr 2016 11:26:46 +0800 Subject: [PATCH 17/18] fix the comment --- src/NavBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/NavBar.js b/src/NavBar.js index cb2b494fa..f342c500c 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -1,7 +1,7 @@ /** * Copyright (c) 2015, Facebook, Inc. All rights reserved. * - * Facebook, Inc. ("Facebook") owns all right, tltle and interest, including + * Facebook, Inc. ("Facebook") owns all right, title and interest, including * all intellectual property and other proprietary rights, in and to the React * Native CustomComponents software (the "Software"). Subject to your * compliance with these terms, you are hereby granted a non-exclusive, From 2a5279b08d95c4ad7943ecd7363621e50b4cfc0e Mon Sep 17 00:00:00 2001 From: Matteo Mazzarolo Date: Tue, 19 Apr 2016 10:43:50 +0200 Subject: [PATCH 18/18] Updated Actions values to a more standard format Is there any reason for using lowercase actions? This actions name are the ones used by Redux/Flux and 99% of the time the actions used with redux are uppercase :) I and also added `"ROUTER_"` in front of them. Let me know what you think of the change (I'm testing it only since two hours ago and it seems to not break the router). **It is a breaking change for anyone using the previous actions names** --- src/Actions.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/Actions.js b/src/Actions.js index 050e74b19..a20683a06 100644 --- a/src/Actions.js +++ b/src/Actions.js @@ -8,15 +8,15 @@ */ import assert from "assert"; import Scene from "./Scene"; -export const JUMP_ACTION = "jump"; -export const PUSH_ACTION = "push"; -export const REPLACE_ACTION = "replace"; -export const POP_ACTION2 = "back"; -export const POP_ACTION = "BackAction"; -export const REFRESH_ACTION = "refresh"; -export const RESET_ACTION = "reset"; -export const INIT_ACTION = "init"; -export const FOCUS_ACTION = "focus"; +export const JUMP_ACTION = "ROUTER_JUMP"; +export const PUSH_ACTION = "ROUTER_PUSH"; +export const REPLACE_ACTION = "ROUTER_REPLACE"; +export const POP_ACTION2 = "ROUTER_POP2"; +export const POP_ACTION = "ROUTER_POP"; +export const REFRESH_ACTION = "ROUTER_REFRESH"; +export const RESET_ACTION = "ROUTER_RESET"; +export const INIT_ACTION = "ROUTER_INIT"; +export const FOCUS_ACTION = "ROUTER_FOCUS"; function isNumeric(n){ return !isNaN(parseFloat(n)) && isFinite(n);