Getting ReferenceError: Can't find variable: TouchableOpacity due to a method in onPress

Question

This is with reference to a react native app. I have created a navigation reference file to navigate to screens from components not part of navigator. Below is the code for it.

import { NavigationActions } from 'react-navigation';

export const setNavigator = (nav) => {
    navigator = nav;
}

export const navigate = (routeName, params) => {
    navigator.dispatch(
        NavigationActions.navigate({
            routeName: routeName,
            params: params
        })
    );
};

to use it I just import import {navigate} from '../../src/navigationRef'; and navigate('ScreenName');

I have a made one component, whenever this component is clicked it should navigation to QuestionScreen, below is the code

return (
        <TouchableOpacity  onPress={() => {navigate('QuestionScreen')}}>
        <View style={{marginTop: 8, backgroundColor: 'white', padding: 8}}>
            <Text style={styles.questionStyle} >{question}</Text>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 16 }} >
                <Text style={styles.nameStyle} >{name}</Text>
                <Text style={styles.timeStyle} > 2 days ago </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: 16, justifyContent: 'space-between' }} >
                <View style={{ flexDirection: 'row' }} >
                    <Text style={{ fontSize: 12, color: '#6C6C6C' }} >Answers {noOfAnswers}</Text>

                    <View style={{flexDirection: 'row', marginLeft: 16}}>
                        {/* <MaterialIcons name="trending-up" size={24} color="#CA534C" /> */}
                        <Image   style={{width: 24, height:  24}} source={ require('../../assets/heart-pulse-line.png')} />
                        <Text style={{ fontSize: 12, color: '#6C6C6C' }} >{noOfInsightfuls}</Text>
                    </View>
                </View>
                <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#CA534C' }} >{tag}</Text>
            </View>
        </View>
        </TouchableOpacity>
    );

tapping this component results in below error

ReferenceError: Can't find variable: TouchableOpacity

node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0 node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch node_modules\regenerator-runtime\runtime.js:293:29 in invoke node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch node_modules\regenerator-runtime\runtime.js:154:27 in invoke node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0 node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue

[native code]:null in flushedQueue

[native code]:null in invokeCallbackAndReturnFlushedQueue

if I use a console.log in onPress method of TouchableOpacity, it works fine.*

const navigateToQuestionScreen = () => { navigate('QuestionScreen'); }, <TouchableOpacity onPress={() => { navigateToQuestionScreen()} }>, now it's working, Do comment if you know the reason for it. — Siddharth
@GuruparanGiritharan, yeah I had imported it, I did a workaround, now it's working. Thanks for looking into it though. — Siddharth

nazmul nazmul · Accepted Answer · 2020-10-20T06:51:04

you have to import TouchableOpacity from react native , like following

import {TouchableOpacity} from 'react-native;

Getting ReferenceError: Can't find variable: TouchableOpacity due to a method in onPress

1 Answers