CODEWITHSUNDEEP
reactjsreact-native
Emily
Emily

Reputation: 151

Navigation not working on custom button react native

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>
  );
}

Upvotes: 0

Views: 465

Answers (2)

Sergey
Sergey

Reputation: 1076

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>
  );
};

Upvotes: 0

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16354

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>
  );
};

Upvotes: 1

Related Questions