Home > front end >  onPress event not called on react-native element
onPress event not called on react-native element

Time:03-08

I am using react-native-elements to add an Avatar and want to perform an action when the Avatar is pressed.

import { Avatar } from 'react-native-elements';

        <Avatar
            size={50}
            rounded
            title="Mb"
            containerStyle={{ backgroundColor: '#3d4db7' }}
            onPress={() => addEvent}
          />

  const addEvent = async () => {
    console.log("add Event pressed")
    navigation && navigation.navigate("addEvent")
  }

I also tried onPress={() => addEvent()} and onPress={addEvent}, nothing worked

CodePudding user response:

Try to wrap the avatar within a Pressable Component

import { Pressable } from 'react-native'

<Pressable onPress={addEvent}> 
  <Avatar
    size={50}
    rounded
    title="Mb"
    containerStyle={{ backgroundColor: '#3d4db7' }}
  />
</Pressable>

CodePudding user response:

because Avatar doesn't provide onPress prop. onPress prop is only available for Button, touchableOpacity, TouchableHighlight, TouchableNativeFeedback, and TouchableHighlight

  • Related