Fastlane error: "unable to resolve module "Dimensions" from react-native-viewport-units

[evanr1234]

Hi Guys,

This is the latest rejection stopping me from submitting my app to the App Store. I am in expo sdk 41. Any help is greatly appreciated. Also of relevance, I tried what the fastlane recommended with the yarn commands, it did not help. Thank you!

  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.13.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.5.2",
    "expo": "^41.0.0",
    "expo-ads-admob": "~10.0.4",
    "expo-asset": "~8.3.1",
    "expo-font": "~9.1.0",
    "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-elements": "^2.0.2",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-modal-overlay": "^1.3.1",
    "react-native-render-html": "^4.2.0",
    "react-native-responsive-screen": "^1.4.1",
    "react-native-viewport-units": "^0.0.5",
    "react-native-safe-area-context": "3.2.0",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-screens": "~3.0.0",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-webview": "11.2.3",
    "react-navigation": "^4.3.9",
    "react-navigation-stack": "^2.7.0",
    "react-navigation-tabs": "^2.8.13",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },

import { Dimensions } from ‘react-native’;

const width = Dimensions.get(‘window’).width;
const height = Dimensions.get(‘window’).height;

export default {
window: {
width,
height,
},
isSmallDevice: width < 375,
};

type or paste code here

[keith-kurak]

Hello!

Do you still need to include react-native-viewport-units package? It’s almost 7 years old, and, well, a lot has changed since then, and it doesn’t appear that the way it is importing Dimensions is compatible with modern Metro. The code at the bottom of your post should be sufficient to access window dimensions, and doesn’t require that package.

[evanr1234]

So I attempted to remove the viewport all together. I made the following code changes:

This is before:

import store from '../reducers/store';
import {Button} from "./common";
import React from "react";
import { connect } from 'react-redux';
import {vw, vh} from 'react-native-viewport-units';
import {StyleSheet, Text, TouchableOpacity,Linking,View,Image} from "react-native";
import {WebView} from "react-native-webview";

class TopAddBanner extends React.Component {


    constructor(props) {
        super(props);
    }

    _openLink = async () => {
        var url = "https://www.jdoqocy.com/click-100364532-14502190";
        Linking.openURL(url);
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity accessibilityRole='link' onPress={this._openLink}>
                    <Image
                        style={{
                            width: 100*vw,
                            height: 11*vh,
                            resizeMode: 'contain',
                            padding: 0,
                            marginTop: 0
                        }}
                        source={{
                            uri:
                                'https://www.awltovhc.com/image-100364532-12818787'
                        }}
                    />
                </TouchableOpacity>
            </View>

        );
    }
};

This is after the edits I made:

import store from '../reducers/store';
import {Button} from "./common";
import React from "react";
import { Dimensions } from 'react-native';
import { connect } from 'react-redux';
import {StyleSheet, Text, TouchableOpacity,Linking,View,Image} from "react-native";
import {WebView} from "react-native-webview";

class TopAddBanner extends React.Component {

var vw =  Dimensions.get('window').width;
var vh =  Dimensions.get('window').height;

    constructor(props) {
        super(props);
    }

    _openLink = async () => {
        var url = "https://www.jdoqocy.com/click-100364532-14502190";
        Linking.openURL(url);
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity accessibilityRole='link' onPress={this._openLink}>
                    <Image
                        style={{
                            width: 100*vw,
                            height: 11*vh,
                            resizeMode: 'contain',
                            padding: 0,
                            marginTop: 0
                        }}
                        source={{
                            uri:
                                'https://www.awltovhc.com/image-100364532-12818787'
                        }}
                    />
                </TouchableOpacity>
            </View>

        );
    }
};

I didn’t make this program and was unsure of where I should add the new "vh and “vw” variables. I got the following build output:

Thanks!

[wodin]

Hi @evanr1234

Try moving the definitions of vh and vw to between the import statements and the class statement instead of inside the class.

Also, you’d want to divide them by 100 and maybe define them as const instead of var like this:

import store from '../reducers/store';
import { Button } from './common';
import React from 'react';
import { Dimensions } from 'react-native';
import { connect } from 'react-redux';
import { StyleSheet, Text, TouchableOpacity, Linking, View, Image } from 'react-native';
import { WebView } from 'react-native-webview';

const vw = Dimensions.get('window').width / 100;
const vh = Dimensions.get('window').height / 100;

class TopAddBanner extends React.Component {
[...]