react-navigation-shared-element
react-navigation-shared-element copied to clipboard
Image location incorrect when type after keyboard appears and is dismissed on Android
When you have TextInput on the same screen and type into it, the position of the image will be displaced after the keyboard closes.
Sample code:
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 50, backgroundColor: 'red', flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity style={{ backgroundColor: 'yellow' }}
onPress={() => onMenuPress()}>
<Text>Menu</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<SharedElement id="imageId" style={{ width: '100%' }}>
<Image source={imageSource} style={{ width: '100%', resizeMode: "contain" }} />
</SharedElement>
<Text>{props.navigation.state.routeName}</Text>
<TextInput placeholder="Enter text here..."></TextInput>
<Button title="Press me" onPress={() => onButtonPress()}></Button>
</View>
</SafeAreaView>
Minimal repo: https://github.com/joshua-augustinus/rn-training-transition
Updated video sample: https://i.imgur.com/Hj9WRCF.mp4