CODEWITHSUNDEEP
react-nativeswipe
grigy
grigy

Reputation: 6836

React-native: how to change row's content or style while swiping?

I want to have a functionality similar to Google Inbox (demo), when swiping an item causes a change of the background color and size of the icon.

My implementation has a ListView of Swipeable components as rows and I want to change the content or style of a row (in the right pane for example) based on the swipe position. In order to have the ListView to re-render while swiping I added a pos state which I set using the onPanAnimatedValueRef prop of the Swipeable.

The problem is that the ListView doesn't re-render and nothing changes.

<ListView
    ...
    renderRow={(data) => (
                <Swipeable rightContent={
                        <View><Text>{this.state.pos}</Text></View>
                    }
                    ...
                    onPanAnimatedValueRef={(pan) => { 
                        pan.addListener(val => {
                            this.setState({
                                pos: val.x
                            });
                    }}>
                    {data}
                </Swipeable>
    )}
/>

Do you see any problem with this?

Upvotes: 2

Views: 1400

Answers (1)

user1971598
user1971598

Reputation:

I would wrap the Swipeable in your own component, hold state there and your animation logic. It is not the ListView's responsibility to rerender the whole thing since the data hasn't changed, just your row itself.

Alternatively, you could change the data via setState to the ListView's data source (which presumably was based in state and hence force a rerender but this is a less efficient path)

Upvotes: 2

Related Questions