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
Related
The screen is Wrapped inside KeyboardAvoidingView and ScrollView components. Some of the last inputs are partially hidden by the keyboard. If I set the behaviour prop to anything, but undefined a white element comes up after keyboard. All I would like to do is to make the screen scroll down like 20 more pixels... I feel like I have tried everything so far, even setting the keyboardVerticalOffset prop, but nothing seems to work. If that offset was transparent it would be perfect...
In the following code a View component is passed to children prop
import { FunctionComponent, ReactNode } from 'react';
import { KeyboardAvoidingView, ScrollView } from 'react-native';
interface WrapperProps {
children: ReactNode;
}
const KeyboardAvoidingWrapper: FunctionComponent<WrapperProps> = ({children}) => {
return (
<KeyboardAvoidingView behavior='height' keyboardVerticalOffset={100}>
<ScrollView>
{children}
</ScrollView>
</KeyboardAvoidingView>
);
};
Instead, You can use react-native-keyboard-aware-scroll-view.
I solved my issue with: react-native-avoid-softinput
INSTALLATION:
yarn add react-native-avoid-softinput
On iOS additionally run: npx pod-install
USAGE:
import React from "react";
import { AvoidSoftInputView } from "react-native-avoid-softinput";
const MyComponent = () => {
return (
<AvoidSoftInputView>
{/** Content that should be pushed above the keyboard */}
</AvoidSoftInputView>
);
};
TROUBLESHOOTING:
requireNativeComponent: "AvoidSoftInputView" was not found in the UIManager.
Solution: https://stackoverflow.com/a/65513391/14056591
Try again cd ios && pod install
If it doesn't help, try restarting the simulator, delete and rebuild the app. Restarting Xcode and metro bundler is also a good idea.
If this does not solve your issue, I came across another promising library, but I did not get to use it: react-native-keyboard-controller
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'm using the StatusBar component in react native (Android). Here is an example code from my App.js component:
import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';
import { RootNavigator } from './components/Router';
export default class MainApp extends Component {
render() {
return (
<View style={{flex: 1}}>
<StatusBar backgroundColor='black' barStyle="light-content"/>
<RootNavigator />
</View>
);
}
}
The StatusBar is working properly when you launch the app, when you navigate through the entire app and when put in background and then return.
It's NOT working when exiting the app by pressing back button. When you launch the app again, the statusbar backgroundColor is suddenly grey (default color).
Is this a known bug or something? I can't figure out how to fix this.
Alright, shortly after submitting the question I found out about another strategy, using imperative API. I avoided it at first since according to official documentation:
For cases where using a component is not ideal, there
is also an imperative API exposed as static functions on the
component. It is however not recommended to use the static API and the
component for the same prop because any value set by the static API
will get overriden by the one set by the component in the next render.
Here is my revised code:
import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';
import { RootNavigator } from './components/Router';
export default class MainApp extends Component {
componentWillMount() {
StatusBar.setBackgroundColor('black');
}
render() {
return (
<View style={{flex: 1}}>
<StatusBar backgroundColor='black' barStyle="light-content"/>
<RootNavigator />
</View>
);
}
}
It seems like this works properly now. When I press the back button and launch the app again the statusbar remains black. I won't declare this as the correct answer just yet in case someone has an explanation why this happens or a better solution.
Edit: This also appears to work only 90% of the time or so. I've noticed, once in a while, when pressing back button and returning the statusbar remained grey. It is absolutely boggling at this point, I suppose componentWillMount isn't always triggered?
Edit2: After switching to componentDidMount instead of componentWillMount as suggested, it seems to be working 100% of the time now.
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.