How to form a uri string in Javascript or in React Native?

Question

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 not work, it gives an error in login , the credentials are wrong.

Hardcoded and works fine:

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

export default class Test extends Component {




async getUsername(){
var username;
try {
username = await AsyncStorage.getItem('username');
console.log('username'+username);
return username;

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

}

async getPassword(){
var password;
try {
password = await AsyncStorage.getItem('password');
console.log('password'+password);
return password;
} catch (error) {
// Error retrieving data
password="";
return password;
}
}
render() {

let pic = {

  uri: 'http://www.userlogin.php?username=react&password=react@123'

   };
return (

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

Used Variables does not work:

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

    export default class Test extends Component {
    async getUsername(){
    var username;
    try {
    username = await AsyncStorage.getItem('username');
    console.log('username'+username);
    return username;

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

    }

    async getPassword(){
    var password;
    try {
    password = await AsyncStorage.getItem('password');
    console.log('password'+password);
    return password;
    } catch (error) {
    // Error retrieving data
    password="";
    return password;
    }
    }
    render() {
    var usr=this.getUsername();
    var pass=this.getPassword();
    let pic = {

      uri: 'http://userlogin.php?username='+usr+'&password='+pass

       };
    return (

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

Answer 1

I did these changes in the code and it worked

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

export default class Test extends Component {
state = {
username:'',
password:'',
};
componentDidMount() {
this._loadInitialState().done();
}

_loadInitialState = async () => {
try {
  var value = await AsyncStorage.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 = await AsyncStorage.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 (

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

Answer 2

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

So something like

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

    export default class Test extends Component {

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

    }
    async getUsername(){
    var username;
    try {
    username = await AsyncStorage.getItem('username');
    console.log('username'+username);
    this.setState({username: username});

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

    }

    async getPassword(){
    var password;
    try {
    password = await AsyncStorage.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(
             <WebView
              automaticallyAdjustContentInsets={false}
              scalesPageToFit={false}
              source={{uri:pic.uri}}
              />
              );

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

    }
    componentWillMount() {

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

    return (

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

Answer 3

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.