I have an image in each TouchableOpacity and I would like to change the picture in every onPress function so she could looked like shes pressed in (for example: remove the color from to picture and changes it to black and white or make a light gray shadow on the picture ). and Reverse (when you click shes changing back to the original picture (Press:true/false). I have a stateless Component and no class.

My Component :

export default function Recipie({ navigation, route }) {
  const recipies = GetRecipies();

  return (
    <View style={{ flexGrow: 1, flex: 1 }}>
      <ScrollView>
        {recipies.map((u, i) => {
          return (
            <View key={i}>
              <Text
                onPress={navigation.navigate}
                style={{
                  fontSize: 25,
                  fontFamily: "Cochin",
                  textAlign: "center",
                }}
              >
                {u._recipieName}
              </Text>
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate("SingleRecipieScreen", { u });
                }}
              >
                <Image
                  style={{
                    height: 200,
                    width: 350,
                    borderRadius: 80,
                    alignSelf: "center",
                  }}
                  source={{ uri: u._imgUrl }}
                />
              </TouchableOpacity>

              <Text
                style={{
                  fontSize: 17,
                  fontFamily: "Cochin",
                  textAlign: "center",
                }}
              >
                {u._recipieDescription}
              </Text>

              <TouchableOpacity
                style={{ flex: 1, flexDirection: "column", flexGrow: 1 }}
              >
                {Show(u._preparationTime)}
              </TouchableOpacity>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
}

CodePudding user response：

Try to use position absolute in View to cover button , and useState for styles, example :

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View,Image } from "react-native";

const App = () => {
  const [isPressed, setIsPressed] = useState(0);
  const onPress = () => setIsPressed(!isPressed);

  return (
    <View style={styles.container}>

      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
      <View style={isPressed && styles.pressedButtonStyle} />
        <Text> {isPressed ? "Pressed" : " Press Here"}</Text>
      <Image
        style={ styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10,
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
  },
    tinyLogo: {
    width: 50,
    height: 50,
  },
  pressedButtonStyle: {
    position:"absolute",
    width:"100%",
    height:"100%",
    backgroundColor:'black',
    opacity:0.6,
    zIndex:100,
  }
});

https://snack.expo.dev/ixeOwAg3o