react-navigation-shared-element icon indicating copy to clipboard operation
react-navigation-shared-element copied to clipboard

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

Open joshua-augustinus opened this issue 5 years ago • 1 comments

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 avatar Nov 08 '20 23:11 joshua-augustinus

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

joshua-augustinus avatar Mar 25 '21 02:03 joshua-augustinus