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}}
      />
    );
  }

Do console.log(usr, pass) before `let pic = { uri: 'http://userlogin.php?username='+usr+'&password='+pass };` — Shubham Khatri, Apr 07 '17 at 09:59
console.log('user'+usr,'pass'+ pass); 'user[object Object]', 'pass[object Object]' — Siddarth G, Apr 07 '17 at 10:44
Since you are getting an object, it is a problem , you need a string to append — Shubham Khatri, Apr 07 '17 at 10:57
logs are executed in this order 04-07 16:26:32.630 32092 4030 I ReactNativeJS: usernamereact 04-07 16:26:32.635 32092 4030 I ReactNativeJS: passwordreact@123 04-07 16:26:47.976 32092 4030 I ReactNativeJS: 'user[object Object]', 'pass[object Object]' i think before getUsername gets executed uri is assigned with null in place of usr.. — Siddarth G, Apr 07 '17 at 11:43

score 1 · Answer 1 · edited May 23 '17 at 11:46

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.

score 0 · Answer 2 · answered Apr 07 '17 at 15:10

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>
    );
  }

score 0 · Accepted Answer · answered Apr 10 '17 at 10:07

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}}
  />
);
}
}

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

3 Answers3

Linked