meliorence / meliorence/react-native-snap-carousel

RenderItem doesn't refresh when state change

Open
#610 9 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

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?
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) });
            }
        })
    }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Carousel usage and _renderItem example in the issue, then reproduce the Android behavior using the supplied React Native versions and camera flow. Inspect how the Carousel handles data and extraData when state changes. Done means each captured image replaces its button in the corresponding item after state updates.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.