React native , closing full video shrink the whole application layout pages

[![Hello sir, I have implemented react-native-video-player in my app, i am facing a problem with my UI, its get distorted and shrink from above and bottom , when i close the video playing in full screen , Please help me. ite been more thank a month and i am still stuck

here is my code

import VideoPlayer from 'react-native-video-player';

and in render :

    <ImageBackground style={{ flex: 1 }}
        source={require('../../assets/bg.png')}>
        <SafeAreaView
            style={{ flex: 1 }}
            backgroundColor='transparent'>
            <Header
                value={'Training Sessions'}
                navigation={props.navigation}
                bottomBorder={true}
                back={true}
            />


            {data &&



                <VideoPlayer
                    video={{ uri: videoData.link }}
                    videoWidth={1600}
                    videoHeight={900}
                    thumbnail={{ uri: videoData.picture }}
                />


            }

            {data &&
                <View style={{ marginTop: 0 }}>
                    <View style={{ backgroundColor: '#fff', paddingHorizontal: 10, paddingVertical: 15 }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                            <BoldText style={{ color: colors.black, fontSize: 16 }}>{videoData.title}</BoldText>
                        </View>
                        <View style={{ height: 1, backgroundColor: colors.gray, marginTop: 10 }}></View>

                        <RegularText style={{ color: colors.black, marginTop: 10, fontSize: 14 }}
                            numberOfLines={4}
                        >{videoData.description}</RegularText>
                        {/* <RegularText style={{ color: colors.black, marginTop: 10, fontSize: 10 }}>{moment(new Date(videoData.createdAt)).format('ll')}</RegularText> */}
                    </View>
                </View>
            }




            <View style={{ paddingHorizontal: 15, flex: 1, marginBottom: 10 }}>




                <View style={{ flexDirection: 'row', marginTop: 15, marginBottom: 15 }}>
                    <RegularText style={{ color: colors.white }}>UP NEXT</RegularText>
                    <View style={{
                        height: 1, backgroundColor: colors.white, width: '80%',
                        alignSelf: 'center'
                    }}></View>
                </View>

                <FlatList
                    data={data}
                    renderItem={({ item, index }) =>
                        <TouchableOpacity
                            style={{}}
                            activeOpacity={0.9}
                            onPress={() => setcurentVideo(item)}
                        >
                            <TrainingDetailRow
                                item={item}
                                onPress={() => addFav(item)}
                                module={'TRAINING'}
                                navigation={props.navigation}
                            />
                        </TouchableOpacity>
                    }
                ></FlatList>
            </View>
        </SafeAreaView>
    </ImageBackground>