Avoid react-native navigator scene overlapping - scene

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.