If I create a new empty react-native project with this code in App.js, application will be crashed, without providing any error.
import React from 'react'
import { ART, View } from 'react-native'
const { Surface, Group, Shape } = ART
export default class App extends React.Component {
render(){
return (
<View>
<Surface width={200} height={100}>
<Group x={0} y={0}>
<Shape
d={"M-68.9646319937036,-29.476762610114324A75,75,0,0,1,-49.345310456503256,-56.48044206582762L-20.635195356782273,-21.775874553905552A30,30,0,0,0,-27.086713440010442,-12.896121704557451Z"}
stroke={"#2ca02c"}
strokeWidth={3}
/>
</Group>
</Surface>
</View>
)
}
}
Am I use ART library incorrectly? I also tried
react-native link art
but it didn't work.
Packages:
react-native: 0.49.3
react: 16.0.0-beta.5
Target Platform: Android Emulator - Nexus_5x_API_26_x86
You can resolve this issue by using software graphics emulation in the AVD properties
Related
Hi everyone I'm trying to add a Picker on my app but on my phone(IOS or Android) is telling me an error but in web browser is working?
Here is my code:
import React from 'react'
import { View, Text } from 'react-native'
import { Picker } from '#react-native-community/picker'
export default function UnitsPicker() {
return (
<View>
<Picker>
<Picker.Item label="C°" value="metric" />
<Picker.Item label="F°" value="imperial" />
</Picker>
</View>
)
}
I imported it on my main code.
Have you checked if the file is in fact there? This normally happens when installing/updating libraries. Just close all your metro bundlers / consoles and start fresh.
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 wish to add the React Native MapView Component to the new project I have created using expo. The instructions explain that I need to modify files in the iOS and Android folders, but expo doesn't generate iOS and Android folders, right?
Can I use this component in my project?
It's included as per https://docs.expo.io/versions/latest/sdk/map-view/
"No setup required for use within the Expo app, or within a standalone app for iOS."
import React from 'react';
import MapView from 'react-native-maps';
export default class App extends React.Component {
render() {
return (
<MapView style={{flex: 1}} />
);
}
}
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
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.