CODEWITHSUNDEEP
reactjsreact-native
Try2prog
Try2prog

Reputation: 191

react native - how do I pass parameter from one component to another?

I have 2 screens, one with image picker and uploading and another one with map and markers,

My goal is to add marker with a photo and put that photo ref on my marker collection in firebase.

so far I managed to put the marker latlng,

I use modal inside the map screen: inside the modal I call the image picker and once I upload the photo and use:

//inside UploadScreen ~~~
const urlRef =  storage()
            .ref(filename)
            .getDownloadURL();
            console.log('url: ', urlRef)

I need that urlRef to be on my other screen modal.

  <Modal
       isVisible
       transparent
       onBackButtonPress={() => this.setState({ activeModal: null })}
       onBackdropPress={() => this.setState({ activeModal: null })}
      >
        
        <View style={styles.modalView}>
        <UploadScreen />  
        <TouchableOpacity onPress={()=>this.setState({activeModal: null})}>
          <Text> Close</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() =>this._addMarker()}> //this adds the marker latlng
          <Text>add marker</Text>
        </TouchableOpacity>
        
        </View>
      </Modal>

on my map screen I call <UploadImage/>to load that upload image component and after upload completed I get that urlRef that I need to put inside the marker collection which in my map screen.

 _addMarker() {
    console.log('marker cords?: ', this.state.marker)
    console.log('marker cords?: ', this.state.marker.longitude)
    markerRef.add({
      longitude: this.state.marker.longitude,
      latitude: this.state.marker.latitude,
      email: this.state.userEmail,
      imageUri: "will be image uri"
      
    })

  }

Please give me some direction, Im not sure if need props there or something else.

any advise or help will be welcome.

Thanks in advance

Upvotes: 1

Views: 1057

Answers (1)

Konstantin
Konstantin

Reputation: 1458

Normally, the communication flow in React is top-down. That means that the parent passes some props to the children, which then in turn do something with these props.

However, it is obviously possible to do it the way you want to do it. For that, the easiest would be to create a state using useState in your modal. You will then pass the setter to the child, and when the value in the child is filled, then you pass it back to the parent.

In code it would look like that:

Modal.js (parent)

const [childUrlRef, setChildUrlRef] = useState(null);

<Modal
  isVisible
  transparent
  onBackButtonPress={() => this.setState({ activeModal: null })}
  onBackdropPress={() => this.setState({ activeModal: null })}
 >
        
   <View style={styles.modalView}>
   <UploadScreen setChildUrlRef={setChildUrlRef} />  
   ...
 </Modal>

UploadScreen (child)

When you get your value in the child, set it to the state in order to make sure that React sees it and then pass it to your parent.

const [url, setUrl] = useState(null);

useEffect(() => {
  if (url) props.setChildUrlRef(url);
}, [url])

...

const urlRef =  storage()
.ref(filename)
.getDownloadURL();
console.log('url: ', urlRef)

setUrl(urlRef);
    ...

So you get your variable, set it to the local state, and then have a useEffect watching for changes in that variable, as soon as changes are detected, useEffect is triggered and it sets the value inside your parent via the state setter passed through props.

If you need to pass data between components which don't have direct relationship, consider using Redux or React Context.

Edit: I just saw that your Modal is not functional. If you can't refactor it, you still can pass a function to the child which would trigger a setState inside your parent.

Upvotes: 1

Related Questions