2

I get an error when using Expo in my react native app. When importing the following line of code. (Only part of my code where I use the import 'expo')

import {Permissions, ImagePicker} from 'expo';

I get an error. I'm all day searching for a solution. I think its because of the version of React I use is updated? I tried this post, but it didn't work and got even more errors. Also removed node_modules folder and reinstalled it, but nothing seems to work.

When installing yarn add babel-core@7.0.0-bridge.0 the app crashed (Objects are not valid as a React Child". And in debug mode it also doesn't work.

There are also some yarn check errors. When installing the missing dependencies, I even get more errors.

bundling failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "E:\stack\Github\turfMeister\testProject\node_modules\babel-preset-expo\index.js") at throwVersionError (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:65:11) at Object.assertVersion (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:13:11) at _default (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\lib\index.js:35:7) at E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:19:12 at Function.memoisePluginContainer (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:113:13) at Function.normalisePlugin (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:146:32) at E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:184:30 at Array.map () at Function.normalisePlugins (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20) at OptionManager.mergeOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36) at E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14 at E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22 at Array.map () at OptionManager.resolvePresets (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20) at OptionManager.mergePresets (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10) at OptionManager.mergeOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14) at OptionManager.init (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) at File.initOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\index.js:212:65) at new File (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\index.js:135:24) at Pipeline.transform (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\pipeline.js:46:16) at Object.transform (E:\stack\Github\turfMeister\testProject\node_modules\metro\src\transformer.js:135:5) at Object.transformCode [as transform] (E:\stack\Github\turfMeister\testProject\node_modules\metro\src\JSTransformer\worker\index.js:253:15) at execMethod (E:\stack\Github\turfMeister\testProject\node_modules\jest-worker\build\child.js:92:29) at process.on (E:\stack\Github\turfMeister\testProject\node_modules\jest-worker\build\child.js:42:7)

whole component:

import React, {Component} from "react";
import {
    View, Text, StyleSheet, Button, Image,TouchableOpacity,Alert
} from "react-native";
import {Avatar, Divider, Header} from "react-native-elements";
import {auth, database} from "../config/config";
import {Permissions, ImagePicker} from 'expo'; //enabling this line gives an error



class GlobalAccount extends Component {

constructor(props) {
    super(props);

    this.state = {

        user_code: "Chen",
        user_object: null,
        user_avatar: null,
        user_first_name: null,
        user_last_name: null,
        user_email: null,

        imageID: this.uniqueId(),

    };

    alert(this.uniqueId());
    this.findNewImage();

}

s4 = () => {

    return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
};

uniqueId = () => {
    return this.s4() + "-" + this.s4() + "-" + this.s4() + "-" + this.s4() + "-"
        + this.s4() + "-" + this.s4() + "-" + this.s4() + "-" + this.s4();
};

_checkPermissiosn = async () => {
    const { statusCamera } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({cameraPermission: statusCamera});

    const { statusCameraRoll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    this.setState({cameraPermission: statusCameraRoll});



};

findNewImage = async () => {
    this._checkPermissiosn();

};




/**
 * Testing purpose only.
 */
alertElement(){
    Alert.alert(
        "Change your profile photo?",
        "",
        [
            {text: "no"},
            {text: "yes"}
        ]
    )
}

/**
 * Before mounting the scene, load the data
 */
componentWillMount(){
    this.loadDataFromDatabase();
}


/**
 * When pressed, logout the user.
 */
signUserOut = () => {
    var that = this;

    auth.signOut()
        .then(console.log("user is signed out"))
        .catch((error) => console.log("error occured while signing user out: ", error));

    that.setState({
        loggedin: false
    })
};


/**
 * Download the data from the server.
 * Only data corresponding to the user.
 */
loadDataFromDatabase = () => {
    this.setState({
        refresh: true,
        groups: [],
    });

    var that = this;

    // exampleUser must be the user who is logged in.
    database.ref('Users').child(this.state.user_code).once("value")
        .then(function (snapshot) {
            const exists = (snapshot.val() !== null);

            if (exists) {
                var user_object = snapshot.val();

                console.log("user_object is : " , user_object.avatar);
                console.log("user name is " + user_object.firstName);

                that.setState({
                    user_object: user_object,
                    user_avatar: user_object.avatar,
                    user_first_name: user_object.firstName,
                    user_last_name: user_object.lastName,
                    user_email: user_object.email,
                });

            }
        }).catch(error => console.log(error));
};


/**
 * Render the 'my account' page.
 * @returns {*the account page.*}
 */
render() {
    return (
        <View style={styles.container}>

            <TouchableOpacity
                style={styles.imageView}
                onLongPress={()=>{this.alertElement()}}
            >

                <Image style={styles.image}
                       source={({uri: this.state.user_avatar})}
                />
            </TouchableOpacity>

            <View>
                <Text> Username: {this.state.user_first_name} {this.state.user_code} </Text>

                <Text> Email: {this.state.user_email} </Text>
                <Text>City: </Text>
            </View>
            <View>


                <Button
                    title={"Logout"}
                    onPress={() => this.signUserOut()}
                />
            </View>
        </View>
    );
}
}

//TODO move this to the styleSheet package.
export default GlobalAccount;

const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
},
imageView :{
    height:100,
    width:100,
},
image: {


    flex:1,
}

});

Package.json file

 {
  "name": "testProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "expo": "^31.0.6",
    "expo-font": "^1.0.0",
    "firebase": "^5.0.3",
    "react": "^16.4.1",
    "react-native": "0.55.4",
    "react-native-action-button": "^2.8.4",
    "react-native-elements": "^0.19.1",
    "react-native-navigation": "^1.1.483",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.0.2410"
  },
  "devDependencies": {
    "@expo/vector-icons": "^8.0.0",
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.4.2",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

yarn check says

yarn check v1.9.2 info fsevents@1.2.4: The platform "win32" is incompatible with this module. info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation. error "react-native#react@16.3.1" doesn't satisfy found match of "react@16.6.3" error "expo#expo-react-native-adapter#react-native@^0.57.1" doesn't satisfy found match of "react-native@0.55.4" error "expo#react-native-reanimated#react@16.0.0-alpha.6" doesn't satisfy found match of "react@16.6.3" error "expo#react-native-reanimated#react-native@^0.44.1" doesn't satisfy found match of "react-native@0.55.4" warning "jest-cli#jest-message-util#@babel/code-frame@^7.0.0-beta.35" could be deduped from "7.0.0-rc.2" to "@babel\code-frame@7.0.0-rc.2" error "babel-preset-expo#metro-react-native-babel-preset#@babel/core@*" doesn't satisfy found match of "@babel\core@7.0.0-rc.2" error "@babel/plugin-proposal-decorators#@babel/helper-create-class-features-plugin##@babel/core@^7.0.0" doesn't satisfy found match of "@babel\core@7.0.0-rc.2" error Found 6 errors. info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

Wiezalditzijn
  • 443
  • 3
  • 17

1 Answers1

1

After being down for more than half a month I found the problem. Somehow I dont actually used (the correct) Expo!? Here is how I fixed it. My solution can be some cumbersome, I think there is a faster solution, but it works.

You can check if your app uses expo by doing the following: yarn start. If in the command line there is not an QR code, you dont use (the correct) Expo.

How to solve?

  1. install npm create-react-native-app
  2. Create a new project by create-react-native-app [name of the app]
    at step 2 it went wrong with me, because this version actually creates a combination of react-native and Expo. and I used something else apparently
    (You can chose the example app with or not without react-navigation. This choise doesnt matther.)
  3. cd [name of the app] and then yarn start.
    Make sure you see in the command line a QR code. Else it does not use the correct expo.

  4. I now coppied my old project into this new one. (you also can copy the newly made files into your old one, but I got problems doing so, since all kind of expo dependencies at my old project where wrong.

  5. (not mandatory) Download on the target device the Expo app (android). The expo app can open your app with the QR code. (tested it only with android)

If you know how to solve this problem faster/without copying the whole project to a new one, I'd like to hear from you.

Wiezalditzijn
  • 443
  • 3
  • 17