Avoid react-native navigator scene overlapping

Question

I have a ScrollView with a list of items. When I click on one item I navigate to a new scene (slide in from the right). However, during the transition period the two scenes overlap; they are fine after the animation/transition is done.

Here's an example:

and heres the related code:

render() {
    return (
      <Navigator
       initialRoute={routes.frontpage()}
       renderScene={(route, navigator) => {
        if(route.index === 1) {
          return (
            <TouchableHighlight
              onPress={() => navigator.pop()}>
            <View style={{flex: 1}}>
              <Text style={styles.header}> other </Text>
              <Text> {route.post.title} </Text>
            </View>
            </TouchableHighlight>
          )
        }
         return (
          <View style={{flex: 1}}>
            <Text style={styles.header}> Frontpage </Text>
            <ScrollView>
              {
                this.props.posts.map(post => (
                  <TouchableHighlight
                    key={post.created}
                    onPress={() => {
                      if (route.index === 0) {
                        return navigator.push(routes.post(post))
                      }

                      navigator.pop();
                    }}>
                    <View>
                      <PostSummary
                        title={post.title}
                        upvotes={post.ups}
                        author={post.author}
                        subreddit={post.subreddit}
                        created={post.created_utc}
                      />
                    </View>
                  </TouchableHighlight>
                ))
              }
            </ScrollView>
          </View>
         )
       }}
     />
    )
  }

Any ideas on how to solve this?

Answer 1

Navigator uses animations during transitions between two scenes. In your case it uses fade during the transition. How about using a different animation. Navigator has Scene Transitions feature that you may try to change the animation.