2
votes

Why my package.json file shows

react-native: "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz"

instead of a react-native version like

react-native: 0.60.

Because of this I'm getting this error:

Error: react-native is not installed. Please run npm install or yarn in your project directory. Couldn't start project. Please fix the errors and restart the project.

Actually I've bought a react-native app from Codecanyon but the developer is not helping me to configure the app. It's been 4 days I'm not able to build the app. It has a php backend that I've uploaded and is working fine, but building app is a nightmare for me. Can anyone help?

Thanks

edit1: So after removing the node_modules and doing yarn install again the app is giving this error : fontFamily "AntDesign" is not a system font and has not been loaded through Font.loadAsync.

  • If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

  • If this is a custom font, be sure to load it with Font.loadAsync.

Here is my package.json file

    {
      "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": {
        "@react-native-community/masked-view": "0.1.10",
        "expo": "^38.0.0",
        "expo-ads-admob": "~8.2.1",
        "expo-facebook": "~8.2.1",
        "expo-font": "~8.2.1",
        "firebase": "7.9.0",
        "moment": "^2.27.0",
        "native-base": "^2.13.12",
        "react": "16.11.0",
        "react-dom": "16.11.0",
        "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
        "react-native-carousel": "^0.12.0",
        "react-native-device-detection": "^0.2.1",
        "react-native-form-validator": "^0.3.2",
        "react-native-gesture-handler": "~1.6.0",
        "react-native-keyboard-aware-scroll-view": "^0.9.2",
        "react-native-map-link": "^2.7.10",
        "react-native-maps": "0.27.1",
        "react-native-modalbox": "^2.0.0",
        "react-native-reanimated": "~1.9.0",
        "react-native-render-html": "^4.2.1",
        "react-native-root-toast": "^3.2.1",
        "react-native-safe-area-context": "~3.0.7",
        "react-native-safe-area-view": "^1.1.1",
        "react-native-screens": "~2.9.0",
        "react-native-star-rating": "^1.1.0",
        "react-native-super-grid": "^4.0.2",
        "react-native-timeago": "^0.5.0",
        "react-native-vector-icons": "^7.0.0",
        "react-native-web": "~0.11.7",
        "react-native-webview": "^10.3.2",
        "react-navigation": "^4.4.0",
        "react-navigation-drawer": "^2.5.0",
        "react-navigation-stack": "^2.8.2",
        "tcomb-form-native": "^0.6.20"
      },
      "devDependencies": {
        "@babel/core": "^7.11.1",
        "babel-preset-expo": "^8.2.3"
      },
      "private": true
    }

App.js:

import React from 'react';

import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import { Root } from "native-base";
import { StatusBar } from "react-native";
import AppPreLoader from "./application/components/AppPreLoader";
import firebaseConfig from './application/utils/Firebase';
import * as firebase from 'firebase';
firebase.initializeApp(firebaseConfig);

import GuestNavigation from './application/navigations/Guest';
import LoggedNavigation from './application/navigations/Logged';

console.disableYellowBox = true;

function cacheImages(images) {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
}

export default class App extends React.Component {

  constructor () {
    super();
    this.state = {
      isLogged: false,
      loaded: false,
      isReady: false,
    }
  }

async _loadAssetsAsync() {
    const imageAssets = cacheImages([
      require('./assets/images/header.jpg'),
      require('./assets/images/logo.png'),
      require('./assets/images/logo_dark.png'),
      require('./assets/images/star.png'),
      require('./assets/images/avatar.png'),
      require('./assets/images/emptylist.png'),
      require('./assets/images/avatar.jpg'),
      require('./assets/images/nointernet.png'),
      require('./assets/images/contact.png'),
      require('./assets/images/address.png'),
      require('./assets/images/audience.png'),
      require('./assets/images/schedule.png'),
      require('./assets/images/phone.png'),
      require('./assets/images/website.png'),
      require('./assets/images/bookmarked.png'),
      require('./assets/images/checked.png'),
    ]);

    await Promise.all([...imageAssets]);
  }

  async componentDidMount () {

      await Expo.Font.loadAsync({
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });



    await firebase.auth().onAuthStateChanged((user) => {
      if(user !== null) {
        this.setState({
          isLogged: true,
          loaded: true
        });
      } else {
        this.setState({
          isLogged: false,
          loaded: true
        });
      }
    })

  }

  render() {

        if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={this._loadAssetsAsync}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.warn}
        />
      );
    }

    const {isLogged, loaded, isReady} = this.state;

    if ( ! loaded) {
      return (
        <AppPreLoader/>
        );
    }

    if(isLogged && isReady) {
      return (
        <Root>
        <StatusBar barStyle="light-content" translucent={true} backgroundColor={'transparent'} />
        
        <LoggedNavigation />
        </Root>
        );
    } else {
      return (
        <Root>
        <StatusBar barStyle="dark-content" translucent={true} backgroundColor={'transparent'} />
        <GuestNavigation />
        </Root>
        );
    }
  }
}

edit2: Also while installing packages I'm getting these warnings:

warning expo > expo-constants > fbjs > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. warning expo > fbemitter > fbjs > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. warning react-native > fbjs-scripts > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. warning react-native

metro-babel-register > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. warning react-native > @react-native-community/cli > @hapi/[email protected]: joi is leaving the @hapi organization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411) warning react-native > @react-native-community/cli > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained warning react-native > @react-native-community/cli > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained warning react-native > @react-native-community/cli > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained warning react-native > @react-native-community/cli > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained warning react-native > @react-native-community/cli > @hapi/joi > @hapi/topo > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained warning react-native > @react-native-community/cli > metro-core > jest-haste-map > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. warning react-native > @react-native-community/cli > metro-core > jest-haste-map > micromatch snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated warning react-native @react-native-community/cli > metro-core > jest-haste-map > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated warning react-native-web > [email protected]: Check out lodash.merge or merge-options instead. [2/4] Fetching packages... info [email protected]: The platform "win32" is incompatible with this module. info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning "native-base > [email protected]" has unmet peer dependency "eslint@>=3.14.1". warning "native-base > @codler/[email protected]" has incorrect peer dependency "react-native@>=0.63.0". warning " > [email protected]" has unmet peer dependency "create-react-class@>=15.6.2". warning " > [email protected]" has unmet peer dependency "prop-types@^15.0 || ^16.0". warning " > [email protected]" has unmet peer dependency "prop-types@>=15.5.10".

1
Did you try to run npm install? - piotrruss
yes using yarn install. If you want I can share the app file with you. It would be nice of you if you could help me with this. - priyank rawat
I think you should update your question with exact error you get and more details about package.json - piotrruss
Since you bought the app from CodeCanyon, they are responsible to give you support. Otherwise you can opt for a refund I guess. Regarding the above error, it seems to be that app is using Expo. After you install the packages, did you see folders inside node_modules folder ? Did you see any errors while you run the install (probably pasting that log would be helpful I guess). - Akhilesh B Chandran
No, Codecanyon doesn't have a refund policy. Anyways the nnode_modules looks okay to me but I did get warnings while installing packages. - priyank rawat

1 Answers

0
votes

Why you are seeing a GitHub URL instead of react-native version.

Because you are using expo and expo is a library based on react-native you are not using react-native-cli

https://docs.expo.io/

Unable to start the project

Follow these steps to start the peoject.

  1. Remove node_modules folder.
  2. run "yarn install".
  3. run "expo start".

For the font loading have a look at this.

https://docs.expo.io/versions/latest/sdk/font/