How to call function from different component bound to flatlist in React Native

Question

I am creating a chat application in React Native that receives different "message types" as a response. One of them contains an array of buttons that I am currently rendering in a Flatlist in Component "ChatQuickReply" that looks like this:

import React from "react";
import {
  StyleSheet,
  FlatList,
  View,
  TouchableOpacity,
  Text
} from "react-native";

class ChatQuickReply extends React.Component {
  constructor(props) {
    super(props);
  }

  renderItem({ item }) {
    return (
      <TouchableOpacity onPress={this._onPressQuickReply}>
        <View style={styles.quickButton}>
          <Text style={styles.quickButtonText}>{item.title}</Text>
        </View>
      </TouchableOpacity>
    );
  }

  _onPressQuickReply = () => {
    alert(Hello);
  };

  render() {
    return (
      <View>
        <FlatList
          data={this.props.buttons}
          keyExtractor={(item, index) => "key" + index}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
}

I am rendering this component in a different component also in a Flatlist which works fine.

The problem is, that I am not able to call the function that I am assigning to my TouchableOpacity. How can I call this function from a different component?

score 0 · Accepted Answer · answered Apr 10 '19 at 08:26

0

I think, what you can try to trigger onPress event for your TouchableOpacity component.

You need ref for this.

ref={touchableOpacity => this._touchableOpacity = touchableOpacity}

then when you want to launch onPress without clicking it just call

this._touchableOpacity.touchableHandlePress();

answered Apr 10 '19 at 08:26

Uladzislau Ulasenka

582
5
14

Thanks for your reply! I am very new to react-native...could you elaborate a little bit more on where to add what? – Crazy Sonic Apr 10 '19 at 11:00
Ok. Where do you want to call method? In which component or by clicking where? – Uladzislau Ulasenka Apr 10 '19 at 11:05
I want to call the method in my MainChat component which is the parent component of QuickReply. Ergo I am rendering the QuickReply in my MainChat and want to click there on the TouchableOpacity to call its method. – Crazy Sonic Apr 10 '19 at 11:09
In this case best solution depend on react version https://stackoverflow.com/a/37950970/8240061 – Uladzislau Ulasenka Apr 10 '19 at 11:21
The problem is that I need to create individual refs for all items in my flatlist...do you know how to achieve this and how to access this particular ref? – Crazy Sonic Apr 10 '19 at 12:33

score 0 · Answer 2 · answered Apr 10 '19 at 08:49

Depending on the relationship between both components, if the ChatQuickReply reply is a parent component, you can pass the function in the child as props and call it.

import React from "react";


class ChatQuickReply extends React.Component {

renderItem({ item }) {
  return (
     <TouchableOpacity onPress={this._onPressQuickReply}>
       <View style={styles.quickButton}>
       <Text style={styles.quickButtonText}>{item.title}</Text>
     </View>
     </TouchableOpacity>
  );
 }

_onPressQuickReply = () => {
  alert(Hello);
 };

render() {
  return (
    <View>
      <FlatList
        data={this.props.buttons}
        keyExtractor={(item, index) => "key" + index}
        renderItem={this.renderItem}
      />
      **<ChildComponent clickParentFunction={this._onPressQuickReply} />**
    </View>
  );
 }

}

class ChildComponent extends React.Component {

  onClick = () => {
     const {clickParentFunction} = this.props

     clickParentFunction() // We can call it here
  }

  // We create a trigger to the onclick
}

or you can take the _onPressQuicklyReply function to the component that renders both components and pass it in to make it more generic

import OtherComponent from './Othercomponent';

class ParentComponent {
    _onPressQuickReply = () => {
       alert(Hello);
    }

    return (
      <View>
        <ChatQuicklyReply onParentFunction={this._onPressQuickly}>
        <OtherComponent onParentFunctionCall={this._onPressQuickly} />
      </View>
    )
}

I have thinked about this solution too. But I think, what problem is that TouchableOpacity is imported from "react-native" and we should have access to this component, if we want to pass function with props — Uladzislau Ulasenka, Apr 10 '19 at 08:53
The QucikReply component is the child component of my MainChat component. I am also not 100% sure where to add which feature. I tried your last answer, but without any luck. — Crazy Sonic, Apr 10 '19 at 11:01
so do you want to trigger an onclick in the child component from the parent, or do you want to call a function in the child component? Can you explain what you want to achieve with the call so I can think of the actual problem you are trying to solve. — Jolaade Adewale, Apr 10 '19 at 13:17

How to call function from different component bound to flatlist in React Native

2 Answers2