FlexDirection Change Based on Orientation Change in React-Native

My Code:

import React, { PureComponent } from 'react'import { StyleSheet, View } from 'react-native'import {    isPortrait} from './Constants'export default class TwoVideoView extends PureComponent {    render() {        return (<View style={styles.conatiner}><View style={[styles.videoHalfView, {backgroundColor: 'white'}]}></View><View style={[styles.videoHalfView, {backgroundColor: 'gray'}]}></View></View>        )    }}const styles = StyleSheet.create({    conatiner: {        flex: 1,        backgroundColor: 'red',        flexDirection: isPortrait ? ('column') : ('row')    },    videoFullView: {        width: '100%',        height: '100%'    },    videoHalfView: {        width: isPortrait ? ('100%') : ('50%'),        height: isPortrait ? ('50%') : ('100%')    }})

Portrait output:

Landscape Output:

Expected Output:

Can you please help what should I do to get this done?

I tried adding Dimensions.addListener('change') didn't workedI just want to update My View rendering not the other Api Stuff.

I need to change flexDirection: isPortrait ? ('column') : ('row')

export const isPortrait = () => {    const dim = Dimensions.get('screen');    return dim.height >= dim.width;  };