So i was starting to code a react native app and until this part was working fine:
import React from 'react';
import { View, Text, Image } from 'react-native';
import abacatezinImg from '..assets/abacatezin.png'
export function LoginScreen(){
return(
<View>
<Text>
Faça seu login para começar
</Text>
</View>
)
}
But then after adding <Image source={abacatezinImg} /> between View and Text i got this error: undefined Unable to resolve module ..assets/abacatezin.png
I already tried somethings like modifying the package json with some solutions i found but didnt work.
My packae json file:
{
"name": "timer_vovojuju",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "~47.0.9",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-web": "~0.18.9"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~18.0.14",
"#types/react-native": "~0.70.6",
"typescript": "^4.6.3"
},
"private": true
}
This error might be because of your image path import. Try importing like this import abacatezinImg from '../assets/abacatezin.png'
Related
I have been trying to use tailwind for my react native project but for some reason it won't work.
I've done "npm install tailwind-rn" and then "npx setup-tailwind-rn" but nothing changes in my app.
This is the code I have
import { StatusBar } from 'expo-status-bar';
import {SafeAreaView, View, Text} from 'react-native';
import {TailwindProvider, useTailwind} from 'tailwind-rn';
import utilities from './tailwind.json';
const App = () => {
const tailwind = useTailwind();
return (
<SafeAreaView style={tailwind('h-full')}>
<View style={tailwind('pt-12 items-center')}>
<View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
<Text style={tailwind('text-blue-800 font-semibold')}>
Hello Tailwind
</Text>
</View>
</View>
</SafeAreaView>
);
};
const Root = () => (
<TailwindProvider utilities={utilities}>
<App />
</TailwindProvider>
);
export default Root;
but all it does is get the "Hello Tailwind" sentence to the top left of the screen. Can anybody help me with this?
I think you didn't finish the remaining configuration
STEP1: What you need to do is first go and follow each and every instruction and you will be able to solve your issue.Tailwind CSS RN Docs
STEP2: Check your package.json it should look like this-
{
"name": "expo-tailwind-example",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
"dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
},
"dependencies": {
"expo": "~44.0.2",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-web": "0.17.1",
"tailwind-rn": "^4.2.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"concurrently": "^7.0.0",
"postcss": "^8.4.12",
"tailwindcss": "^3.0.23"
},
"private": true
}
Initially your utilities will be empty, Do not panic but as you use classes it will be filled with styles.
CHILL
I can't require react-native-fs, the app throws the exception:
'main' has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
I installed it following the guide from the oficial docs.
App.js:
import React from 'react';
import { View } from 'react-native';
const RNFS = require("react-native-fs");
export default function App() {
return (
<View>
</View>
);
}
package.json:
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"expo": "~39.0.2",
"expo-splash-screen": "~0.6.0",
"expo-status-bar": "~1.0.2",
"expo-updates": "~0.3.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.2",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.10.1",
"react-native-unimodules": "~0.11.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-jest": "~25.2.6",
"jest": "~25.2.6",
"react-test-renderer": "~16.13.1"
},
"jest": {
"preset": "react-native"
},
"private": true
}
Obviously, if I remove the require line, the error disappears.
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
}
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';
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