How to pass a touch event via props to a child component?

Question

I have a parent component of which I have a button and I want to pass onPress to the child component, I am new to React-Native and I have this doubt, you can help me ??

Answer 1

Basically that’s how:

class Pai extends React.Component { 
  onEventClick() {
    console.log('clicado');
  }
  render() {
    return (
      <div>
        <h3>Pai</h3>        
        <Filho onEventPropsClick={this.onEventClick.bind(this)} />
      </div>
    );
  }
}

class Filho extends React.Component {
  constructor(props){
    super(props);    
  }
  render() {
    const { onEventPropsClick } = this.props;
    return (
      <div>
        <h4>Filho</h4>
        <button onClick={() => onEventPropsClick()}>
          Clique Aqui
       </button>
      </div>
    );
  }
}

ReactDOM.render(<Pai/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root">Carregando ...</div>

Answer 2

Fala Hervesson.

You didn’t put the code, but I imagine it’s something like this

PARENT COMPONENT

import React, {Component} from 'react';
import ComponenteFILHO from './ComponenteFILHO';
...

export default class ComponentePAI extends Component {
  state = {
    parametro_para_filho: "",
  };

  handleOnPress = () => {
    // Faz alguma coisa legal ou não.
    this.setState({ parametro_para_filho: "uma coisa legal" })
  };

  render() {
    return(
      <View>
      <TouchableOpacity onPress={() => this.handleOnPress()}>
        <Text>Aperte aqui</Text>
      </TouchableOpacity>
      <ComponenteFILHO handleOnPress={() => this.handleOnPress()} dePaiPraFilho={this.state.parametro_para_Filho} />
     </View>
    );
  }
}

In the child component that function or parameter comes via Props comes via props.

Component Filho

import React from 'react';
import ...

const ComponenteFILHO = props => ( // pode usar desestruturação.
  <View>
    <TouchableOpacity onPress={() => props.handleOnPress()}>
      <Text>Clique aqui e veja o texto abaixo mudando</Text>
    </TouchableOpacity>
    <Text>{props.dePaiPraFilho}</Text>
  </View>
);

I did not do any styling there, but it is necessary for you to see the final result. Send everything to the middle.