How To Form A Uri String In Javascript Or In React Native?

when i Hardcode the username and password in the uri it works fine, the webview opens the required page and logs the user in, but when i try to append variables to the uri it does

Solution 1:

You have defined getUsername as async getUsername() { ... }. which means would will need to await the result, e.g. var usr = await this.getUsername();. The same is true for getPassword.

Unfortunately I don't think the render function can be async so you might have to rethink your approach a bit. My advice would be to make your component cater for the missing values (you can return null to not render anything) until the data is available.

This question is using ajax, but the asynchronous behaviour is similar to your problem, so maybe it can help you out.

Solution 2:

You probably need to set username in state and use that after callback

So something like

importReact, { Component } from'react';
    import { WebView,AsyncStorage } from'react-native';

    exportdefaultclassTestextendsComponent {

    constructor(props) {
       super(props);
       this.state = {
          username: null,
          password: null
       }

    }
    asyncgetUsername(){
    var username;
    try {
    username = awaitAsyncStorage.getItem('username');
    console.log('username'+username);
    this.setState({username: username});

    } catch (error) {
    // Error retrieving data
    username ="";
    console.log('username'+username);
    }

    }

    asyncgetPassword(){
    var password;
    try {
    password = awaitAsyncStorage.getItem('password');
    console.log('password'+password);
    this.setState({password: password});
    } catch (error) {
    // Error retrieving data
    password="";
    return password;
    }
    }

    getWebView() {
        var usr = this.state.username;
        var pass = this.state.password;
        if (usr != null && pass != null) {
             uri: 'http://userlogin.php?username='+usr+'&password='+pass;
             return(
             <WebViewautomaticallyAdjustContentInsets={false}scalesPageToFit={false}source={{uri:pic.uri}}
              />
              );

        } else {
           return( <View></View>);
        }

    }
    componentWillMount() {

       this.getUsername();
       this.getPassword();
    }
    render() {

    return (

      <View>
        {this.getWebView()}
      </View>
    );
  }

Solution 3:

I did these changes in the code and it worked

importReact, { Component } from'react';
import { WebView,AsyncStorage } from'react-native';

exportdefaultclassTestextendsComponent {
state = {
username:'',
password:'',
};
componentDidMount() {
this._loadInitialState().done();
}

_loadInitialState = async () => {
try {
  var value = awaitAsyncStorage.getItem('username');
  if (value !== null){
    this.setState({username: value});

  } else {
    this.setState({username:''});
  }
} catch (error) {
    this.setState({username:'AsyncStorage error: ' + error.message});

}
try {
  var value = awaitAsyncStorage.getItem('password');
  if (value !== null){
    this.setState({password: value});

  } else {
    this.setState({password:''});
  }
} catch (error) {
    this.setState({password:'AsyncStorage error: ' + error.message});

}
};

render() {
let pic = {

  uri: 'http://appsriv.com.bh-in-19.webhostbox.net/wp/user-login.php?username='+this.state.username+'&password='+this.state.password

   };
return (

  <WebViewautomaticallyAdjustContentInsets={false}scalesPageToFit={false}source={{uri:pic.uri}}
  />
);
}
}