diff --git a/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js b/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
index 0734dff41..af37490a6 100644
--- a/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
+++ b/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
@@ -10,245 +10,133 @@
var React = require('react-native');
var {
+ PixelRatio,
Navigator,
- ScrollView,
StyleSheet,
- TabBarIOS,
+ ScrollView,
Text,
- View,
TouchableHighlight,
+ TouchableOpacity,
+ View,
} = React;
-var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';
-
var _getRandomRoute = function() {
return {
- backButtonTitle: 'Back' + ('' + 10 * Math.random()).substr(0, 1),
- content:
- SAMPLE_TEXT + '\nHere\'s a random number ' + Math.random(),
- title: Math.random() > 0.5 ? 'Hello' : 'There',
- rightButtonTitle: Math.random() > 0.5 ? 'Right' : 'Button',
+ title: '#' + Math.ceil(Math.random() * 1000),
};
};
-
-var SampleNavigationBarRouteMapper = {
- rightContentForRoute: function(route, navigator) {
- if (route.rightButtonTitle) {
- return (
-
- {route.rightButtonTitle}
-
- );
- } else {
- return null;
- }
- },
- titleContentForRoute: function(route, navigator) {
+class NavButton extends React.Component {
+ render() {
return (
navigator.push(_getRandomRoute())}>
-
- {route.title}
-
-
- );
- },
- iconForRoute: function(route, navigator) {
- var onPress =
- navigator.popToRoute.bind(navigator, route);
- return (
-
-
-
- );
- },
- separatorForRoute: function(route, navigator) {
- return (
-
-
+ style={styles.button}
+ underlayColor="#B5B5B5"
+ onPress={this.props.onPress}>
+ {this.props.text}
);
}
-};
-
-var _delay = 400; // Just to test for race conditions with native nav.
-
-var renderScene = function(route, navigator) {
- var content = route.content;
- return (
-
-
-
-
- request push soon
-
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
- request pop soon
-
-
-
-
- Immediate set two routes
-
-
-
-
- pop to top soon
-
-
-
-
- );
-};
-
-var _popToTopLater = function(popToTop) {
- return () => setTimeout(popToTop, _delay);
-};
-
-var _pushRouteLater = function(push) {
- return () => setTimeout(
- () => push(_getRandomRoute()),
- _delay
- );
-};
-
-var _immediatelySetTwoItemsLater = function(immediatelyResetRouteStack) {
- return () => setTimeout(
- () => immediatelyResetRouteStack([
- _getRandomRoute(),
- _getRandomRoute(),
- ])
- );
-};
-
-var _popRouteLater = function(pop) {
- return () => setTimeout(pop, _delay);
-};
+}
var BreadcrumbNavSample = React.createClass({
- getInitialState: function() {
- return {
- selectedTab: 0,
+ componentWillMount: function() {
+ this._navBarRouteMapper = {
+ rightContentForRoute: function(route, navigator) {
+ return null;
+ },
+ titleContentForRoute: function(route, navigator) {
+ return (
+ navigator.push(_getRandomRoute())}>
+
+ {route.title}
+
+
+ );
+ },
+ iconForRoute: function(route, navigator) {
+ return (
+ {
+ navigator.popToRoute(route);
+ }}>
+
+
+ );
+ },
+ separatorForRoute: function(route, navigator) {
+ return (
+
+
+
+ );
+ }
};
},
- render: function() {
- var initialRoute = {
- backButtonTitle: 'Start', // no back button for initial scene
- content: SAMPLE_TEXT,
- title: 'Campaigns',
- rightButtonTitle: 'Filter',
- };
+ _renderScene: function(route, navigator) {
return (
-
-
-
- }
- />
-
-
- Navigator.SceneConfigs.FloatFromBottom}
- debugOverlay={false}
- style={[styles.appContainer]}
- initialRoute={initialRoute}
- renderScene={renderScene}
- navigationBar={
-
- }
- />
-
-
+
+ { navigator.push(_getRandomRoute()) }}
+ text="Push"
+ />
+ { navigator.immediatelyResetRouteStack([_getRandomRoute(), _getRandomRoute()]) }}
+ text="Reset w/ 2 scenes"
+ />
+ { navigator.popToTop() }}
+ text="Pop to top"
+ />
+ { navigator.replace(_getRandomRoute()) }}
+ text="Replace"
+ />
+ { this.props.navigator.pop(); }}
+ text="Close breadcrumb example"
+ />
+
);
},
- onTabSelect: function(tab, event) {
- if (this.state.selectedTab !== tab) {
- this.setState({selectedTab: tab});
- }
+ render: function() {
+ return (
+
+ }
+ />
+ );
},
+
+
});
var styles = StyleSheet.create({
- navigationItem: {
- backgroundColor: '#eeeeee',
- },
scene: {
paddingTop: 50,
flex: 1,
},
button: {
- backgroundColor: '#cccccc',
- margin: 50,
- marginTop: 26,
- padding: 10,
+ backgroundColor: 'white',
+ padding: 15,
+ borderBottomWidth: 1 / PixelRatio.get(),
+ borderBottomColor: '#CDCDCD',
},
buttonText: {
- fontSize: 12,
- textAlign: 'center',
+ fontSize: 17,
+ fontWeight: '500',
},
- appContainer: {
+ container: {
overflow: 'hidden',
backgroundColor: '#dddddd',
flex: 1,
@@ -257,13 +145,9 @@ var styles = StyleSheet.create({
fontSize: 18,
color: '#666666',
textAlign: 'center',
- fontWeight: '500',
+ fontWeight: 'bold',
lineHeight: 32,
},
- filterText: {
- color: '#5577ff',
- },
- // TODO: Accept icons from route.
crumbIconPlaceholder: {
flex: 1,
backgroundColor: '#666666',
diff --git a/Examples/UIExplorer/Navigator/JumpingNavSample.js b/Examples/UIExplorer/Navigator/JumpingNavSample.js
index fa3d72b0d..1a9479103 100644
--- a/Examples/UIExplorer/Navigator/JumpingNavSample.js
+++ b/Examples/UIExplorer/Navigator/JumpingNavSample.js
@@ -11,8 +11,10 @@
var React = require('react-native');
var {
Navigator,
+ PixelRatio,
StyleSheet,
ScrollView,
+ TabBarIOS,
Text,
TouchableHighlight,
View,
@@ -20,178 +22,186 @@ var {
var _getRandomRoute = function() {
return {
- randNumber: Math.random(),
+ randNumber: Math.ceil(Math.random() * 1000),
};
};
-var INIT_ROUTE = _getRandomRoute();
+class NavButton extends React.Component {
+ render() {
+ return (
+
+ {this.props.text}
+
+ );
+ }
+}
+
var ROUTE_STACK = [
_getRandomRoute(),
_getRandomRoute(),
- INIT_ROUTE,
- _getRandomRoute(),
_getRandomRoute(),
];
-var renderScene = function(route, navigator) {
- return (
-
-
- {route.randNumber}
- {
- navigator.jumpBack();
- }}>
-
- jumpBack
-
-
- {
- navigator.jumpForward();
- }}>
-
- jumpForward
-
-
- {
- navigator.jumpTo(INIT_ROUTE);
- }}>
-
- jumpTo initial route
-
-
- {
- navigator.push(_getRandomRoute());
- }}>
-
- destructive: push
-
-
- {
- navigator.replace(_getRandomRoute());
- }}>
-
- destructive: replace
-
-
- {
- navigator.pop();
- }}>
-
- destructive: pop
-
-
- {
- navigator.immediatelyResetRouteStack([
- _getRandomRoute(),
- _getRandomRoute(),
- ]);
- }}>
-
- destructive: Immediate set two routes
-
-
- {
- navigator.popToTop();
- }}>
-
- destructive: pop to top
-
-
-
-
- );
-};
+var INIT_ROUTE_INDEX = 1;
class JumpingNavBar extends React.Component {
render() {
return (
-
- {this.props.routeStack.map((route, index) => (
- {
- this.props.navigator.jumpTo(route);
- }}>
-
-
- {index}
-
-
-
- ))}
+
+
+ { this.props.onTabIndex(0); }}
+ children={}
+ />
+ { this.props.onTabIndex(1); }}
+ children={}
+ />
+ { this.props.onTabIndex(2); }}
+ children={}
+ />
+
);
}
}
var JumpingNavSample = React.createClass({
+ getInitialState: function() {
+ return {
+ tabIndex: INIT_ROUTE_INDEX,
+ };
+ },
render: function() {
return (
{
+ this._navigator = navigator;
+ }}
+ initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
initialRouteStack={ROUTE_STACK}
- renderScene={renderScene}
- navigationBar={}
+ renderScene={this.renderScene}
+ navigationBar={
+ {
+ this.setState({ tabIndex: index }, () => {
+ this._navigator.jumpTo(ROUTE_STACK[index]);
+ });
+ }}
+ />
+ }
+ onWillFocus={(route) => {
+ this.setState({
+ tabIndex: ROUTE_STACK.indexOf(route),
+ });
+ }}
shouldJumpOnBackstackPop={true}
/>
);
},
+ renderScene: function(route, navigator) {
+ var backBtn;
+ var forwardBtn;
+ if (ROUTE_STACK.indexOf(route) !== 0) {
+ backBtn = (
+ {
+ navigator.jumpBack();
+ }}
+ text="jumpBack"
+ />
+ );
+ }
+ if (ROUTE_STACK.indexOf(route) !== ROUTE_STACK.length - 1) {
+ forwardBtn = (
+ {
+ navigator.jumpForward();
+ }}
+ text="jumpForward"
+ />
+ );
+ }
+ return (
+
+ #{route.randNumber}
+ {backBtn}
+ {forwardBtn}
+ {
+ navigator.jumpTo(ROUTE_STACK[1]);
+ }}
+ text="jumpTo middle route"
+ />
+ {
+ this.props.navigator.pop();
+ }}
+ text="Exit Navigation Example"
+ />
+ {
+ this.props.navigator.push({
+ message: 'Came from jumping example',
+ });
+ }}
+ text="Nav Menu"
+ />
+
+ );
+ },
});
var styles = StyleSheet.create({
- scene: {
- backgroundColor: '#eeeeee',
- },
- scroll: {
- flex: 1,
- },
button: {
- backgroundColor: '#cccccc',
- margin: 50,
- marginTop: 26,
- padding: 10,
+ backgroundColor: 'white',
+ padding: 15,
+ borderBottomWidth: 1 / PixelRatio.get(),
+ borderBottomColor: '#CDCDCD',
},
buttonText: {
- fontSize: 12,
- textAlign: 'center',
+ fontSize: 17,
+ fontWeight: '500',
},
appContainer: {
overflow: 'hidden',
backgroundColor: '#dddddd',
flex: 1,
},
- navBar: {
- position: 'absolute',
- bottom: 0,
- left: 0,
- right: 0,
- height: 90,
- flexDirection: 'row',
+ messageText: {
+ fontSize: 17,
+ fontWeight: '500',
+ padding: 15,
+ marginTop: 50,
+ marginLeft: 15,
},
- navButton: {
+ scene: {
flex: 1,
+ paddingTop: 20,
+ backgroundColor: '#EAEAEA',
},
- navButtonText: {
- textAlign: 'center',
- fontSize: 32,
- marginTop: 25,
- },
- navButtonActive: {
- color: 'green',
- },
+ tabs: {
+ height: 50,
+ }
});
module.exports = JumpingNavSample;
diff --git a/Examples/UIExplorer/Navigator/NavigationBarSample.js b/Examples/UIExplorer/Navigator/NavigationBarSample.js
index cba58aabc..6013f4975 100644
--- a/Examples/UIExplorer/Navigator/NavigationBarSample.js
+++ b/Examples/UIExplorer/Navigator/NavigationBarSample.js
@@ -11,15 +11,30 @@
var React = require('react-native');
var {
+ PixelRatio,
Navigator,
+ ScrollView,
StyleSheet,
Text,
TouchableHighlight,
+ TouchableOpacity,
View,
} = React;
var cssVar = require('cssVar');
+class NavButton extends React.Component {
+ render() {
+ return (
+
+ {this.props.text}
+
+ );
+ }
+}
var NavigationBarRouteMapper = {
@@ -30,26 +45,27 @@ var NavigationBarRouteMapper = {
var previousRoute = navState.routeStack[index - 1];
return (
- navigator.pop()}>
-
+ navigator.pop()}>
+
{previousRoute.title}
-
+
);
},
RightButton: function(route, navigator, index, navState) {
return (
- navigator.push(newRandomRoute())}>
-
+
Next
-
+
);
},
@@ -65,8 +81,7 @@ var NavigationBarRouteMapper = {
function newRandomRoute() {
return {
- content: 'Hello World!',
- title: 'Random ' + Math.round(Math.random() * 100),
+ title: '#' + Math.ceil(Math.random() * 1000),
};
}
@@ -74,37 +89,63 @@ var NavigationBarSample = React.createClass({
render: function() {
return (
-
- (
-
- {route.content}
-
- )}
- navigationBar={
- (
+
+ {route.content}
+ {
+ navigator.immediatelyResetRouteStack([
+ newRandomRoute(),
+ newRandomRoute(),
+ newRandomRoute(),
+ ]);
+ }}
+ text="Reset w/ 3 scenes"
/>
- }
- />
-
+ {
+ this.props.navigator.pop();
+ }}
+ text="Exit NavigationBar Example"
+ />
+
+ )}
+ navigationBar={
+
+ }
+ />
);
},
});
var styles = StyleSheet.create({
- appContainer: {
- overflow: 'hidden',
- backgroundColor: '#ffffff',
- flex: 1,
+ messageText: {
+ fontSize: 17,
+ fontWeight: '500',
+ padding: 15,
+ marginTop: 50,
+ marginLeft: 15,
},
- scene: {
- paddingTop: 50,
- flex: 1,
+ button: {
+ backgroundColor: 'white',
+ padding: 15,
+ borderBottomWidth: 1 / PixelRatio.get(),
+ borderBottomColor: '#CDCDCD',
+ },
+ buttonText: {
+ fontSize: 17,
+ fontWeight: '500',
+ },
+ navBar: {
+ backgroundColor: 'white',
},
navBarText: {
fontSize: 16,
@@ -115,9 +156,20 @@ var styles = StyleSheet.create({
fontWeight: '500',
marginVertical: 9,
},
+ navBarLeftButton: {
+ paddingLeft: 10,
+ },
+ navBarRightButton: {
+ paddingRight: 10,
+ },
navBarButtonText: {
color: cssVar('fbui-accent-blue'),
},
+ scene: {
+ flex: 1,
+ paddingTop: 20,
+ backgroundColor: '#EAEAEA',
+ },
});
module.exports = NavigationBarSample;
diff --git a/Examples/UIExplorer/Navigator/NavigatorExample.js b/Examples/UIExplorer/Navigator/NavigatorExample.js
index f0cae637d..0f0e510c3 100644
--- a/Examples/UIExplorer/Navigator/NavigatorExample.js
+++ b/Examples/UIExplorer/Navigator/NavigatorExample.js
@@ -11,6 +11,7 @@
var React = require('react-native');
var {
Navigator,
+ PixelRatio,
ScrollView,
StyleSheet,
Text,
@@ -20,30 +21,78 @@ var BreadcrumbNavSample = require('./BreadcrumbNavSample');
var NavigationBarSample = require('./NavigationBarSample');
var JumpingNavSample = require('./JumpingNavSample');
+class NavButton extends React.Component {
+ render() {
+ return (
+
+ {this.props.text}
+
+ );
+ }
+}
+
class NavMenu extends React.Component {
render() {
return (
- {
- this.props.navigator.push({ id: 'breadcrumbs' });
- }}>
- Breadcrumbs Example
-
- {
- this.props.navigator.push({ id: 'navbar' });
- }}>
- Navbar Example
-
- {
- this.props.navigator.push({ id: 'jumping' });
- }}>
- Jumping Example
-
- {
- this.props.onExampleExit();
- }}>
- Exit Navigator Example
-
+ {this.props.message}
+ {
+ this.props.navigator.push({
+ message: 'Swipe right to dismiss',
+ sceneConfig: Navigator.SceneConfigs.FloatFromRight,
+ });
+ }}
+ text="Float in from right"
+ />
+ {
+ this.props.navigator.push({
+ message: 'Swipe down to dismiss',
+ sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
+ });
+ }}
+ text="Float in from bottom"
+ />
+ {
+ this.props.navigator.pop();
+ }}
+ text="Pop"
+ />
+ {
+ this.props.navigator.popToTop();
+ }}
+ text="Pop to top"
+ />
+ {
+ this.props.navigator.push({ id: 'navbar' });
+ }}
+ text="Navbar Example"
+ />
+ {
+ this.props.navigator.push({ id: 'jumping' });
+ }}
+ text="Jumping Example"
+ />
+ {
+ this.props.navigator.push({ id: 'breadcrumbs' });
+ }}
+ text="Breadcrumbs Example"
+ />
+ {
+ this.props.onExampleExit();
+ }}
+ text="Exit Example"
+ />
);
}
@@ -58,19 +107,20 @@ var TabBarExample = React.createClass({
renderScene: function(route, nav) {
switch (route.id) {
- case 'menu':
+ case 'navbar':
+ return ;
+ case 'breadcrumbs':
+ return ;
+ case 'jumping':
+ return ;
+ default:
return (
);
- case 'navbar':
- return ;
- case 'breadcrumbs':
- return ;
- case 'jumping':
- return ;
}
},
@@ -78,9 +128,14 @@ var TabBarExample = React.createClass({
return (
Navigator.SceneConfigs.FloatFromBottom}
+ configureScene={(route) => {
+ if (route.sceneConfig) {
+ return route.sceneConfig;
+ }
+ return Navigator.SceneConfigs.FloatFromBottom;
+ }}
/>
);
},
@@ -88,18 +143,30 @@ var TabBarExample = React.createClass({
});
var styles = StyleSheet.create({
+ messageText: {
+ fontSize: 17,
+ fontWeight: '500',
+ padding: 15,
+ marginTop: 50,
+ marginLeft: 15,
+ },
container: {
flex: 1,
},
button: {
backgroundColor: 'white',
padding: 15,
+ borderBottomWidth: 1 / PixelRatio.get(),
+ borderBottomColor: '#CDCDCD',
},
buttonText: {
+ fontSize: 17,
+ fontWeight: '500',
},
scene: {
flex: 1,
- paddingTop: 64,
+ paddingTop: 20,
+ backgroundColor: '#EAEAEA',
}
});