Open joshua-augustinus opened 3 years ago
When you have TextInput on the same screen and type into it, the position of the image will be displaced after the keyboard closes.
Video
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
When you have TextInput on the same screen and type into it, the position of the image will be displaced after the keyboard closes.
Video
Sample code:
Minimal repo: https://github.com/joshua-augustinus/rn-training-transition