Search code examples
react-nativenative-base

NativeBase: Button does not work, but ReactNative's Button does

Experiencing a strange issue in my React Native project for Android.

Using React-Navigation, I have a component with a button inside. This button should navigate to a new screen.

Thing is, the built-in button of React Native works like a charm, while the button of Native Base does not. I am completely confused, even more because I use this Native Base Button in another location, too. And there it works fine.

What is going on here?

Here, you see the application works with the built-in React Native button:

enter image description here

On the opposite, using the button of Native Base, it not only does not work, even styles are not applied.

enter image description here

Here is the code with the React Native button:

import React from "react";
import { Button, View, Text, StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";

type Props = { navigation: any };

const ButtonTestScreen: React.FC<Props> = ({ navigation }) => {
  return (
    <View>
      <Button
        title="Hi i am a button"
        onPress={() => navigation.navigate("Details")}
      ></Button>
    </View>
  );
};

export default withNavigation(ButtonTestScreen);

And the code with Native Base button:

import React from "react";
import { Button, View, Text, StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";
import ButtonNavigate from "../../components/atoms/ButtonNavigate/ButtonNavigate";

type Props = { navigation: any };

const ButtonTestScreen: React.FC<Props> = ({ navigation }) => {
  return (
    <View>
      <ButtonNavigate
        title="Hi i am a button"
        navigateTo="Details"
      ></ButtonNavigate>
    </View>
  );
};

const styles = StyleSheet.create({
  button_style: {
    backgroundColor: "red"
  },
  text_style: {
    color: "#000",
    fontSize: 30
  }
});

export default withNavigation(ButtonTestScreen);

And the respective ButtonNavigate component itself:

import React from "react";
import { StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";
import { Button, Text } from "native-base";

type Props = {
  title: string,
  navigateTo: string,
  navigation: any
};

const ButtonNavigate: React.FC<Props> = ({ title, navigateTo, navigation }) => {
  return (
    <Button
      rounded
      transparent
      style={styles.button_style}
      onPress={() => navigation.navigate(navigateTo)}
    >
      <Text style={styles.text_style}>{title}</Text>
    </Button>
  );
};

const styles = StyleSheet.create({
  button_style: {
    backgroundColor: "red"
  },
  text_style: {
    color: "#151414"
  }
});

export default withNavigation(ButtonNavigate);
Solution

  • Folks, reason for this strange behavior is the "rounded" property of Native Base's button. In my application, somehow it causes the button to become non-clickable.

    Maybe contributors of Native Base know what to do with this problem, so if you read this, maybe you have an idea.

    Solution for my now was simply removing "rounded".

    Native Base: 2.13.8 React-Navigation: 4.0.10