Navigation not working on custom button react native

Question

hope someone would help me with this problem. I have create my own buttons and when I`m calling them as a component in a screen onPress navigation is not working, only in the Button Component from react native. This is my code:

Custom Button:

export const MediumButton = ({ title }) => {
  return (
    <TouchableOpacity style={styles.mediumButton}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

And this is the code of screen that I`m calling the MediumButton:

import { MediumButton } from "../../components/Button/Button";

export default function Home({ navigation }) {
  return (
    <View style={global.container}>
      <View style={styles.container}>
        <Text style={styles.titleText}>Miresevini ne Hajde App</Text>
        <MediumButton
          title="Kycu"
          onPress={() => navigation.navigate("Register")}
        />
        <MediumButton
          title="Regjistrohu"
          onPress={() => navigation.navigate("Login")}
        />
      </View>
    </View>
  );
}

Guruparan Giritharan · Accepted Answer · 2020-11-07 13:39:51Z

1

You have to use the onPress prop that you are passing like below

export const MediumButton = ({ title,onPress }) => {
  return (
    <TouchableOpacity style={styles.mediumButton} onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

answered Nov 7, 2020 at 13:39

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emily Over a year ago

Thank you for the answer its working, but not inside the Formik cause I`m using Formik library for Validation. This error appears: createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. ... You likely forgot to export your component from the file it's defined in

Guruparan Giritharan Over a year ago

That error generally appears when you mix up the default import with named one, can you check that, i dont think that formik does any specific change

Sergey · Accepted Answer · 2020-11-07 13:42:27Z

0

Try to pass the onPress handler to TouchableOpacity:

export const MediumButton = ({ title, onPress }) => {
  return (
    <TouchableOpacity style={styles.mediumButton} onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

answered Nov 7, 2020 at 13:42

Sergey

1,0869 silver badges20 bronze badges

Collectives™ on Stack Overflow

Navigation not working on custom button react native

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related