Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Camera and Status bar orientation bug in “portrait” orientation.

See original GitHub issue

Summary

SDK 41; iOS 14.4.2 iPhone 11; Expo Go;

Demo video: https://drive.google.com/file/d/1FmXwt2wuv1amSGgv2vz_k12Qm1luSatn/view

There is a problem with locking the Camera and status bar orientation.

Preconditions:

The app.json orientation set to the “orientation”: “portrait” the iPhone system Portrait orientation lock is off (free rotate and change orientation). rotate the device from the portrait to the landscape orientation. Expected result:

The camera and status bar should be locked in portrait mode in the expo app Actual result:

When the device is rotated to the landscape orientation the status bar and camera rotates as well. If you switch the app (swipe from the bottom in the landscape mode and get back) - the status bar and camera orientation will be fixed to portrait until you rotate the device to portrait and then to landscape again.

Managed or bare workflow? If you have `ios/` or `android/` directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android, iOS

SDK Version (managed workflow only)

41.0.0

Environment

Expo CLI 4.4.4 environment info: System: OS: macOS 11.3.1 Shell: 5.8 - /bin/zsh Binaries: Node: 14.16.1 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.18.1 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 IDEs: Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild npmPackages: expo: ~41.0.1 => 41.0.1 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 react-native-web: ~0.13.12 => 0.13.18 npmGlobalPackages: expo-cli: 4.4.4 Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

Demo video: https://drive.google.com/file/d/1FmXwt2wuv1amSGgv2vz_k12Qm1luSatn/view

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CameraBug from "./CameraBug";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <CameraBug />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

CamerBug.js

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
    const [hasPermission, setHasPermission] = useState(null);
    const [type, setType] = useState(Camera.Constants.Type.back);

    useEffect(() => {
        (async () => {
            const { status } = await Camera.requestPermissionsAsync();
            setHasPermission(status === 'granted');
        })();
    }, []);

    if (hasPermission === null) {
        return <View />;
    }
    if (hasPermission === false) {
        return <Text>No access to camera</Text>;
    }
    return (
        <View style={styles.container}>
            <Camera style={styles.camera} type={type} />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
    },
    camera: {
        width: '100%',
        height: '100%',
    }
});

app.json

{
  "expo": {
    "name": "demo-bug",
    "slug": "demo-bug",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~41.0.1",
    "expo-camera": "~11.0.2",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}