CODEWITHSUNDEEP
javascriptreactjsimagereact-nativeslide
Rudson Rodrigues
Rudson Rodrigues

Reputation: 345

the library "react-native-snap-carousel" is not processing the card image

I am new in react native and I was trying to use the "react-native-snap-carousel". The carousel is working with the parameters in the "carouselItems" variable as I sent, but the image is not working. I supoused to place it at the Card as a background image, with a short description with the same parameter array, but it is not working.

Can anyone help me to set it?

the array used to fill the cards:

const carouselItems = [
  {
    title: "Doce",
    text: "[TEXTO DESCRITIVO]",
    thumbnail: "assets/splash.png",
  },
  {
    title: "Salgado",
    text: "[DESCRIÇÃO]",
    thumbnail: "assets/splash.png",
  },
]

the folder structure is: homemade-app / assets / splash.png

return (
      <View style={styles.item}>
        <ParallaxImage
          source={{ uri: item.thumbnail }}
          containerStyle={styles.imageContainer}
          style={styles.image}
          parallaxFactor={0.2}
          {...parallaxProps}
        />
        {item.thumbnail}
        <Text style={styles.title} numberOfLines={2}>
          {item.title}
        </Text>
      </View>
    )
  }

  const goForward = () => {
    carouselRef.current.snapToNext();
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={goForward}>
        <Text>go to next slide</Text>
      </TouchableOpacity>
      <Carousel
        layout={"default"}
        ref={ref => carousel = ref}
        data={carouselItems}
        sliderWidth={screenWidth}
        sliderHeight={screenWidth}
        itemWidth={screenWidth - 60}
        renderItem={renderItem}
        onSnapToItem={index => setState({ activeIndex: index })}
        hasParallaxImages={true} />
    </View>
  );
}

I saw the article about how to handle local file with assets, but I still could not make it work properly.

Link to the article: (https://dev.to/fdefreitas/how-to-obtain-a-uri-for-an-image-asset-in-react-native-with-expo-7bm)

Upvotes: 0

Views: 1375

Answers (1)

anthony willis mu&#241;oz
anthony willis mu&#241;oz

Reputation: 2478

If you are using expo. First of all try with a static route remember you need full path not assets/myimage this is wrong, because sometime use it from array give problems like in this question Render images sources from parsed array of objects in react native .

array

const carouselItems = [
  {
    title: "Doce",
    text: "[TEXTO DESCRITIVO]",
    thumbnail: require("./../assets/splash.png"),
  },
  {
    title: "Salgado",
    text: "[DESCRIÇÃO]",
    thumbnail: require("./../assets/splash.png"),
  },
]

<ParallaxImage
    source={require('@expo/snack-static/yourimage.png')}
     ...
/>

or put your image in same folder

<ParallaxImage
    source={require('./your-image.png')}
     ...
/>

Upvotes: 2

Related Questions