renderScene(route, navigator) {
    if(route.name == 'Login') {
      return <Login navigator={navigator} {...route.passProps}  />
    }
    if(route.name == 'Approvals') {
      return <Approvals navigator={navigator} {...route.passProps}  />
    }
    if(route.name == 'Pending') {
      return <Pending navigator={navigator} {...route.passProps}  />
    }
    if(route.name == 'Details') {
      return <Details navigator={navigator} {...route.passProps}  />
    }
  }

  render() {
    return (
      <Navigator
        style={{ flex:1 }}
        initialRoute={{ name: 'Login' }}
        renderScene={ this.renderScene } />
    )
  }
};

class Approvals extends Component{
    constructor(props){
         super(props);
        this.state={
            page: 'Pending'
        }
    }
   render(){
if(this.state.page==="Pending")

      return (
        <View>
            <View style={styles.strip}>
                <Image style={{width:50, height:30,padding:10,top:5}} source={require('./drawable/drawable/asap.png')}/>
                <Text style={{fontSize:20,color:'white',bottom:20,left:60,padding:10}}>Approvals</Text>
            </View>
            <View style={{top:30}}>
            <Tabs
          selected={this.state.page}
          style={styles.tabbar}
          selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}
        >
            <Text name="Pending">Pending</Text>
            <Text name="Closed">Closed</Text>
        </Tabs>
        </View>
        <View style={{top:60}}>

        <Pending />
        </View>
        </View>

      );
      if(this.state.page==="Closed")
        return (
        <View>
            <View style={styles.strip}>
                <Image style={{width:50, height:30,padding:10,top:5}} source={require('./drawable/drawable/asap.png')}/>
                <Text style={{fontSize:20,color:'white',bottom:20,left:60,padding:10}}>Approvals</Text>
            </View>
            <View style={{top:30}}>
            <Tabs
          selected={this.state.page}
          style={styles.tabbar}
          selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}
        >
            <Text name="Pending">Pending</Text>
            <Text name="Closed">Closed</Text>
        </Tabs>
        </View>
        <View style={{top:60}}>
        <Text style={{top:60}}>CodeSharing App</Text>
        <Text>{this.state.page}</Text>

        </View>
        </View>

      );

    }
}

class Login extends Component{
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password :''

        };
      }
  async _onValueChange(item, selectedValue) {
    try {
      await AsyncStorage.setItem(item, selectedValue);
    } catch (error) {
      console.log('AsyncStorage error: ' + error.message);
    }
  }




  _userLogin() {
    var username=this.state.username;
    var password=this.state.password;
    if (username && password) { // if validation fails, value will be null
      fetch(" http://asaptest-sas71.rhcloud.com/login", {
        method: "POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: this.state.username,
          password: this.state.password,
        })
      })
      .then((response) => response.json())
      .then((responseData) => {
        this._onValueChange(STORAGE_KEY, responseData.token)
        if(responseData.token){
          this.props.navigator.push({name:'Approvals'});
        }

      })
      .done();
    } else{
      alert("Enter the details")
    }
  }

  render() {
    return (
      <View  style={styles.container}>

        <View style={styles.backdropView} needsOffscreenAlphaCompositing={true}>
                <Image style={{width:150, height:100,bottom:60}} source={require('./drawable/drawable/asap.png')}/>



          <View style={styles.row}>
              <TextInput
              style={{width:200,height: 40,marginTop:20,backgroundColor: "white"}}
              placeholder="First Name!"
              onChangeText={(username) => this.setState({username})}
            />
            <TextInput
              style={{height: 40,marginTop:20,backgroundColor: "white"}}
              placeholder="First Name!"
              onChangeText={(password) => this.setState({password})}
            />
          </View>
          <View style={styles.row,{backgroundColor:'rgba(255,255,255,.5)',marginTop:20, height:30}}>
            <TouchableHighlight style={{ height: 30, width:200}} onPress={this._userLogin.bind(this)} underlayColor='#99d9f4'>
              <Text style={styles.buttonText}>Login</Text>
            </TouchableHighlight>
          </View>
      </View>
      </View>
    );
  }
}