Cannot run React Native project with Expo - react-native

I have an old React Native project, now i want to run it with Expo. The problem is Expo software stuck at “waiting for package and tunnel to start” when i try to use Expo to open the project and start it. I am working on MacOS with watchman already installed.
Here's the structure of my project
My app.json:
{ "name": "myapp", "displayName": "myApp", "expo": { "sdkVersion": "28.0.0" } }
package.json:
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"expo": "^28.0.0",
"react": "15.4.1",
"react-native": "0.42.0",
"react-native-calendar-strip": "^0.1.4",
"react-native-check-box": "^1.0.4",
"react-native-checkbox": "^1.1.0",
"react-native-code-push": "1.17.0-beta",
"react-native-collapsible": "0.8.0",
"react-native-datepicker": "^1.6.0",
"react-native-fetch-blob": "0.10.6",
"react-native-image-picker": "0.26.2",
"react-native-keyboard-aware-scroll-view": "^0.2.9",
"react-native-modal-picker": "0.0.16",
"react-native-modalbox": "1.3.9",
"react-native-pdf": "1.2.4",
"react-native-picker": "4.0.18",
"react-native-signature-pad": "git+https://github.com/silverspace/react-native-signature-pad/#greg/android_blank_workaround",
"react-native-simple-store": "^1.2.0",
"react-native-vector-icons": "4.0.1",
"react-navigation": "1.0.0-beta.7",
"react-redux": "5.0.3",
"realm": "2.11.0",
"redux": "3.6.0",
"redux-logger": "2.8.2",
"redux-thunk": "2.2.0",
"tipsi-stripe": "3.2.0"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "20.0.4",
"react-test-renderer": "15.4.1"
},
"jest": {
"preset": "react-native"
}
}
index.ios.js and and index.android.js have the same code: import './App';
Here's my App.js:
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
AppState,
DeviceEventEmitter
} from 'react-native';
import { BackAndroid } from 'react-native'
import { NavigationActions, StackNavigator } from 'react-navigation';
// Redux
import { Provider } from 'react-redux'
import store from './app/store'
import codePush from 'react-native-code-push';
import HomeNavigation from './app/Home/screens/HomeNavigation'
import simpleStore from 'react-native-simple-store';
import { HOST } from './app/Common/constants';
const GET_USER_URL = `${HOST}/api/user`;
let codePushOptions = {
checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
installMode: codePush.InstallMode.ON_NEXT_RESUME
};
class App extends React.Component {
//Doing something here...
render(){
return(
<Provider store={store}>
<HomeNavigation />
</Provider>
)
}
}
export default CodePushApp = codePush(codePushOptions)(App);
AppRegistry.registerComponent('MypApp', () => CodePushApp);
I have try to install Expo on a Window PC but still have the same issues when try to run this project.

I know this is late but if you have already installed expo-cli then try changing the scripts section of your package.json file to the following
"scripts": {
"start": "expo start",
"eject": "expo eject",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "jest"
}
This worked for me

Related

How to use container in react native?

I am very new to React native I am trying to show content it is showing from starting. But I have
To show the content from the container, but I don't know how to apply this in React native. So
So someone please help me how to use container in React native.
In this component I tried some code please check it once
This is App.js
import React from 'react';
import {View, Text} from 'react-native';
const App = props => {
return (
<View>
<Text>Hi Mark</Text>
</View>
);
};
export default App;
These are the packages I installed in my React native project
{
"name": "testone",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/native": "^5.3.2",
"#react-navigation/stack": "^5.3.6",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^1.0.0",
"react-native-screens": "^2.7.0"
},
"devDependencies": {
"#babel/core": "7.9.6",
"#babel/runtime": "7.9.6",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.58.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
Note I am not using expo I am using pure React native for app development.
Add margin style property to root View to make it like container
import React from "react";
import { Text, View } from "react-native";
const App = () => {
return (
<View style={{ margin:100 }}>
<Text>Hi There!</Text>
</View>
);
};
export default App;

i could not resolve this bundling error with react navigation v4

bundling failed: Error: Unable to resolve module react-navigation-stack from App.js: react-navigation-stack could not be found within the project.
i tried removing the node modules and reinstalling them, clearing the cache, trying the same in a new fresh project but no result
Package.json file
{
"name": "navigator",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.9.0",
"react-native": "0.61.2",
"react-native-gesture-handler": "^1.4.1",
"react-native-reanimated": "^1.3.0",
"react-native-screens": "1.0.0-alpha.23",
"react-navigation": "^4.0.10"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
App.js
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './src/screens/HomeScreen';
import ComponentScreen from './src/screens/ComponentScreen';
const navigator = createStackNavigator(
{
Home: HomeScreen
},
{
initialRouteName: 'Home',
defaultNavigationOptions: {
title: 'App'
}
}
);
export default createAppContainer(navigator);
Your package.json does not have the module you want to use. You need to install a module.
yarn add react-navigation-stack
or
npm install react-navigation-stack
npm install react-navigation-stack
npm install react-navigation-stack --save

React-native: Page navigation code returned error

I'm building a react-native app using expo and I'm using the react native navigation library to navigate between pages and link my button to the next page but I've received an error. What do I need to change to get the pages up and to get the button (on the home page) linked to the second page?
Error: Unable to resolve "fbjs/lib/areEqual" from "node_modules\react-native-gesture-handler\createHandler.js".
UPDATE: Now shoring this error too: Unable to resolve "./Components/DatePicker.js" from "screens\Home.js" bus is it possible that it's not related to the datePicker? I think it's about the react-native-gesture-handler. Do I need to do anything specifically for Android if I'm using expo to navigate to different screens?
AppNavigator.js
import { createStackNavigator } from 'react-navigation';
import Home from './screens/Home';
import Plan from './screens/Plan'
const AppNavigator = createStackNavigator({
Home: { screen: Home },
Plan: { screen: Plan},
});
export default AppNavigator;
App.js
import React from 'react';
import AppNavigator from './AppNavigator';
export default class App extends React.Component {
render() {
return (
<AppNavigator/>
);
}
}
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": {
"#unimodules/react-native-adapter": "^3.0.0",
"deep-equal": "^1.0.1",
"expo": "^34.0.1",
"expo-constants": "~6.0.0",
"expo-image-picker": "~6.0.0",
"expo-permissions": "~6.0.0",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
"react-native-calendar-select": "^0.1.2",
"react-native-datepicker": "^1.7.2",
"react-native-gesture-handler": "^1.3.0",
"react-native-image-picker": "^1.0.2",
"react-native-unimodules": "^0.5.3",
"react-native-web": "^0.11.4",
"react-navigation": "^3.11.1"
},
"devDependencies": {
"babel-preset-expo": "^6.0.0"
},
"private": true
}

Error trying to import a module on expo bunddle: Unable to resolve "../shared/baseUrl" from "components/MenuComponent.js"

I have been trying to run react-native app on expo on my android phone. I haven't been able because I am getting an error Unable to resolve "../shared/baseUrl" from "components/MenuComponent.js" on expo.
This is the folder tree of my project where you can see baseUrl and MenuComponent.js (The other js modules on components import baseUrl.js with error.):
The following is the imports section of the components/MenuComponent.js:
import React, { Component } from 'react';
import { View, FlatList } from 'react-native';
import { Tile } from 'react-native-elements';
import { connect } from 'react-redux';
import { baseUrl } from '../shared/baseUrl';
The following is the content of shared/baseUrls.js
export const baseUrl = 'http://localhost:3001/';
This is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^1.0.0-beta8",
"react-navigation": "2.0.1",
"react-redux": "5.0.7",
"redux": "4.0.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.2.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
I am using those packages versions because they are the suggested on the course I am taking.
To solve the issue, I have tried
yarn cache clean
expo r -c
Clear data/cache of expo on my cellphone.
The following is the content of shared/baseUrls.js
Are you absolutely sure the paths are correct?
What happens if you move the file in the same folder temporarily and include it from there?
import { baseUrl } from './baseUrl';

undefined is not an object(evaluating'_react2.Proptypes.store')?

I am trying to build the taxi booking app. From i get the error
undefined is not an object (evaluating'_react2.Proptypes.store'). I have tried all the other solutions in previously asked but it was not helpful. Any help on this is appreciated.
import React, { Component, PropTypes} from "react";
import { Router } from "react-native-router-flux";
import scenes from "../routes/scenes";
import { Provider } from "react-redux";
export default class AppContainer extends Component{
static propTypes = {
store: PropTypes.object.isRequired
}
render(){
return(
<Provider store = {this.props.store}>
<Router scenes = {scenes} />
</Provider>
)
}
}
package.json
{
"name": "TaxiApp",
"version": "0.0.7",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "^2.3.5",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-addons-update": "^15.6.2",
"react-native": "0.51.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.0.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.0.4",
"react-test-renderer": "16.0.0",
"redux-logger": "^3.0.6"
},
"jest": {
"preset": "react-native"
}
}
Ever since react version 16.0.0 forward, prop types cannot be taken from React itself as you did on the first line. You need to do the following;
npm install prop-types --save
Add the following import and remove the PropTypes from first line:
import PropTypes from 'prop-types';
After this, it should work like a charm.