renderHiddenRow flash when switch page

[Victoriayangx]

All implement is very good but when i switch the page ,the renderHiddenRow flash once. i can see the red hidden region in seconds,then it disapper. then everything is ok.when i navigate to another page, and goBack ,the hidden region flash again. How can i solve it？

Source Code: 1、renderRow(rowData, sectionID, rowID) { return ( <TouchableHighlight underlayColor="#DDDDDD" onPress={() => this.clickMinimize(rowData, sectionID, rowID)} >

I am {rowData.row} in a SwipeListView I am {""+rowData.isSelect} ); }

2、renderHiddenRow(rowData, sectionID, rowID, rowMap) { return ( <TouchableOpacity onPress={() => this._onPressRow(rowID, rowData, sectionID, rowMap)}>

); }

[jemise111]

Hey @Victoriayangx is the SwipeListView being rendered inside a tabbed view of some sort by any chance? Someone had a similar issue and was able to fix it by adding the following:

<SwipeListView
  recalculateHiddenLayout={true}
  ...
/>

maybe give that a try? If that doesn't work could you show more code and perhaps a reproducible small example I could try on my end? Thanks!

[neomib]

Hi, I'm having the same problem.The recalculateHiddenLayout solution didn't help. I'm using react-native-elements Button in my hidden rows and TouchableHighlight for my visibles rows.

It happens only upon navigation to a different page. When the view changes inside the same page the flashy thing doesn't happen.

@Victoriayangx did you find a solution?

[neomib]

Found a solution: overriding the opacity value of the screen like so:

this.navigator = StackNavigator(Pages,
            {
                initialRouteName: root,
                cardStyle: {
                    opacity: 1,
                  },
            });

[Victoriayangx]

i did not modify the code .this issue only happens on Android. because for Android, when open a new page, the default open/close mode is forFadeFromBottomAndroid,but ios is forHorizontal, so IOS did not found this issue.

What i do to solve this issue: // import this line import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';

// in StackNavigator, found where to config headerMode,use transitionConfig to add below code { headerMode: 'screen', transitionConfig:()=>({ screenInterpolator:CardStackStyleInterpolator.forHorizontal, }) }

[rickysullivan]

My solution so far, is to prevent the hidden items from rendering until the page has transitioned. Using the didFocus event of ReactNavigation.

 componentDidMount = () => {
    this.props.navigation.addListener("didFocus", () => {
      this.renderButtons = true;
    });
  };

_listHiddenItem = data => {
    if (!this.renderButtons) {
      return;
    }

    return (
      <View style={styles.rowBack}>
        ...
      </View>
    );
  };

The only issue is a slight delay in being able to swipe the row.

[apostolnikov]

i did not modify the code .this issue only happens on Android. because for Android, when open a new page, the default open/close mode is forFadeFromBottomAndroid,but ios is forHorizontal, so IOS did not found this issue.

What i do to solve this issue: // import this line import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';

// in StackNavigator, found where to config headerMode,use transitionConfig to add below code { headerMode: 'screen', transitionConfig:()=>({ screenInterpolator:CardStackStyleInterpolator.forHorizontal, }) }

For react-navigation v2.12+

import CardStackStyleInterpolator from "react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator";

[ankhzet]

Somewhat fixed by forcing needsOffscreenAlphaCompositing on the container view of the list when screen is transitioning (isFocused set to true on navigation didFocus event and to false on willBlur):

const shouldForceOffscreen = (Platform.OS === 'android') && !isFocused;
...

<View
    needsOffscreenAlphaCompositing={shouldForceOffscreen}
    style={shouldForceOffscreen && styles.forceComposition}
>
    <SwipeListView
        ...
    />
</View>

const styles = StyleSheet.create({
  forceComposition: {
    opacity: 0.99,
  },
  ...
});

This way it preserves native look&feel of navigation transitions and (hopefully) don't degenerate performance (swipe animations f.e.) when not in transitioning state.

[thanhluantl2304]

Thank ankhzet, that works fine. But why this issue is still open?

[jemise111]

@thanhluantl2304 I agree! Looks like there are some good solutions in the comments, thanks all, going to close this - please reopen if anyone is still having issues

[hengkx]

Somewhat fixed by forcing needsOffscreenAlphaCompositing on the container view of the list when screen is transitioning (isFocused set to true on navigation didFocus event and to false on willBlur):

const shouldForceOffscreen = (Platform.OS === 'android') && !isFocused;
...

<View
    needsOffscreenAlphaCompositing={shouldForceOffscreen}
    style={shouldForceOffscreen && styles.forceComposition}
>
    <SwipeListView
        ...
    />
</View>

const styles = StyleSheet.create({
  forceComposition: {
    opacity: 0.99,
  },
  ...
});

This way it preserves native look&feel of navigation transitions and (hopefully) don't degenerate performance (swipe animations f.e.) when not in transitioning state.

It can't be solved