Redirecting to different scene in React Native - react-native

Question

I am creating sign up feature in my React Native app.
I have a touchable highlight in my render:
<TouchableHighlight style={styles.button} onPress={this._handleSignUp}>
<Text style={styles.white_text}>Sign Up</Text>
</TouchableHighlight>
and here is the handleSignUp function:
_handleSignUp: function(){
fetch('https://api.parse.com/1/users', {
method: 'post',
headers: {
'X-Parse-Application-Id': 'MY_ID',
'X-Parse-REST-API-Key': 'MY_KEY',
'X-Parse-Revocable-Session': '1',
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.state.username,
student_id: this.state.id,
password: this.state.password,
})
}).then((response) => response.text())
.then((responseText) => {
if (responseText.code=='201'){
// redirect to Profile Scene
}
});
},
So if user is signed up successfully i want him to be redirected to different scene.
How do we handle this type of redirects in React native?

Answer 1

Use
this.props.navigator.redirect(route)
without props just use this.navigator.redirect(route) instead

Answer 2

You use NavigatorIOS or the lower-level Navigator. See this documentation page for more details:
http://facebook.github.io/react-native/docs/navigator-comparison.html#content
Both Navigator and NavigatorIOS are components that allow you to
manage the navigation in your app between various "scenes" (another
word for screens). They manage a route stack and allow you to pop,
push, and replace states. In this way, they are similar to the html5
history API.

Answer 3

You will have to use NavigationExperiemental for that. That being said, NavigationExperimental is a bit too low level and it's probably much easier to use a 3rd party lib to navigate between your scene components, and to get all the fancy transition animations common to mobile UI patterns. If you are familiar with React Router on the web, I highly encourage you to take a look at React Router Native.
Disclaimer: I'm the author.
The project is hosted on GitHub:
https://github.com/jmurzy/react-router-native
Here's an example that does exactly what you want and more under 80 LOC.
/**
* index.[ios|android].js
*/
import React from 'react';
import {
Header,
Link,
nativeHistory,
Route,
Router,
StackRoute,
withRouter,
} from 'react-router-native';
import {
AppRegistry,
ScrollView,
StyleSheet,
View,
} from 'react-native';
const styles = StyleSheet.create({
component: {
backgroundColor: '#FFFFFF',
flex: 1,
},
home: {
backgroundColor: '#FFFFFF',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
},
detailCard: {
height: 100,
margin: 20,
width: 100,
},
});
const Master = (props) => (
<View style={styles.component}>
{props.children}
</View>
);
const HomeHeader = withRouter((props) => {
const handleRightButtonPress = () => {
props.router.push('/detail/gray');
};
return (
<Header
{...props}
style={{ backgroundColor: '#26BBE5' }}
title="Feed"
rightButtonText="Gray"
onRightButtonPress={handleRightButtonPress}
/>
);
});
const Home = () => {
const DetailCard = ({ backgroundColor }) => (
<Link to={`/detail/${encodeURIComponent(backgroundColor)}`} style={styles.detailCard}>
<View style={{ flex: 1, backgroundColor }} />
</Link>
);
return (
<ScrollView style={styles.component} contentContainerStyle={styles.home}>
<DetailCard backgroundColor="#EF4E5E" />
<DetailCard backgroundColor="#9498CA" />
<DetailCard backgroundColor="#AFCCB3" />
<DetailCard backgroundColor="#F0D73D" />
<DetailCard backgroundColor="#A176B0" />
<DetailCard backgroundColor="#416BB4" />
<DetailCard backgroundColor="#94B5DC" />
<DetailCard backgroundColor="#D48445" />
</ScrollView>
);
};
const DetailHeader = withRouter((props) => {
const { routeParams } = props;
const title = routeParams.themeColor;
const backgroundColor = routeParams.themeColor;
const colors = ['#EF4E5E', '#D48445', '#AFCCB3', '#F0D73D', '#A176B0'];
const handleRightButtonPress = () => {
const randomIndex = Math.floor(Math.random() * colors.length);
const randomColor = colors[randomIndex];
props.router.push(`/detail/${encodeURIComponent(randomColor)}`);
};
return (
<Header
{...props}
title={title}
style={{ backgroundColor }}
leftButtonText="Back"
rightButtonText="Random"
onRightButtonPress={handleRightButtonPress}
/>
);
});
const Detail = (props) => (
<View style={[styles.component, { backgroundColor: '#FFFFFF' }]}>{props.children}</View>
);
const routes = (
/* Address Bar can be toggled on or off by setting the addressBar prop */
<Router history={nativeHistory} addressBar>
<StackRoute path="master" component={Master}>
<Route path="/" component={Home} overlayComponent={HomeHeader} />
<Route path="/detail/:themeColor" component={Detail} overlayComponent={DetailHeader} />
</StackRoute>
</Router>
);
AppRegistry.registerComponent('YourApp', () => () => routes);

Answer 4

I'm not sure to understand what's the problem here.
Either you redirect to another page then your router will load another component.
Or you can render directly the profile component on success of your request
React.render(, document.getElementById('thedivyouwanttoattachyourcomponent'));
I hope it helps