Getting an Image uri into render from an async Function

Question

having a bit of trouble. I should start by saying I'm really new to react native so hopefully it's not something foolish I've missed. I'm using firebase to store image uri's but when I try to pass them in render from my function it gives me the {_40:0,_65:0,_55:null,_72:null} output but in the function, it seems to get the uri just fine so it seems to be something with passing it back.

I've tried using AsyncImage (using the sunglass dog example: https://www.npmjs.com/package/react-native-async-image-animated ) but it just sits forever loading I think and output in render remains the same.


export class PinImgScreen extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'white',
        }}>
        {console.log(get_firebaseImgTest(targetinMem, 1))}

        <AsyncImage
          style={{
            borderRadius: 50,
            height: 100,
            width: 100,
          }}
          source={{
            uri: get_firebaseImgTest(targetinMem, 1),
          }}
          placeholderColor="#b3e5fc"
        />
      </View>
    );
  }
}


function get_firebaseImgTest(userId, num) {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      firebase
        .database()
        .ref('Info1/' + userId + '/imgInfo' + num)
        .on('value', snapshot => {
          console.log('GIBS ' + snapshot.val().imgInfo);
          resolve(snapshot.val().imgInfo);
          reject('https://www.gstatic.com/webp/gallery/1.jpg');
        });
    }, 200);
  });
}

OutPut:

1: {_40:0,_65:0,_55:null,_72:null}

2: GIBS https://www.gstatic.com/webp/gallery/2.jpg

CampbellMG · Accepted Answer · 2019-05-01 03:40:47Z

0

You are getting this issue because get_firebaseImgTest() returns a promise, not a string.

One solution to this issue would be to store the image URI in the component's state and update it through the componentDidMount callback like so:

export class PinImgScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            imageUri: 'https://www.gstatic.com/webp/gallery/1.jpg'
        }
    }

    componentDidMount() {
        get_firebaseImgTest(targetinMem, 1)
            .then(imageUri => this.setState({imageUri}))
            .catch(imageUri => this.setState({imageUri}))
    }

    render() {
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'white',
                }}>
                {console.log(get_firebaseImgTest(targetinMem, 1))}

                <AsyncImage
                    style={{
                        borderRadius: 50,
                        height: 100,
                        width: 100,
                    }}
                    source={{
                        uri: this.state.imageUri
                    }}
                    placeholderColor="#b3e5fc"
                />
            </View>
        );
    }
}

edited May 1, 2019 at 3:40

answered May 1, 2019 at 0:54

CampbellMG

2,2101 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ares Over a year ago

Hello, friend thanks for the reply. Its saying that imageUri is empty " TypeError: null is not an object (evaluating 'this.state.imageUri') ". I returning a string uri but no luck with it either.

CampbellMG Over a year ago

You will need a constructor to initialise your state if you don't have one already. See my edit for an implementation

Ares Over a year ago

Worked. Thank you!!

Collectives™ on Stack Overflow

Getting an Image uri into render from an async Function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related