RenderItem doesn't refresh when state change

Is this a bug report, a feature request, or a question?

A bug report

Have you followed the required steps before opening a bug report?

• I have read the guidelines regarding bug report.
• I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
• I have searched for existing issues and made sure that the problem hasn’t already been reported.
• I am using the latest plugin version.
• I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn’t a React Native bug?

it’s not a react native bug.

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

I just test to Android.

Is the bug reproductible in a production environment (not a debug one)?

I don’t use it to prod. I check in my phone with react-native run-android.

Environment

Environment: React: 16.8.6 React native: 0.60.5 react-native-snap-carousel: 3.8.2

Target Platform: Android (6.0)

Expected Behavior

I have 3 items. Each item is a button that opens the camera. Once we take the picture, it should show the picture instead of the button for each item.

Actual Behavior

When I take the photo, it updates the state but it does not display the photo.

Reproducible Demo

<Carousel
                        ref={(c) => { this._carousel = c; }}
                        data={[
                            {key: 0, urlImage: this.state.urlImage1,},
                            {key: 1, urlImage: this.state.urlImage2,},
                            {key: 2, urlImage: this.state.urlImage3,},
                        ]}
                        extraData={this.state}
                        renderItem={this._renderItem}
                        sliderWidth={screen.width}
                        sliderHeight={300}
                        itemWidth={300}
                        itemHeight={300}
                        containerCustomStyle={{
                            flexGrow: 0,
                        }}
                    />

_renderItem ({item, index}) {
       return (
           <View style={{ width: 300, height: 300, position: "relative", marginTop: 20 }}> 
               { item.urlImage == "data:image/jpeg;base64" ? 
                   <TouchableOpacity 
                       onPress={(e) => this.takePhoto(e, item.urlImage)}  
                       style={{ backgroundColor: 'transparent', borderColor: 'white', borderWidth: 1 ,width: 300, height: 300,  zIndex: 9999, elevation: 9999, position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' }}
                   >
                       <View>
                           <Icon 
                               type="MaterialIcons"
                               name="add-a-photo"
                               size={95}
                               color={"white"}
                           />
                       </View>
                   </TouchableOpacity>
                   : <View></View> 
               }
               <Image
                   source={{ uri : item.urlImage }}
                   style={{ width: 300, height: 300, backgroundColor: "#046381" }}
               />
           </View>
       );
   }

takePhoto(e, item) {
        ImagePicker.launchCamera(options, (response) => {
            if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } 
            else {
                const source = { uri: 'data:image/jpeg;base64,' + response.data };
                this.setState({
                    [item]: source.uri,
                    refresh: !this.state.refresh
                }, () => { console.log(this.state.refresh) });
            }
        })
    }

[kasim444]

Hi. I don’t know if you’ve solved the problem, but I had the same problem today. If you do as in the example below, the high probability of the problem will be solved. I hope it helps.

state = { refresh: false, };

<Carousel ref={© => { this._carousel = c; }} data={[ {key: 0, urlImage: this.state.urlImage1,}, {key: 1, urlImage: this.state.urlImage2,}, {key: 2, urlImage: this.state.urlImage3,}, ]} extraData={this.state.refresh} renderItem={this._renderItem} sliderWidth={screen.width} sliderHeight={300} itemWidth={300} itemHeight={300} containerCustomStyle={{ flexGrow: 0, }} />

takePhoto(e, item) { ImagePicker.launchCamera(options, (response) => { if (response.error) { console.log('ImagePicker Error: ', response.error); } else { const source = { uri: ‘data:image/jpeg;base64,’ + response.data }; this.setState({ [item]: source.uri, refresh: !this.state.refresh }, () => { console.log(this.state.refresh) }); this.setState({ refresh: !refresh}); } }) }

[DenisBevilacqua]

You can try use triggerRenderingHack().

useEffect( () => {
	carouselRef.current.triggerRenderingHack();
}, [ items ] );

...

<Carousel
	ref={carouselRef}
	data={items}
	renderItem={renderItem}
	onSnapToItem={_setCarouselIndex}
	sliderWidth={screenWidth}
	itemWidth={screenWidth}
/>