CODEWITHSUNDEEP
javascriptreact-native
Surezluvy
Surezluvy

Reputation: 93

React Native TouchableOpacity is auto clicked

I put console.log('Hello') to my button, to testing my button is work or not (actualy im using this button for navigation), but when i try to reload my app, my console show Hello. I didn't press my button yet, but when i try to press it my console didn't show hello. Sorry for my bad english

import React from 'react';
import {View, TouchableOpacity, Image} from 'react-native';
import s from './SFooter';
import {useNavigation} from '@react-navigation/native';

const Footer = () => {
  const navigation = useNavigation();
  let active = 0;
  return (
    <View style={s.footerWrapper}>
      <View style={s.iconsWrapper}>
        <View style={s.iconWrapper}>
          <TouchableOpacity
            onPress={(console.log('asda'), () => navigation.navigate('Home'))}>
            <Image
              style={s.icon}
              source={require('../../assets/icon/home.png')}
            />
            {active == 0 ? <View style={s.iconActive} /> : <View />}
          </TouchableOpacity>
        </View>
        <View style={s.iconWrapper}>
          <TouchableOpacity>
            <Image
              style={s.icon}
              source={require('../../assets/icon/book.png')}
            />
            {active == 1 ? <View style={s.iconActive} /> : <View />}
          </TouchableOpacity>
        </View>
        <View style={s.iconWrapper}>
          <TouchableOpacity>
            <Image
              style={s.icon}
              source={require('../../assets/icon/newspaper.png')}
            />
            {active == 2 ? <View style={s.iconActive} /> : <View />}
          </TouchableOpacity>
        </View>
        <View style={s.iconWrapper}>
          <TouchableOpacity>
            <Image
              style={s.icon}
              source={require('../../assets/icon/user.png')}
            />
            {active == 3 ? <View style={s.iconActive} /> : <View />}
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

export default Footer;

Upvotes: 2

Views: 595

Answers (1)

dotsinspace
dotsinspace

Reputation: 701

Please do check your code twice. You cannot call any function directly onPress. what i mean to say is following

Wrong:

   <TouchableOpacity
            onPress={(console.log('asda'), () => navigation.navigate('Home'))}

Correct

   <TouchableOpacity
            onPress={() => (console.log('asda'), () => navigation.navigate('Home'))}>

Upvotes: 2

Related Questions