expo-av useNativeControls not displayed with iOS 14

🐛 Bug Report

Summary of Issue

On iOS 14, the video player setup with useNativeControls is not displaying anything.

I have tried to update expo-av to version 8.6 to see if it fixes it but same result.

Edit: after working on a workaround, it seems that only the initial play button is not rendering. But once the video is launched, all controls are visible. So my work around was a simple implementation of the play button to trigger the initial start. Then the controls are displayed again.

Environment - output of expo diagnostics & the platform(s) you’re targeting

Expo CLI 3.27.4 environment info: System: OS: macOS 10.15.6 Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.14.0 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 IDEs: Xcode: 11.7/11E801a - /usr/bin/xcodebuild npmPackages: expo: ^38.0.0 => 38.0.8 react: 16.11.0 => 16.11.0 react-dom: 16.11.0 => 16.11.0 react-native: https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz => 0.62.2 react-native-web: ~0.11.7 => 0.11.7 npmGlobalPackages: expo-cli: 3.27.4 Expo Workflow: managed

Targeting iOS 14.

Reproducible Demo

Using the <Video/> component with a remote URL as the source. No local file.

Steps to Reproduce

Using the <Video/> component with a remote URL as the source. No local file.

Expected Behavior vs Actual Behavior

Video native controls are not displayed.

[fabioknoedt]

I am experiencing the same in iOS 14.1 (both device and simulator). The controls are not shown with the flag useNativeControls set to true.

[hanayashiki]

Same issue here. 14.0 Simulator on iPhone X

The workaround works. Maybe this is an AVPlayerViewController bug

    const [shouldPlay, setShouldPlay] = useState(false);
    const videoRef = useRef<Video>();

    const videoPlayer = () => (
        <View>
            <Video
                {...{
                    source: { uri: menu?.video },
                    resizeMode: "stretch",
                    useNativeControls: true,
                    style: localStyles.video,
                    shouldPlay: shouldPlay,
                    ref: ref => videoRef.current = ref
                }}
            />
            { !shouldPlay && <View style={[StyleSheet.absoluteFill, styles.flexCenter]}>
                <TouchableOpacity onPress={() => setShouldPlay(true)}>
                    <Image
                        source={require("app/assets/images/icons/play.png")}
                        style={{ opacity: 0.5, height: 100, width: 100 }}
                    />
                </TouchableOpacity>
            </View>
            }
        </View>
    )