Question 175537 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can I navigate to another page using TouchableOpacity in Reactjs?

I want to navigate to another page using TouchableOpacity but failed
Navigating to other pages with Tab.Navigator works correctly. I created after that TouchableOpacity. Which is located in the middle of the other buttons and it should navigate to scanner page
Here is my code:

import React from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import MainScreen from "./view/MainPage";
import ProfileScreen from "./view/ProfilePage";
import ScanScreen from "./view/ScanPage";

const Tab = createBottomTabNavigator();

const App = ({ navigation }) => {
  return (
    <>
      <NavigationContainer>
        <Tab.Navigator
          style={styles.tabBar}
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === "main") {
                iconName = focused ? "home" : "home";
              } else if (route.name === "scan") {
                iconName = focused ? "qrcode-scan" : "qrcode-scan";
              } else if (route.name === "profile") {
                iconName = focused ? "account" : "account";
              }

              return (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
            },
            tabBarLabel: "",
            tabBarActiveTintColor: "#1573FE",
            tabBarInactiveTintColor: "gray",
          })}
        >
          <Tab.Screen
            name="main"
            component={MainScreen}
            options={{ headerShown: false }}
          />
         
          <Tab.Screen
            name="profile"
            component={ProfileScreen}
            options={{ headerShown: false }}
          />
        </Tab.Navigator>

        <TouchableOpacity
          style={styles.scanButton}
          onPress={() => navigation.navigate("ScanScreen")}
        >
          <MaterialCommunityIcons name="qrcode-scan" color="white" size={30} />
        </TouchableOpacity>
      </NavigationContainer>
    </>
  );
};

This is what the page where the TouchableOpacity navigate:

const ScanScreen = ({ navigation }) => {
  return (
    <View style={styles.screen}>
      <Text>This is the Scan screen</Text>
    </View>
  );
};
Tags:

2

Answers


  1. 0 
    <TouchableOpacity onPress={() => navigate('/details')}>

    {/* Your button content */}

    Login or Signup to reply.
  2. 0

    Create the custom component. Because navigation prop doesn’t exist. You can get navigation only under NavigationContainer component.

    import React from 'react';
import { TouchableOpacity } from 'react-native';

import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';

export const Button = () => {
  const navigate = useNavigation();

  return (
    <TouchableOpacity
      style={styles.scanButton}
      onPress={() => navigate('ScanScreen')}>
      <MaterialCommunityIcons name="qrcode-scan" color="white" size={30} />
    </TouchableOpacity>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search