View cannot update dimensions height when orientation device

Please provide the following:

  1. SDK Version: 35
  2. Platforms(Android/iOS/web/all): Android Standalone Apps

Start application with portrait then change to landscape

app.json

{
  "name": "Smart QC",
  "displayName": "FEA QC",
  "expo": {
    "name": "FEA QC",
    "description": "FEA-Smart QC",
    "slug": "FEAQC",
    "privacy": "unlisted",
    "sdkVersion": "35.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "5.0.3",
    "orientation": "default",
    "primaryColor": "#000000",
    "icon": "./assets/images/icon_ios.PNG",
    "splash": {
      "image": "./assets/images/splash_its.PNG",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "notification": {
      "icon": "./assets/images/icon_notification.PNG"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "bundleIdentifier": "com.feavn.feaqc",
      "buildNumber": "1.0.0",
      "supportsTablet": true
    },
    "android": {
      "package": "com.feavn.feaqc",
      "versionCode": 1,
      "icon": "./assets/images/icon_android.PNG",
      "googleServicesFile": "./google-services.json"
    }
  }
}

Code example

import React from 'react';
import { Image, View, ImageBackground, Text, StyleSheet, TouchableOpacity ,Dimensions } from 'react-native';
import { NavigationStackScreenProps } from 'react-navigation-stack';

import { Container } from '@core/components';
import { shadow, Hd } from '@core/components/style';

import { connect } from 'react-redux';
import { UserObj } from '@core/store/reducers';

type DepartmentProps = NavigationStackScreenProps & {
  langs: any;
  internal: string;
  user: UserObj;
};

class Department extends React.PureComponent<DepartmentProps> {
  static navigationOptions = {
    header: null,
    gesturesEnabled: true,
  };
  componentDidMount() {
    if (this.props.user.UserGroupName === 'QC MQPBoned') {
      this.props.navigation.navigate('ListMQP', { route: 'Bonded' });
    }
  }

  go = (route: string) => {
    this.props.navigation.navigate('ListMQP', { route });
  };
  render() {
    return (
      <Container>
        <View style={{ flexDirection: 'row', flex: 1 }}>
          <TouchableOpacity style={{ flex: 1 }} onPress={() => this.go('Bonded')}>
            <View
              style={{
                padding: 6,
                flex: 1,
                margin: 4,
                backgroundColor: '#fff',
                ...shadow({ elevation: 6 }),
                borderRadius: 8,
              }}>
              <ImageBackground
                style={{ flex: 1, borderRadius: 8 }}
                resizeMode="stretch"
                source={require('@assets/images/mqp/bonded.jpg')}>
                <View
                  style={[
                    StyleSheet.absoluteFill,
                    { backgroundColor: 'rgba(0,0,0,0.7)', justifyContent: 'center', alignItems: 'center' },
                  ]}>
                  <Text style={{ fontSize: Hd(8), color: '#fff', textAlign: 'center' }}>
                    {(this.props.langs['boned'] as string).toUpperCase()}
                  </Text>
                </View>
              </ImageBackground>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={{ flex: 1 }} onPress={() => this.go('ColorCheck')}>
            <View
              style={{
                padding: 6,
                flex: 1,
                margin: 4,
                backgroundColor: '#fff',
                ...shadow({ elevation: 6 }),
                borderRadius: 8,
              }}>
              <ImageBackground
                style={{ flex: 1, borderRadius: 8 }}
                resizeMode="stretch"
                source={require('@assets/images/mqp/color.jpg')}>
                <View
                  style={[
                    StyleSheet.absoluteFill,
                    { backgroundColor: 'rgba(0,0,0,0.7)', justifyContent: 'center', alignItems: 'center' },
                  ]}>
                  <Text style={{ fontSize: Hd(8), color: '#fff' }}>
                    {(this.props.langs['colorcheck'] as string).toUpperCase()}
                  </Text>
                </View>
              </ImageBackground>
            </View>
          </TouchableOpacity>
        </View>
        <TouchableOpacity style={{ flex: 1 }} onPress={() => this.go('Labs')}>
          <View
            style={{
              padding: 6,
              flex: 1,
              margin: 4,
              backgroundColor: '#fff',
              ...shadow({ elevation: 6 }),
              borderRadius: 8,
            }}>
            <ImageBackground
              style={{ flex: 1, borderRadius: 8 }}
              resizeMode="stretch"
              source={require('@assets/images/mqp/labs.png')}>
              <View
                style={[
                  StyleSheet.absoluteFill,
                  { backgroundColor: 'rgba(0,0,0,0.7)', justifyContent: 'center', alignItems: 'center' },
                ]}>
                <Text style={{ fontSize: Hd(8), color: '#fff' }}>
                  {(this.props.langs['labs'] as string).toUpperCase()}
                </Text>
              </View>
            </ImageBackground>
          </View>
        </TouchableOpacity>
      </Container>
    );
  }
}

Hey,

Give this a try: https://github.com/expo/expo/issues/5033

1 Like