How to resize video in React Native?

When displaying a video using the expo-av library, the video takes up the entire screen and some of its width gets cropped, as shown below:

Currently, here’s how the video is displayed:

function DisplayScreen({route, navigation}) {
    const video = React.useRef(null);
    const [status, setStatus] = React.useState({});

    return(
        <View style={global.vidContainer}>
            <Video
                ref={video}
                style={global.video} 
                source = {require("../assets/demos/Bridges.mp4") }
                useNativeControls
                resizeMode="contain"
                isLooping
                onPlaybackStatusUpdate={setStatus}
            />
            <View>
                <Button
                title={status.isPlaying ? 'Pause' : 'Play'}
                onPress={() =>
                    status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
                }
                />
            </View>
        </View>
    )
}

and my styles (global.js)

vidContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 400
    },

    video: {
        width: 400,
        height: 100,
        resizeMode: 'contain',
        flex: 1,
        alignSelf: 'flex'
    }

I’ve also tried width: window.width for styling video, however with that the video just completely does not show up. How do I go about this?