Rendering Video/Image from the API in react native it shows empty space for the thing unavailable like video or image

Question

I am new to react native I am having an issue I am rendering videos and images from my social website into my react native application in my newsfeed.... I don't know whether from web video is receiving or image. So I have used both tags in my post body the problem is that when the image is coming from web the place for video is shown empty and when image is rendered place of video is empty I need help I want the app to display only the thing not the empty space. what should I do?

<View style={_style.container}>
        <PostHeader data={data} />
        { loading ? <Text>Loading...</Text>: undefined }
        { data.imagePath
            ? <Video
                rate={1.0}
                volume={1.0}
                isMuted={true}
                resizeMode="cover"
                shouldPlay
                isLooping

                onLoadStart={(e) => setLoading(true)}
                onLoadEnd={(e) => setLoading(false)}
                style={_style.postVideo}
                source={{uri: data.imagePath}}/>
            : undefined
        }
        { data.imagePath
            ? <Image

                onLoadStart={(e) => setLoading(true)}
                onLoadEnd={(e) => setLoading(false)}
                style={_style.postImage}
                source={{uri: data.imagePath}}/>
            : undefined
        }
            <View style={_style.contentText}>
                <Paragraph>{data.content}</Paragraph>
            </View>
        </View>

this is my code