react native How to make a callback from a function of an other class like a component

Question

Greeting to all, I am using a overlay from teaset, the overlay perform modal rendering,see the demo code below. I would like to separate this function into other class, however, I am not sure how to add a callback. I know how child component did the passing value to parent component, but for the function, I have no idea. please guide me how to do the callback from a function.

The Demo

showPop(type, modal, text) {
  let overlayView = (
    <Overlay.PopView
      style={{ alignItems: 'center', justifyContent: 'center' }}
      type={type}
      modal={modal}
      ref={v => this.overlayPopView = v}
    >
      <View 
        style={{
          backgroundColor: Theme.defaultColor, 
          minWidth: 260, 
          minHeight: 180, 
          borderRadius:15, 
          justifyContent: 'center', 
          alignItems: 'center'
        }}
      >
        <Label type='title' size='xl' text={text} />
        {modal ? <View style={{ height: 60 }} /> : null}
        {modal ? <Button title='Close' onPress={() => this.overlayPopView && this.overlayPopView.close()} /> : null}
      </View>
    </Overlay.PopView>
  );
  Overlay.show(overlayView);
}

what I do now is make it as a component to use but render a null view

Parent component:

_onPressModelItem = item => {console.log(item)}

render() {
    return <PopMenu showMenu={this.state.showMenu} onPressModelItem={this._onPressModelItem} />
}

Child Component

componentDidMount() {
  if (this.props.showMenu == true) {
    this.showPop('zoomIn', false, 'Pop zoom in')
  } else {
    this.closeMenu
  }
}

_onPress(item) {
  this.props.onPressModelItem(item)
}

showPop(type, modal, text) {
  let overlayView = (
    <Overlay.PopView
      type={type}
      modal={modal}
      ref={v => (this.overlayPopView = v)}>
      <View style={styles.container}>
        <FlatList
          style={styles.listContainer}
          data={tempdata.ModelList}
          keyExtractor={(item, index) => index.toString()}
          renderItem={this.renderItem}
          renderItem={({ item }) => <Button buttonStyle={styles.item} title={item.value}
            onPress={() => this._onPress(item)} />}
          numColumns={2}
        />
      </View>
    </Overlay.PopView>
  )
  Overlay.show(overlayView)
}

render() {
  return <View></View>
}

I want my child component to be a function like the demo does but in the another class.

Thanks!

Answer 1

I don't fully understand your problem. But if I understand correctly the _onPressModelItem is not called?

Did you bind "this" to the function _onPress? If you did not I'm guessing that's your problem.

It should look something like this:

constructor(props) {
    super(props);
    this._onPress = this._onPress.bind(this);
}

And here is why you should do this: https://medium.com/shoutem/react-to-bind-or-not-to-bind-7bf58327e22a