Expo-AV Video element is wrong orientation on Android

  android, expo, expo-av, node.js, react-native

I just recently started testing my expo bare workflow app in android. I’m coming across this issue where the video is correctly oriented on IOS, but not android. In the video below, the desk should be horizontal, not vertical and stretched. This only happens on android.

Android video orientation

No matter what I do, such as changing the resize modes to cover, stretch, or contain, or double checking the correct packages are there and installed, the orientation is the same.

Here is my code for the entire video box:

            {props.videoUrl
            ? (
                <View style={{width: '100%', alignItems:'center'}}>
                        <TouchableOpacity 
                            activeOpacity={.9}
                            onPress={() => setvideoPlaying(!videoPlaying)}
                        >
                            <Video
                            source={{ uri: props.videoUrl }}
                            onLoad={() => setvideoLoaded(true)}
                            ref={(video) => { setvideoRef(video) }}
                            rate={1.0}
                            volume={1.0}
                            isMuted={videoMuted}
                            resizeMode="cover"
                            shouldPlay={videoPlaying}
                            isLooping={true}
                            style={[styles.video, { width: 340, height: 280 }]}
                            />
                        </TouchableOpacity>
                    {videoLoaded
                    ? null
                    : <ActivityIndicator size='large' style={{position:'absolute', top: 120}}/>
                    }
                    {!videoPlaying && videoLoaded
                    ? (
                        <TouchableOpacity style={{position:'absolute', top: 110}} onPress={() => setvideoPlaying(!videoPlaying)}>
                            <Icon name='play' type='material-community' color='#ffffff' style={styles.shadow} size={80}/>
                        </TouchableOpacity>
                    )
                    : null
                    }
                    {videoLoaded
                    ? (
                        <View 
                            style={{position:'absolute', top: 20, right: 15}}
                        >
                            <Text style={[styles.videoTime, styles.shadow]}>{videoTime}</Text>
                        </View>
                    )
                    : null
                    }
                    {videoLoaded
                    ? (
                        <TouchableOpacity 
                            style={{position:'absolute', bottom: 20, left: 15}}
                            activeOpacity={.9}
                            onPress={() => setvideoMuted(!videoMuted)}
                            hitSlop={{top: 7, bottom: 7, left: 7, right: 7}}
                        >
                            {videoMuted
                            ? <Icon name='volume-off' type='material-community' color='#ffffff' style={styles.shadow} size={25}/>
                            : <Icon name='volume-high' type='material-community' color='#ffffff' style={styles.shadow} size={25}/>
                            }
                        </TouchableOpacity>
                    )
                    : null
                    }
                    {videoLoaded
                    ? (
                        <TouchableOpacity 
                            style={{position:'absolute', bottom: 20, right: 15}}
                            activeOpacity={.9}
                            onPress={() => videoRef?.presentFullscreenPlayer()}
                            hitSlop={{top: 7, bottom: 7, left: 7, right: 7}}
                        >
                            <Icon name='fullscreen' type='material-community' color='#ffffff' style={styles.shadow} size={25}/>
                        </TouchableOpacity>
                    )
                    : null
                    }
                    {videoLoaded
                    ? (
                        <View 
                            style={{position:'absolute', bottom: 12, width: 315}}
                        >
                            <ProgressBar progress={progressBarPercentage} color={'#ffffff'} style={[styles.shadow, {backgroundColor:'#000000', borderRadius: 10}]}/>
                        </View>
                    )
                    : null
                    }
                    <View style={styles.topBottomBorder}/>
                </View>
            )
            : null
            }

Here is my package.json:

"scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@groftware/lottie-flatlist": "^1.0.6",
    "@material-ui/core": "^4.10.2",
    "@react-native-async-storage/async-storage": "^1.13.3",
    "@react-native-community/datetimepicker": "^2.4.3",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.6.1",
    "@react-navigation/material-top-tabs": "^5.2.12",
    "@react-navigation/native": "^5.6.1",
    "@react-navigation/stack": "^5.6.2",
    "@svanboxel/visibility-sensor-react-native": "^1.0.2",
    "axios": "^0.19.2",
    "base-64": "^0.1.0",
    "expo": "^38.0.0",
    "expo-av": "~8.2.1",
    "expo-blur": "~8.1.2",
    "expo-camera": "~8.3.1",
    "expo-crypto": "^8.2.1",
    "expo-file-system": "^9.1.0",
    "expo-haptics": "^8.2.1",
    "expo-image-manipulator": "^8.2.1",
    "expo-image-picker": "~8.3.0",
    "expo-notifications": "~0.3.3",
    "expo-permissions": "~9.0.1",
    "expo-splash-screen": "^0.5.0",
    "expo-status-bar": "^1.0.0",
    "expo-updates": "~0.2.10",
    "expo-video-thumbnails": "~4.2.1",
    "expo-web-browser": "^8.5.0",
    "firebase": "^7.22.0",
    "firebase-admin": "^9.2.0",
    "form-data": "^3.0.0",
    "lottie-react-native": "~2.6.1",
    "mobx": "^5.15.7",
    "mobx-react": "^6.3.1",
    "moment": "^2.27.0",
    "react": "~16.11.0",
    "react-dom": "16.11.0",
    "react-native": "~0.62.2",
    "react-native-appearance": "^0.3.4",
    "react-native-datepicker": "^1.7.2",
    "react-native-elements": "^2.0.4",
    "react-native-expo-cached-image": "^1.2.1",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-image-viewing": "^0.2.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.1",
    "react-native-modal": "^11.5.6",
    "react-native-paper": "^4.7.0",
    "react-native-reanimated": "~1.9.0",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "~2.9.0",
    "react-native-svg": "12.1.0",
    "react-native-tab-view": "^2.14.4",
    "react-native-unimodules": "^0.10.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.3.9",
    "react-navigation-stack": "^2.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-jest": "~25.2.6",
    "jest": "~25.2.6",
    "react-test-renderer": "~16.11.0",
    "@babel/plugin-proposal-decorators": "^7.10.4",
    "@babel/plugin-syntax-decorators": "^7.10.1",
    "@types/react": "~16.9.41",
    "@types/react-native": "~0.62.13",
    "@types/react-native-datepicker": "^1.7.0",
    "@types/react-native-vector-icons": "^6.4.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-expo": "^8.2.3",
    "typescript": "~3.9.5"
  },
  "private": true,
  "name": "myApp",
  "version": "1.0.0"
}

I did eject from a expo managed workflow app recently. Not sure if that changes something, but I didn’t even know if this worked on the managed workflow in the first place since I just started to test android… I learn from my mistakes lol. Any help is greatly appreciated!

Source: Android Questions

LEAVE A COMMENT