Custom navigation with Navigator component in React-Native
JavascriptIosNavigationReactjsReact NativeJavascript Problem Overview
I’m exploring possibilities of React Native while developing a demo app with custom navigation between views with the help of Navigator
component.
The main app class renders navigator and inside renderScene
returns passed component:
class App extends React.Component {
render() {
return (
<Navigator
initialRoute={{name: 'WelcomeView', component: WelcomeView}}
configureScene={() => {
return Navigator.SceneConfigs.FloatFromRight;
}}
renderScene={(route, navigator) => {
// count the number of func calls
console.log(route, navigator);
if (route.component) {
return React.createElement(route.component, { navigator });
}
}}
/>
);
}
}
For now app contains two views:
class FeedView extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>
Feed View!
</Text>
</View>
);
}
}
class WelcomeView extends React.Component {
onPressFeed() {
this.props.navigator.push({
name: 'FeedView',
component: FeedView
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome View!
</Text>
<Text onPress={this.onPressFeed.bind(this)}>
Go to feed!
</Text>
</View>
);
}
}
What I want to figure out is:
-
I see in the logs that when pressing “go to feed”
renderScene
is called several times though the view renders correctly once. Is it how the animation works?index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed View
-
Generally does my approach conform to the React way, or can it be done better?
What I want to achieve is something similar to NavigatorIOS
but without the navigation bar (however some views will have their own custom navigation bar).
Javascript Solutions
Solution 1 - Javascript
Your approach should work great. In big apps at Fb, we avoid calling the require()
for the scene component until we render it, which can save a bit of start-up time.
The renderScene
function should be called when the scene is first pushed to the Navigator. It will also be called for the active scene when the Navigator gets re-rendered. If you see renderScene
get called multiple times after a push
, then it is probably a bug.
The navigator is still a work in progress, but if you find any problems with it please file on github and tag me! (@ericvicenti)
Solution 2 - Javascript
Navigator
is deprecated now in RN 0.44.0
you can use react-native-deprecated-custom-components
instead to support your existing application that is using Navigator
.
Solution 3 - Javascript
As others have previously mentioned, Navigator has been deprecated since v0.44, but can still be imported to support older applications:
> Navigator has been removed from the core React Native package in > version 0.44. The module has been moved to a > react-native-custom-components package that can be imported by your > application in order to maintain backwards compatibility. > > To see the original docs for Navigator, please switch to an older version of > the docs.
As per the docs (React Native v0.54) Navigating Between Screens. It is now recommended to use React Navigation if you are just getting started, or NavigatorIOS for non-Android applications
> If you are just getting started with navigation, you will probably > want to use React Navigation. React Navigation provides an easy to use > navigation solution, with the ability to present common stack navigation and > tabbed navigation patterns on both iOS and Android. > > ... > > If you're only targeting iOS, you may want to also check out NavigatorIOS > as a way of providing a native look and feel with minimal configuration, as it > provides a wrapper around the native UINavigationController class.
NB: At the time of providing this answer, React Native was at version 0.54
Solution 4 - Javascript
Navigator component is deprecated now. You could use react-native-router-flux by askonov, it has a huge variety and supports many different animations and is efficient