sptra sptra - 4 months ago 35
iOS Question

Navigator & AsyncStorage react native

Hello i'm new in react native and currently learn about AsyncStorage.

I want to implement conditional to render navigator. If there's value key in AsyncStorage, the initial route go to Page2 and if there's no value key in AsyncStorage, the initial route go to Page1.

If i close the app and re-open again, I want it shows me the corresponding page whether there is a key. please help.

Here's what i've done so far:



import React, { Component } from 'react';
import {
AppRegistry,
TextInput,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
var initialRoute = {id: 1}
var STORAGE_KEY = '@AsyncStorageExample:key';

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
snapVelocity: 8,
edgeHitWidth: SCREEN_WIDTH,
});

var CustomSceneConfig = Object.assign({}, BaseConfig, {
springTension: 100,
springFriction: 1,
gestures: {
pop: CustomLeftToRightGesture,
}
});

var Page1 = React.createClass({


_goToPage2() {
AsyncStorage.setItem(STORAGE_KEY, "this is the key");
this.props.navigator.push({id: 2})
},

render() {
return (
<View style={[styles.container, {backgroundColor: 'white'}]}>
<Text style={styles.welcome}>
This is Page 1
</Text>
<TouchableOpacity onPress={this._goToPage2}>
<View style={{paddingVertical: 2, paddingHorizontal: 7, backgroundColor: 'black'}}>
<Text style={styles.buttonText}>Save Key</Text>
</View>
</TouchableOpacity>
</View>
)
},
});

var Page2 = React.createClass({
componentDidMount() {
this._loadInitialState();
},

async _loadInitialState() {
try {
var value = await AsyncStorage.getItem(STORAGE_KEY);
if (value !== null){
this.setState({selectedValue: value})
} else {
}
} catch (error) {
}
},

getInitialState() {
return {
selectedValue: null
};
},

_signOutPressed(){
AsyncStorage.removeItem(STORAGE_KEY);
this.props.navigator.push({id: 1})
},

render() {
if(this.state.selectedValue === null) {
begin = <Page1 />
} else{
begin = <View style={[styles.container, {backgroundColor: 'white'}]}>
<Text style={styles.welcome}>This is Page 2</Text>
<Text>KEY: {this.state.selectedValue}</Text>
<TouchableOpacity onPress={this._signOutPressed}>
<View style={{paddingVertical: 2, paddingHorizontal: 7, margin: 10, backgroundColor: 'black'}}>
<Text style={styles.buttonText}>Delete Key</Text>
</View>
</TouchableOpacity>
</View>
}


return (
begin
);
},
});

var TestAsync = React.createClass({

_renderScene(route, navigator) {
if (route.id === 1) {
return <Page1 navigator={navigator} />
} else if (route.id === 2) {
return <Page2 navigator={navigator} />
}
},

_renderScene1(route, navigator) {
if (route.id === 1) {
return <Page1 navigator={navigator} />
} else if (route.id === 2) {
return <Page2 navigator={navigator} />
}
},

_configureScene(route) {
return CustomSceneConfig;
},

render() {
var initialRoute = {id:1}
if(AsyncStorage.getItem(STORAGE_KEY) != null){
initialRoute = {id:2}
}
return(
<Navigator
initialRoute={initialRoute}
renderScene={this._renderScene}
configureScene={this._configureScene} />
);

}
});

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'black',
},
buttonText: {
fontSize: 14,
textAlign: 'center',
margin: 10,
color: 'white',
},
default: {
height: 26,
borderWidth: 0.5,
fontSize: 13,
padding: 4,
marginHorizontal:30,
marginBottom:10,
},
});

module.exports = TestAsync;




Answer

You can do something like this, In TestAsync class

render() {
    var initialRoute = {id:1}
    if(AsyncStorage.getItem(STORAGE_KEY) != null){
       initialRoute = {id:2}
    }
    return(
       <Navigator
        initialRoute={initialRoute}
        renderScene={this._renderScene}
        configureScene={this._configureScene} />
    );
}
Comments