I am trying to run my react native app on my device .
So I am running react-native start
everything looks fine.
and when running react-native run-android I get this error
otherwise, I get this error in my device
My issue was the name I gave the project differed from the name that was being registered in AppRegistry
AppRegistry.registerComponent('proj', () => proj)
proj needs to be the same as the name of the project in the gradle and config files.
You need to export the class. Use the code below
import React, { Component } from 'react'
import { AppRegistry, Text, View } from 'react-native'
export default class proj extends Component {
render() {
return (
<View style={styles.container}> <Text > Welcome to PutainDeBiere! </Text> </View> )
}
}
AppRegistry.registerComponent('proj', () => proj)
Delete / uninstall first the APP installed and then do a clean install of it and see if it works.
Related
This is my second go around installing tailwind rn for a project and I simply can't get it to work.
I ran npm install tailwind-rn followed by npx setup-tailwind-rn and I'm running it in development mode after changing the tailwind.config.js to scan the only app file:
content: ["./App.js"],
The App.js file in the meantime looks like this:
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import { useTailwind } from 'tailwind-rn';
export default function App() {
const tw = useTailwind();
return (
<TailwindProvider utilities={utilities}>
<View>
<Text style={tw('text-blue-600')}>Hello world</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
My tailwind.css and tailwind.json are both populated with defitions for .text-blue-600 and I receive no errors when running, but none of the styles I apply work. Very confused.
I would recommend using tailwind-react-native-classnames from jaredh159. No setup or extra configurations needed after installation. It works out of the box.
This package gives the flexibility of mixing styles.
Install using yarn add twrnc or npm install twrnc.
Get more info from the GitHub page
I have seen this issue posted on stack overflow many times with no clear answer. I'm hoping this question can help me and others out.
I wish to render a URL in react native using react-native-webview
I started a blank react native project using expo init my-app. I ran npm i react-native-webview and react-native link react-native-webview. I then created a file defined as the following
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class WebViewTest extends Component {
render() {
return (
<WebView
source={{ uri: 'https://www.google.com/' }}
style={{ marginTop: 20, width: 400, height: 400 }}
/>
);
}
}
export default WebViewTest;
My app.js imports and renders that file like the following
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import WebViewTest from './Components/WebViewTest';
export default function App() {
return (
<WebViewTest />
);
}
I test this code by running expo start and I open up my project in a web browser.
I then see the following in the browser
I don't get any errors or warnings so where am I going wrong?
As Per The Expo Docs For WebView -
https://docs.expo.io/versions/latest/sdk/webview/
https://www.npmjs.com/package/react-native-webview
It Doesn't Work On Web Using EXPO
I am trying to work with react-navigation, but have some problems. I cant see what is wrong. How can I solve this problem?
What I have tried so far:
Restarted emulator (PC)
Rewrite all code
Created new a project and tried that code there too.
import React, {Component} from 'react';
import {StyleSheet,Text,View} from 'react-native';
import {createStackNavigator,createAppContainer} from "react-navigation";
class HomeScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
export default class App extends Component{
render(){
return(
<AppContainer />
);
}
}
const AppNavigator = createStackNavigator({
Home:{
screen: HomeScreen
}
});
const AppContainer = createAppContainer(AppNavigator);
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF',
}
});
Starting from 0, this is what i did:
1) react-native init navigation
2) cd navigation
3) npm i react-navigation
4) npm i react-native-gesture-handler
5) Copied your code inside App.js
6) react-native start --reset-cache
7) react-native run-android
My android simulator is a Nexus 5X API 28 X86 and works as expected.
Hope this helps you resolve this problem!
Just Use
index.ios.js
or
index.andriod.js.
I was facing the same issue, as you can see in the screenshot (below) of my debugger; for that, I closed the metro bundler and then re-run the app in the terminal. It works for me.
your importing createStackNavigator from the wrong pkg, you need to install react-navigation-stack and then import createStackNavigator from that pkg... hopes this solves your problem
I use to set the main file of my project using AppRegistry.registerComponent(), but projects created with Expo does not support it.
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('my App', () => App);
Then, I use src/App.js as my main file. How can I do it using Expo?
Thanks
Straight from React Native docs facebook.github.io/react-native/docs/appregistry
AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication.
In other words, since Expo isn't a complete real app because it's running on your device Expo app, doesn't have many methods available for you from react-native. Read Expo's docs for more information.
You only need on your App.js:
import React from 'react';
import { View, Text } from 'react-native';
export default () => (
<View>
<Text>Some Text</Text>
</View>
);
Check out this snack: #abranhe/stackoverflow-56694295
I've been moved to a RN project and I'm new to this. If I create a new app/project is starts perfectly on my phone but this one doesn't. It shows "the app has stopped working".
I tried with a simple index removing the rest of the functions but nothing.
How could I see some logs or where could I remove some other configurations/functions?
index.android.js:
"use strict";
import { AppRegistry } from "react-native";
import App from "./src/index";
AppRegistry.registerComponent("ReactNativeTS", () => App);
/src/index.tsx (the default one):
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
android:
"Double tap R on your keyboard to reload,\n" +
"Shake or press menu button for dev menu"
});
interface Props {}
export default class dejavu extends React.Component<any, any> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native2rr!</Text>
<Text style={styles.instructions}>To get started, edit App.tsx</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
The app has stopped working probably means you're running on Android.
If you have Android Studio, you should use Logcat to see what the exception is.
You'll see the full stack trace and can go from there.
You're probably missing some permissions. Try to add this line to your AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
You'll find this file in android/app/src/main.
react-native log-android will display some information about these errors