[SOLVED] Meteor method call in React Native solution

Hi all,

I am current developing react native with meteor backend,

I have a subscription in createContainer, and the subscription contains userId, which I will use a meteor method to fetch the user picture as the code below,
but I cant make it work, the user picture uri never gets to the component…

could anyone help me with it?
what do you guys think is the best practice when it comes to async data handling for react native& meteor?

thank you very much!!!

  getAvatar(buyerId){
    Meteor.call('getUserPicture', buyerId, (err, res)=>{
       if(err){
         console.log(err);
         return err;
       }
       else{
         console.log(res);
         return res;
       }
     })
  }

  render() {
    if(this.props.handle.ready()){
      return (
        <View>
        <ScrollView >
        <List containerStyle={{marginBottom: 20}}>
        {
          this.props.priceDiscussesSelling && this.props.priceDiscussesSelling.map((priceDiscuss, i) => {

            return (<ListItem
              roundAvatar
              avatar={{uri: this.getAvatar(priceDiscuss.buyerId)&&this.getAvatar(priceDiscuss.buyerId)}}
              key={i}
              subtitle={priceDiscuss.lastDiscussItem.createdAt}
              rightTitle={priceDiscuss.status}
              title={priceDiscuss.lastDiscussItem.content}
              onPress={()=>{this.props.navigation.navigate('PriceDiscussDetail', {priceDiscussId: priceDiscuss._id})}}
              />)
            }
          )
        }
        </List>

        </ScrollView>

        </View>
      );
    }
    }

export default createContainer(param => {
    let handle = Meteor.subscribe('getPersonalSellingPriceDiscusses',(err)=>{
      if(err){
        console.log(err);
      }
      else{
      }
    });
    return {
      priceDiscussesSelling: Meteor.collection('priceDiscusses').find({ sellerId : Meteor.userId()}),
      handle: handle
    }
  }, PriceDiscussSelling);

have you tried pulling the meteor out of { uri: }? I know there can be issues dynamically settings require() but not sure it applies here.

let imageURI = myMethod();

Image source={ uri: imageURI }

Or move the method call into the createContainer instead of doing it inside the component?

1 Like

Hi thanks for the quick reply,

yes I try both before, no luck. :disappointed:

maybe put a console.log in the server-side of the method to make sure it is even firing. Otherwise maybe:


  render() {

     if (this.props.loading) {
          return <Text>Loading....</Text>
      }


      return (
        <ScrollView >
        {
          this.props.priceDiscussesSelling && this.props.priceDiscussesSelling.map((priceDiscuss, i) => {

            return (
             <ListItem
                 roundAvatar
                  avatar={{uri: this.props.uri && this.props.uri}}
                  key={i}
                  subtitle={priceDiscuss.lastDiscussItem.createdAt}
                  rightTitle={priceDiscuss.status}
                  title={priceDiscuss.lastDiscussItem.content}
                 onPress={()=>{this.props.navigation.navigate('PriceDiscussDetail', {priceDiscussId: priceDiscuss._id})}}
              />
            );

            }
          )
        }
        </ScrollView>
      );
}

export default createContainer(param => {
    let handle = Meteor.subscribe('getPersonalSellingPriceDiscusses);

    if(handle.ready()) {
      let priceDiscussesSelling  = Meteor.collection('priceDiscusses').find({ sellerId : Meteor.userId()})
       Meteor.call('getUserPicture', priceDiscussesSelling.buyerId, (err, uri)=>{
         if(err){ return err; }
         return { priceDiscussesSelling, handle, uri, loading: false }
      });
   } else {
        return { loading: true }
    }

  }, PriceDiscussSelling);
1 Like

Hi,
I am pretty sure the method is fired i can see it from the log.
it is just the data is not updated after the method return some value, thats the problem.

I try your approach(with some change, since “priceDiscusses” is an array, and getUserPicture handle one by one ), still no luck

“Expected object returned from getMeteorData”

I guess the return expression can not be inside if block, or method callback…

I was also trying to use componentWillUpdate()
but encountered some difficulty, too.

really hope to know some good practice for this kinda use case :flushed:

maybe store the method result in local state when you get it. Then use the state to set the uri. I’ve been using apollo-client instead of react-native-meteor so I’m not sure.

1 Like

solution example is here, leveraging “componentWillReceiveProps()”

Thanks to Spencer Carli

1 Like