IjzerenHein / react-navigation-shared-element

React Navigation bindings for react-native-shared-element 💫
https://github.com/IjzerenHein/react-native-shared-element
MIT License
1.27k stars 124 forks source link

Image location incorrect when type after keyboard appears and is dismissed on Android #117

Open joshua-augustinus opened 3 years ago

joshua-augustinus commented 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

joshua-augustinus commented 3 years ago

Updated video sample: https://i.imgur.com/Hj9WRCF.mp4