How to pass props with value (image index) from component to main view. Building Image gallery in React Native

Question

I an trying to pass the Image index from "Card.js" component to change the background/cover image dinamicaly when the user press the Image from the Array.

In my Card.js I pass the array of images like this:

function Card({
  title,
  onPress,
  onPress2,
  coverUri,
  galleryUrls,
 
}) { return...

<FlatList
            contentContainerStyle={{ paddingStart: 20, paddingEnd: 20 }}
            horizontal
            showsHorizontalScrollIndicator={false}
            snapToAlignment="start"
            decelerationRate={"fast"}
            snapToInterval={100}
            data={galleryUrls}
            renderItem={({ item, index }) => (
              <TouchableWithoutFeedback onPress={onPress2}>
                <View>
                  <Image
                    uri={item}
                    preview={{ uri: item }}
                    tint="light"
                    style={styles.image}
                  />
                </View>
              </TouchableWithoutFeedback>
            )}
          />

What logic I can build to achieve this behaviour?

I suggest extracting the gallery from the card component into a separate component since its quite hard to achieve what you want with the current component you have. — caslawter, Sep 17 '22 at 09:17

score 0 · Answer 1 · answered Dec 09 '22 at 09:40

I show your code but I didn't understand it properly as you say I have to make a demo for you, you can reference that and figure it out as you want.

  const [image, setImage] = useState(Images.ARROW_RIGHT);

  const DATA = [
    { id: 1, image: Images.ARROW_RIGHT },
    { id: 2, image: Images.DOCUMENT_TEXT },
    { id: 3, image: Images.CAMERA },
    { id: 4, image: Images.BACK_ARROW },
    { id: 5, image: Images.LEFT_ARROW_GR },
  ];

  <Image source={image} style={{ height: 100, width: 100 }} />
      <FlatList
        data={DATA}
        horizontal
        keyExtractor={(item) => item.image}
        renderItem={({ item, index }) => {
          return (
            <TouchableOpacity
              onPress={() => {
               setImage(item.image);
              }}
            >
              <Image source={item.image} style={{ height: 50, width: 50 }} />
            </TouchableOpacity>
          );
        }}
      />

How to pass props with value (image index) from component to main view. Building Image gallery in React Native

1 Answers1