TouchableOpacity onpress is not working with Navigation

Question

I am using react native Navigation and I put a switch inside the header to toggle between light and dark theme while using touchableOpacity onPress prop. No error logs, and when I press the switch, the touchableOpacity onpress is not firing up. I did share my App.js code, I would appreciate if you can see and point where I am doing wrong.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useState} from 'react';
import {StatusBar, View, TouchableOpacity} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import Home from './src/screens/Home';
import Details from './src/screens/Details';
import {createStackNavigator} from '@react-navigation/stack';
import {DarkTheme, Text, Title, TouchableRipple, Switch} from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Stack = createStackNavigator();


const App = () => {

  const [isDartheme, setDarkTheme] = useState(false);

  const togglemethod = () => {
      console.log("Called!");
    setDarkTheme(!isDartheme);
  };


  return (
    <>

          
      <NavigationContainer>
        <StatusBar barStyle="dark-content" />
        <Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{
              headerTitle: (props) => (
                <View style={{ flexDirection: 'row'}}>
                <View>
                  <Title style={{paddingLeft: 130}}>
                    <Text>Home</Text>
                  </Title>
                </View>
          
                
                  <View >
                    <TouchableOpacity
                      onPress={ () => {togglemethod() }
                      }
                      centered ={true}
                      >
                          <MaterialCommunityIcons
                        name={isDartheme?'moon-waning-crescent': 'white-balance-sunny'}
                        size = {25}
                        color= "blue"
                        style={{paddingLeft: 110, paddingBottom:5, width: '200%'}}
                        > 
                      <Switch
                        value={isDartheme}
                        color="red"
                        style={{paddingLeft: 8}}
                      />
                      </MaterialCommunityIcons>
                    </TouchableOpacity>
                  </View>
                </View>
                  
              ),
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </> 
  );
};

export default App;

import TouchableOpacity from react-native instead of react-native-gesture-handler — Guruparan Giritharan, Jul 21 '20 at 14:11
I have even edited the question. just others not assume as you. I am still having trouble to solve this issue. — hanan, Jul 21 '20 at 14:49
But what are you effectively clicking, the switch? You should handle it within the switch then, by the method `onValueChange`, can you please try it? Or try removing the switch and see if it's working. — Konstantin, Jul 21 '20 at 15:08
Yes modified to like this ```onValueChange = {() => console.log("pressed!")}``` just to see "pressed!" output in the console but nothing outputted. now I am thinking more that the issue is in the stack. please help me with this. — hanan, Jul 21 '20 at 15:16

score 0 · Answer 1 · answered Jul 21 '20 at 14:51

0

There is a typo on the method that you are calling change the onPress from togglemlethod to togglemethod

answered Jul 21 '20 at 14:51

Gabriel Donadel Dall'Agnol

660
1
7
22

I am still facing the issue, yeah it is true there was a typo. I corrected and still not firing up. did you try to run it on your own? – hanan Jul 21 '20 at 15:03
I have even edited the question. just others not to assume as you. I am still having trouble to solve this issue. – hanan Jul 21 '20 at 15:05

score 0 · Answer 2 · answered Jul 21 '20 at 17:13

0

Here is the working version of the code,

You should not place the Switch inside the icon which results in an error
You can use the switch itself to trigger the toggle,

You will have to change the styles according to your need, but this works fine on android.

 <Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            headerTitle: (props) => (
              <View style={{ flexDirection: 'row' }}>
                <View>
                  <Title style={{ paddingLeft: 130 }}>
                    <Text>Home</Text>
                  </Title>
                </View>

                <View>
                  <TouchableOpacity
                    onPress={() => {
                      togglemethod();
                    }}
                    centered={true}
                    style={{ flexDirection: 'row',alignItems:'center' }}>
                    <Switch
                      value={isDartheme}
                      color="red"
                      onValueChange={() => togglemethod()}
                    />
                    <MaterialCommunityIcons
                      name={
                        isDartheme
                          ? 'moon-waning-crescent'
                          : 'white-balance-sunny'
                      }
                      size={25}
                      color="blue"
                      style={{
                        paddingBottom: 5,
                      }}></MaterialCommunityIcons>
                  </TouchableOpacity>
                </View>
              </View>
            ),
          }}
        />
      </Stack.Navigator>

answered Jul 21 '20 at 17:13

Guruparan Giritharan

15,660
4
27
50

i tested this on Android and it worked fine, are you having any other wrappers that you have not mentioned here ? – Guruparan Giritharan Jul 22 '20 at 06:33
the component ```component={Home}``` contains code doing some search. but how it could affect the switch I didn't understand. – hanan Jul 22 '20 at 06:37
Here is the Home component code https://pastebin.com/jCw6avhW – hanan Jul 22 '20 at 06:41
Not the home component your navigator or App.js – Guruparan Giritharan Jul 22 '20 at 06:43
I pasted it here [https://pastebin.com/F6gvASxZ ] take a look – hanan Jul 22 '20 at 06:51
https://snack.expo.io/@guruparan/nervous-orange, see it works – Guruparan Giritharan Jul 22 '20 at 07:09
it is showing an error! **unable to resolve Module @react-navigation/native.js** – hanan Jul 22 '20 at 07:15
Maybe some cache issue, refresh and try again maybe? because i can see the output – Guruparan Giritharan Jul 22 '20 at 07:19
I add all the codes needed and still having some issue take a look plz https://snack.expo.io/_9wxOUnJW – hanan Jul 22 '20 at 07:38
yours is working, I saw it but when added some more codes like search.js it is not working I dont know what the issue is. – hanan Jul 22 '20 at 07:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/218340/discussion-between-hanan-and-guruparan-giritharan). – hanan Jul 22 '20 at 07:45

TouchableOpacity onpress is not working with Navigation

2 Answers2