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
Related
I am a newbie at react-native and I am facing some issues in the react-native app, after installing 'react-navigation', everything is mentioned in the images. Hope you can help me. Have a good day.
App.js file
MainActivity.java
Package.json
Terminal-issue
Node-cli
First: install #react-navigation/stack by
npm install #react-navigation/stack
using console(console must be opened in your project main directory).
Choose one:
If you are using bare React-Native project install react-gesture-handler using npm install react-native-gesture-handler.
If you are using expo managed project(e.g you created project using npx expo init) - use
npx expo install react-native-gesture-handler.
Docs: https://reactnavigation.org/docs/stack-navigator/
After successfull install please restart your metro/expo server.
Use createNativeStackNavigator from native-stack instead.
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
...
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
...
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
See Installing the native stack navigator library for details.
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 searching for a way to build a Confirmation Code button for an Phone Authentication process , i saw many npm modules for that but that doesn't work me . I just have no idea how can i custom the from react-native , if someone have an idea , thanks
I tried to use this npm modules "react-native-confirmation-code-input" here react-native-confirmation-code-input
but that is doesn't work for me , i have a blank screen ...
here is my code :
import React, {Component} from 'react';
import {View} from 'react-native';
import {Card, CardSection, Input, Button} from '../common';
import CodeInput from 'react-native-confirmation-code-input';
class PhoneForm extends Component {
constructor(props) {
super(props)
}
static navigationOptions = {
header: null,
};
onFulfill(isValid, code) {
}
render() {
return(
<View>
<CodeInput
ref="codeInputRef2"
keyboardType="numeric"
codeLength={5}
className='border-circle'
compareWithCode='12345'
autoFocus={false}
codeInputStyle={{ fontWeight: '800' }}
onFulfill={(isValid, code) => this.onFullFill(isValid, code)}
/>
</View>
);
}
}
export default PhoneForm;
I faced same issue too, but first you need to do import style file after all the problem will be solved.
I'm trying to make the UI for my app in the below picture:
My App's UI
I follow the instruction of React Navigation to make the Custom Navigator according to the UI but it doesn't work in Android. The red screen appears with the message "Cannot Add a child that doesn't have a YogaNode to a parent without a measure function". Here is my code:
import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import TabAboutScreen from './TabAbout';
import TabMyLessonScreen from './TabMyLesson';
import TabTeacherScreen from './TabTeacher';
import { ScrollView, View, Text } from '../../../components';
import TabNavigator from './TabNavigator';
import TopBar from './TopBar';
import styles from './styles';
import CourseHeader from './CourseHeader';
import theme from '../../../theme';
import i18n from '../../../i18n';
export const CourseDetailStackNavigator = createStackNavigator({
TabAbout: TabAboutScreen,
TabMyLesson: TabMyLessonScreen,
TabTeacher: TabTeacherScreen,
}, {
headerMode: 'none',
initialRouteName: 'TabAbout',
});
export default class TabCourseDetail extends Component {
static router = CourseDetailStackNavigator.router;
constructor(props) {
super(props);
this._handleOnBackButtonPress = this._handleOnBackButtonPress.bind(this);
}
_handleOnBackButtonPress() {
// do something
}
render() {
return (
<View style={styles.container}>
<TopBar textButton={i18n.t('CMBack')} title={i18n.t('CDCourseDetail')} onPress={this._handleOnBackButtonPress} />
<ScrollView
style={styles.scrollContainer}
stickyHeaderIndices={[1]}
showsVerticalScrollIndicator={false}
alwaysBounceVertical={false}
>
<CourseHeader />
<TabNavigator />
<View style={styles.test}>
<CourseDetailStackNavigator navigation={this.props.navigation} />
</View>
</ScrollView>
</View>
);
}
}
My evironment: react-navigation: 2.12.1, react-native: 0.55.4
I found out that the problem was that I put inside component by following the document of react navigation. It works well in iOS but doesn't work in Android.
Have you ever faced this problem. I'm looking forward to your solutions. Best regard.
Make sure you have not left any commented code in the return method and also have not left any text (string) without Text tag of react native.
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.