Skip to content

Commit

Permalink
Merge pull request #701 from aksonov/0.26-stable
Browse files Browse the repository at this point in the history 
0.26 stable
  • Loading branch information
@aksonov
aksonov committed May 20, 2016
2 parents 3836299 + c04b03d commit 5d8ce5d
Show file tree
Hide file tree
Showing 21 changed files with 319 additions and 172 deletions.
22 changes: 18 additions & 4 deletions Example/Example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,25 @@ const reducerCreate = params=>{
}
};

// define this based on the styles/dimensions you use
const getSceneStyle = function (props) {
return {
flex: 1,
marginTop: props.hideNavBar ? 0 : 64,
marginBottom: props.hideTabBar ? 0 : 49.5,
backgroundColor: '#fff',
shadowColor: null,
shadowOffset: null,
shadowOpacity: null,
shadowRadius: null,
};
}

export default class Example extends React.Component {
render() {
return <Router createReducer={reducerCreate}>
return <Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
<Scene key="modal" component={Modal} >
<Scene key="root" hideNavBar={true}>
<Scene key="root" hideNavBar={true} hideTabBar={true}>
<Scene key="echo" clone component={EchoView} />
<Scene key="register" component={Register} title="Register"/>
<Scene key="register2" component={Register} title="Register2" duration={1}/>
Expand All @@ -67,12 +81,12 @@ export default class Example extends React.Component {
<Scene key="tab1_2" component={TabView} title="Tab #1_2" titleStyle={{color:"black"}}/>
</Scene>
<Scene key="tab2" initial={true} title="Tab #2" icon={TabIcon}>
<Scene key="tab2_1" component={TabView} title="Tab #2_1"/>
<Scene key="tab2_1" component={TabView} title="Tab #2_1" renderRightButton={()=><Right/>} />
<Scene key="tab2_2" component={TabView} title="Tab #2_2" onLeft={()=>alert("Left button!")} leftTitle="Left" duration={1} panHandlers={null}/>
</Scene>
<Scene key="tab3" component={TabView} title="Tab #3" hideTabBar={true} icon={TabIcon}/>
<Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
<Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon} renderRightButton={()=><Right/>}/>
<Scene key="tab5" component={TabView} title="Tab #5" hideTabBar={true} hideNavBar={true} icon={TabIcon}/>
</Scene>
</Scene>
</Scene>
Expand Down
14 changes: 14 additions & 0 deletions Example/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
## Example App

Normally, after a code change to react-native-router-flux src files,
you must remove the node_modules/react-native-router-flux directory
and npm install. The react-native packager wont follow symlinks.

To assist development, this command watches and rsyncs changes:

```
npm run sync-rnrf
```

Leave a terminal open running this command when running the Example
app and making react-native-router-flux src changes.
37 changes: 36 additions & 1 deletion Example/components/EchoView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,18 @@ const styles = StyleSheet.create({
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
borderWidth: 2,
borderColor: 'red',
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5,
},
smaller: {
marginBottom: 5,
fontSize: 12,
},
});


Expand All @@ -24,7 +30,36 @@ export default class extends React.Component {
<View style={[styles.container, this.props.sceneStyle]}>
<Text style={styles.instructions}>key: {this.props.navigationState.key}</Text>
<Text style={styles.instructions}>sceneKey: {this.props.navigationState.sceneKey}</Text>
<Button onPress={Actions.echo}>push new scene</Button>
<Button
onPress={() => Actions.echo()}
style={styles.smaller}
>
push new scene hideNavBar=inherit hideTabBar=inherit
</Button>
<Button
onPress={() => Actions.echo({ hideNavBar: true, hideTabBar: true })}
style={styles.smaller}
>
push new scene hideNavBar=true hideTabBar=true
</Button>
<Button
onPress={() => Actions.echo({ hideNavBar: true, hideTabBar: false })}
style={styles.smaller}
>
push new scene hideNavBar=true hideTabBar=false
</Button>
<Button
onPress={() => Actions.echo({ hideNavBar: false, hideTabBar: true })}
style={styles.smaller}
>
push new scene hideNavBar=false hideTabBar=true
</Button>
<Button
onPress={() => Actions.echo({ hideNavBar: false, hideTabBar: false })}
style={styles.smaller}
>
push new scene hideNavBar=false hideTabBar=false
</Button>
<Button onPress={Actions.pop}>pop</Button>
</View>
);
Expand Down
38 changes: 19 additions & 19 deletions Example/components/Launch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,28 @@ import Button from "react-native-button";
import {Actions} from "react-native-router-flux";

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "transparent",
}
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "transparent",
}
});

class Launch extends React.Component {
render(){
return (
<View {...this.props} style={styles.container}>
<Text>Launch page</Text>
<Button onPress={()=>Actions.login({data:"Custom data", title:"Custom title" })}>Go to Login page</Button>
<Button onPress={Actions.register}>Go to Register page</Button>
<Button onPress={Actions.register2}>Go to Register page without animation</Button>
<Button onPress={()=>Actions.error("Error message")}>Popup error</Button>
<Button onPress={Actions.tabbar}>Go to TabBar page</Button>
<Button onPress={Actions.pop}>back</Button>
</View>
);
}
render(){
return (
<View {...this.props} style={styles.container}>
<Text>Launch page</Text>
<Button onPress={()=>Actions.login({data:"Custom data", title:"Custom title" })}>Go to Login page</Button>
<Button onPress={Actions.register}>Go to Register page</Button>
<Button onPress={Actions.register2}>Go to Register page without animation</Button>
<Button onPress={()=>Actions.error("Error message")}>Popup error</Button>
<Button onPress={Actions.tabbar}>Go to TabBar page</Button>
<Button onPress={Actions.pop}>back</Button>
</View>
);
}
}

module.exports = Launch;
2 changes: 1 addition & 1 deletion Example/components/NavigationDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ class NavigationDrawer extends React.Component {
main: { opacity: Math.max(0.54, 1 - ratio) },
})}
>
<DefaultRenderer navigationState={children[0]} />
<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
</Drawer>
);
}
Expand Down
3 changes: 2 additions & 1 deletion Example/components/TabIcon.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { PropTypes, Text } from 'react-native';
import {PropTypes} from "react";
import {Text} from "react-native";

const propTypes = {
selected: PropTypes.string,
Expand Down
7 changes: 5 additions & 2 deletions Example/components/TabView.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { PropTypes, StyleSheet, Text, View } from 'react-native';
import {PropTypes} from "react";
import {StyleSheet, Text, View} from "react-native";
import Button from 'react-native-button';
import { Actions } from 'react-native-router-flux';

Expand All @@ -19,13 +20,15 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
borderWidth: 2,
borderColor: 'red',
},
});

const TabView = (props, context) => {
const drawer = context.drawer;
return (
<View style={[styles.container, props.sceneStyle]}>
<View style={[styles.container, props.sceneStyle ]}>
<Text>Tab {props.title}</Text>
{props.name === 'tab1_1' &&
<Button onPress={Actions.tab1_2}>next screen for tab1_1</Button>
Expand Down
33 changes: 0 additions & 33 deletions Example/components/TabView2.js
View file

This file was deleted.

37 changes: 21 additions & 16 deletions Example/iOS/Example.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,27 +105,27 @@
/* End PBXContainerItemProxy section */

/* Begin PBXFileReference section */
008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = main.jsbundle; path = main.jsbundle; sourceTree = "<group>"; };
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = "<group>"; };
00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = "<group>"; };
00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = "<group>"; };
00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = "<group>"; };
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = "<group>"; };
00E356EE1AD99517003FC87E /* ExampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = ExampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
00E356F21AD99517003FC87E /* ExampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ExampleTests.m; sourceTree = "<group>"; };
139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = "<group>"; };
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = "<group>"; };
13B07F961A680F5B00A75B9A /* Example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Example.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = Example/AppDelegate.h; sourceTree = "<group>"; };
13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = Example/AppDelegate.m; sourceTree = "<group>"; };
13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Example/Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Example/Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Example/main.m; sourceTree = "<group>"; };
146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../node_modules/react-native/React/React.xcodeproj; sourceTree = "<group>"; };
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../node_modules/react-native/Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
/* End PBXFileReference section */

/* Begin PBXFrameworksBuildPhase section */
Expand Down Expand Up @@ -526,7 +526,6 @@
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh";
showEnvVarsInLog = 1;
};
/* End PBXShellScriptBuildPhase section */

Expand Down Expand Up @@ -618,9 +617,12 @@
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
);
INFOPLIST_FILE = "Example/Info.plist";
INFOPLIST_FILE = Example/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
OTHER_LDFLAGS = (
"-ObjC",
"-lc++",
);
PRODUCT_NAME = Example;
};
name = Debug;
Expand All @@ -634,9 +636,12 @@
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
);
INFOPLIST_FILE = "Example/Info.plist";
INFOPLIST_FILE = Example/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
OTHER_LDFLAGS = (
"-ObjC",
"-lc++",
);
PRODUCT_NAME = Example;
};
name = Release;
Expand Down
3 changes: 3 additions & 0 deletions Example/index.ios.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { AppRegistry } from 'react-native';

// @todo remove when RN upstream is fixed
console.ignoredYellowBox = ['Warning: Failed propType: SceneView'];

import Example from './Example';

AppRegistry.registerComponent('Example', () => Example);
16 changes: 10 additions & 6 deletions Example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node_modules/react-native/packager/packager.sh"
"start": "node_modules/react-native/packager/packager.sh",
"sync-rnrf": "rm -rf ./node_modules/react-native-router-flux; sane '/usr/bin/rsync -v -a --exclude .git --exclude Example --exclude node_modules ../ ./node_modules/react-native-router-flux/' .. --glob='{**/*.json,**/*.js}'"
},
"dependencies": {
"react": "^0.14.7",
"react-native": "0.22.2",
"react-native-button": "^1.2.1",
"react-native-drawer": "^1.16.7",
"react-native-modalbox": "^1.3.0",
"react": "^15.0.2",
"react-native": "^0.26.0",
"react-native-button": "github:ide/react-native-button",
"react-native-drawer": "^2.2.2",
"react-native-modalbox": "^1.3.3",
"react-native-router-flux": "file:../"
},
"devDependencies": {
"sane": "^1.3.4"
}
}
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Router for React Native based on new React Native Navigation API.

- **Highly Customizable Navigation Bar** - Show/hide the navbar depending on Scene or even the state of a Scene (e.g. Edit/Save navbar for edit mode).

- **Tab Bar Support** using [react-native-tabs](https://github.com/aksonov/react-native-tabs) (see demo).
- **Tab Bar Support** using [react-native-tab-navigator](https://github.com/exponentjs/react-native-tab-navigator) (see Example app).

- **Nested Navigators** (e.g. Each tab can have its own navigator, nested in a root navigator).

Expand Down
2 changes: 2 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Scene from './src/Scene';
import Switch from './src/Switch';
import TabBar from './src/TabBar';
import getInitialState from './src/State';
import Util from './src/Util';

export {
Actions,
Expand All @@ -20,4 +21,5 @@ export {
Switch,
TabBar,
getInitialState,
Util,
};
Loading

0 comments on commit 5d8ce5d

Please sign in to comment.