React-Native button wrapping, a button

Question

I'm trying to wrap a button that already exists with the functionality of recordActivityTag . Right now the way it is working it is not capturing the function of the data from the first button. I need to follow tags throughout the app. That's why I've constructed recordActivityTag . That functionality works fine for events, except for buttons.

How do I call within the onPress - if that's possible - the action on a button from another screen? I know I need to pass in the outer prop into TouchableOpacity and then call the other button.

import * as React from "react";
import { Core } from "common";
import { TouchableOpacity } from "react-native";

interface BtnProps {
  readonly data: string
  readonly recordActivityTag:(tag: Core.ActivityTag) => void
}

export default class Button extends React.Component<BtnProps, {}> {
  constructor(props: BtnProps) {
    super(props);
  }

  render() {
    const { recordActivityTag } = this.props;
    return (
      <TouchableOpacity>
        onPress {() => recordActivityTag}
        {this.props.children}
      </TouchableOpacity>
    );
  }
}

Answer 1

Make sure that you give your function to the onPress prop of the TouchableOpacity component, and that you actually call recordActivityTag within it.

export default class Button extends React.Component<BtnProps, {}> {
  render() {
    const { recordActivityTag } = this.props;
    return (
      <TouchableOpacity onPress={() => recordActivityTag()}>
        {this.props.children}
      </TouchableOpacity>
    );
  }
}