OnPress() using TouchableOpacity is not working in react-native application

Question

When I click the RoundedButton the TouchableOpacity works i.e the opacity of the button reduces but the onPress function doesn't work, the data being passed to the onPress function is correct(as given in the code below). Also, when I tried to console.log("something") inside the onPress function, it doesn't get printed in the console of my terminal.

Here I have the code with function component.

Focus.js file

import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { TextInput } from "react-native-paper";
import { RoundedButton } from "../../component/RoundedButton";

export const Focus = ({ addSubject }) => {
  const [tmpItem, setTmpItem] = useState();

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>What would you like to focus on?</Text>
        <View style={styles.inputContainer}>
          <TextInput
            style={{ flex: 1, marginRight: 20 }}
            onSubmitEditing={({ nativeEvent }) => {
              setTmpItem(nativeEvent.text);
              console.log("tmpItem value set " + tmpItem);
            }}
          />
          <RoundedButton
            size={50}
            title="+"
            onPress={() => {
              console.log("value passed!");
              addSubject(tmpItem);
            }}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  titleContainer: {
    flex: 0.5,
    padding: 10,
    justifyContent: "center",
  },
  title: {
    color: "white",
    fontWeight: "bold",
    fontSize: 21,
  },
  inputContainer: {
    paddingTop: 10,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
});

RoundedButton.js File

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

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  ...props
}) => {
  return (
    <TouchableOpacity style={[styles(size).radius, style]}>
      <Text style={[styles.text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

const styles = (size) =>
  StyleSheet.create({
    radius: {
      borderRadius: size / 2,
      width: size,
      height: size,
      alignItems: "center",
      justifyContent: "center",
      borderColor: "white",
      borderWidth: 2,
    },
    text: {
      color: "white",
      fontSize: size / 3,
    },
  });

App.js file

import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { Focus } from "./src/features/focus/Focus";

export default function App() {
  const [focusSubject, setFocusSubject] = useState(null);

  return (
    <View style={styles.container}>
      {focusSubject ? (
        <Text style={{ flex: 1, color: "white", fontSize: 30 }}>
          Here is where I am going to build a timer
        </Text>
      ) : (
        <Focus addSubject={setFocusSubject} />
      )}
      <Text style={{ flex: 1, color: "white", fontSize: 30 }}>
        {focusSubject}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 50,
    backgroundColor: "#252250",
  },
});

score 0 · Answer 1 · answered Jun 09 '21 at 04:01

you need to extract your onPress props in RoundButton.js and pass to your TouchableOpacity

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  onPress,//<===this
  ...props
}) => {
  return (
    <TouchableOpacity onPress={onPress} style={[styles(size).radius, style]}>
      <Text style={[styles.text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

score 0 · Answer 2 · answered Jun 09 '21 at 04:08

it's seem that you forget to pass onPress function to TouchOpacity

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  onPress,
  ...props
}) => {
  return (
    <TouchableOpacity onPress={onPress} style={[styles(size).radius, style]}>
      <Text style={[styles.text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

score 0 · Answer 3 · answered Jun 09 '21 at 04:42

Now It's Working

Focus.js file

import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { TextInput } from "react-native-paper";
import { RoundedButton } from "../../component/RoundedButton";

export const Focus = ({ addSubject }) => {
  const [tmpItem, setTmpItem] = useState();

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>What would you like to focus on?</Text>
        <View style={styles.inputContainer}>
          <TextInput
            style={{ flex: 1, marginRight: 20 }}
            onSubmitEditing={({ nativeEvent }) => {
              setTmpItem(nativeEvent.text);
              console.log("tmpItem value set " + tmpItem);
            }}
          />
          <RoundedButton
            size={50}
            title="+"
            onPress={() => {
              console.log("value passed!");
              addSubject(tmpItem);
            }}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  titleContainer: {
    flex: 0.5,
    padding: 10,
    justifyContent: "center",
  },
  title: {
    color: "white",
    fontWeight: "bold",
    fontSize: 21,
  },
  inputContainer: {
    paddingTop: 10,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
});

RoundedButton.js File

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

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  onPress,
  ...props
}) => {
  return (
    <TouchableOpacity onPress={onPress} style={[styles(size).radius, style]}>
      <Text style={[styles.text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

const styles = (size) =>
  StyleSheet.create({
    radius: {
      borderRadius: size / 2,
      width: size,
      height: size,
      alignItems: "center",
      justifyContent: "center",
      borderColor: "white",
      borderWidth: 2,
    },
    text: {
      color: "white",
      fontSize: size / 3,
    },
  });

App.js file

import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { Focus } from "./src/features/focus/Focus";

export default function App() {
  const [focusSubject, setFocusSubject] = useState();

  return (
    <View style={styles.container}>
      {focusSubject ? (
        <Text style={{ flex: 1, color: "white", fontSize: 30 }}>
          Here is where I am going to build a timer
        </Text>
      ) : (
        <Focus addSubject={setFocusSubject} />
      )}
      <Text style={{ flex: 1, color: "white", fontSize: 30 }}>
        {focusSubject}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 50,
    backgroundColor: "#252250",
  },
});

OnPress() using TouchableOpacity is not working in react-native application

3 Answers3