I'm getting this error when i run the app on android
My AppNavigation code as follow
import React, {Component} from 'react'
import { createStackNavigator } from 'react-navigation-stack'
import Home from '../pages/Home'
import DetailsAdd from '../pages/DetailsAdd'
import ImagesAdd from '../pages/ImagesAdd'
const AppNavigation = createStackNavigator(
{
DetailsAdd: { screen: DetailsAdd },
ImagesAdd: { screen: ImagesAdd },
Home: { screen: Home },
},
{
initialRouteName: 'Home'
}
)
export default AppNavigation
class App extends React.Component {
render() {
return <AppNavigator/>;
}
}
ImagesAdd Class path is correct, How can I fix this issue?
Have you got any app container? if you not, you should check this link.
important note from React Navigation Docs
createStackNavigator is a function that returns a React component. It takes a route configuration object and, optionally, an options object (we omit this below, for now). createAppContainer is a function that returns a React component to take as a parameter the React component created by the createStackNavigator, and can be directly exported from App.js to be used as our App's root component.
Related
I'm currently trying to implement react-navigation into my RN app. RN documentation seems to say that index.js is a required file for RN projects but the first react-navigation example shows all of the initial code in App.js with no index.js file:
https://snack.expo.io/#react-navigation/auth-flow-v3
Is the index.js file only required for standalone RN projects which are not built on Expo? Maybe Expo handles this automatically behind the scenes? The index.js file appears to be required for my standalone RN app and the render() implementation appears to be required in index.js as well. The problem appears to be that the render() implementation in my index.js appears to override whatever is in App.js. Ie I'm expecting initialRouteName: 'AuthLoading' in the App.js configuration to redirect to my AuthLoading component but App.js logic appears to get superceded by the index.js render() implementation.
So what is the proper way to get my index.js and App.js to support react-navigation integration? I'm open to ditching index.js for an alternative implementation/configuration, I just have it in my project because my understanding is that it's required.
I don't really get your confusion but still, this is how it would look.
First, your index.js would be completely normal. It has to look like this or similar:
//index.js
import { AppRegistry } from 'react-native'
import App from './App'
import { name as appName } from './app.json'
AppRegistry.registerComponent(appName, () => App)
This is just normal, right? Then, let's see how it would be in App.jsx
//App.jsx
import React, { Component } from 'react'
import AppContainer from './fromSomeRoute'//replace by your own
export default class App extends Component {
render() {
return (
<AppContainer />
)
}
}
And what is exactly AppContainer? just the component you exported from the file you are using for react-navigation. In here, there is no need to create a class or something like that, you can just create it like this
//fromSomeRoute.jsx
import React from 'react'
import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'
import YourScreen from './YourPathToYourScreen'
const YourScreenStack = createStackNavigator({
YourScreen: {
screen: YourScreen,
navigationOptions: () => ({ //Look documentation for further info
header: null,
}),
},
})
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Screen: YourScreenStack,
//Create more Stacks and add them in here
},
{
initialRouteName: 'Screen',
},
),
)
export default AppContainer
this seems to be a common problem with react navigation once they updated their API
looked at Fix Error: The component for route 'Home' must be a React component
neither profile nor camera components want to load into this tabNavigator. Any suggestions?
Camera.js
import React, { Component } from 'react';
class Camera extends Component {
render() {
return (
<Text>Camera</Text>
);
}
}
export default Camera;
InstaClone.js
import React, { Component } from 'react'
import { View, StyleSheet} from 'react-native'
import Camera from './components/screens'
import {MainFeed, Login, Profile} from './components/screens'
import { createBottomTabNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'
const Tabs = createBottomTabNavigator({
feed: MainFeed,
Camera: Camera,
profile: Profile
});
const MainStack = createAppContainer(createSwitchNavigator({
login: Login,
main: Tabs
}));
const MainStack = createAppContainer(Tabs);
class InstaClone extends Component {
render() {
return <MainStack/>
}
}
export default InstaClone;
I have been trying to get a simple React Native StackNavigation example app working, however I keep getting an
TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
I am not expecting the app to navigate anywhere at this stage, simply deploy with an app bar and some arbitrary text.
import React, { Component } from 'react';
import {AppRegistry, Text} from 'react-native';
import {StackNavigator} from 'react-navigation';
export default class App extends React.Component {
static navigationOptions = {
title: 'Home',
};
render() {
const { navigate } = this.props.navigation;
return (
<Text> Hello World </Text>
);
}
}
const appScreens = StackNavigator({
Home: {screen: App},
})
AppRegistry.registerComponent('IntervalTimer', () => appScreens);
The error is reporting on the const { navigate } = this.props.navigation; declaration. And removing this line does allow the app to deploy but with no header as I would expect.
StackNavigator was installed using NPM and is being imported into the app fine.
There are similar questions posted and I have tried their suggestions. Appreciate any help you can offer!
You can add initialRouteName on StackNavigator's option. Try this.
import React, { Component } from 'react';
import {AppRegistry, Text} from 'react-native';
import {StackNavigator} from 'react-navigation';
class App extends React.Component {
static navigationOptions = {
title: 'Home',
};
render() {
const { navigate } = this.props.navigation;
return (
<Text> Hello World </Text>
);
}
}
export const appScreens = StackNavigator({
Home: { screen: App }
},{
initialRouteName: Home
})
AppRegistry.registerComponent('IntervalTimer', () => appScreens);
If this is just that the prop might have a chance of being undefined, you can just check for undefined.
const { navigate } = this.props.navigation || {};
Assuming at some point the navigation is defined in render, the above should be safe to use. You can try logging it and see if it is always undefined or it gets defined at some point.
console.log(navigate)
The output might be...
undefined
undefined
//defined
Our React Native Project, uses react-navigation Stack navigator. It perfectly running in Android but in ios it gives an error which "Raw Text must be wrapped in an explicit " When we try to navigate between Page.
In ios only first page loading. For example, Default 'Main Page' is the first page in order so android and ios emulator both open the first page. Then if we try to navigate between them in android navigaton works but in ios we get "Raw text Error".
And if we change firs page of stack navigator ios also loaded first page correctly but not navigate between them as expected.
We think navigated pages may be problem, so we create a blank page and navigate to there, but issue still continue in iOS.
I am really glad to hear suggestions.
This is how we navigate between pages:
this.props.navigation.navigate('ProfileSayfa');
This is our index.android.js and also index.android.ios:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {StackNavigator,DrawerNavigator } from "react-navigation";
import LoginPage from "./src/pages/login-page/login-page";
import MainPage from "./src/pages/main-page/main-page";
import MekanAraSonuc from "./src/pages/MekanAra/MekanAraSonuc";
import MekanAra from "./src/pages/main-page/tabs/mekan_ara";
import NewsTab from "./src/pages/main-page/tabs/news-tab";
import StartPage from "./src/pages/start-page/start-page";
import AllMekan from "./src/pages/AllMekan/AllMekan";
import MekanSayfa from "./src/pages/MekanSayfa/MekanSayfa";
import RezervasyonSayfa from "./src/pages/MekanSayfa/RezervasyonSayfa";
import FirsatSayfa from "./src/pages/MekanSayfa/FirsatSayfa";
import EtkinlikSayfa from "./src/pages/MekanSayfa/EtkinlikSayfa";
import ProfileSayfa from "./src/pages/MekanSayfa/ProfileSayfa";
import EtkinlikSonuc from "./src/pages/AllMekan/EtkinlikSonuc";
import FirsatlarSonuc from "./src/pages/AllMekan/FirsatSonuc";
import IconME from 'react-native-vector-icons/FontAwesome';
import Drawer from "./src/pages/MyComponents/Drawer";
import SearchForm from "./src/pages/MyComponents/SearchForm";
import RezervasyonForm from "./src/pages/Forms/RezervasyonForm";
import FirsatForm from "./src/pages/Forms/FirsatForm";
import CalendarListView from "./src/pages/Forms/CalendarListView";
export default class moreAwesome extends Component {
render() {
return (
<LoginApp
ref={nav => {
this.navigator = nav;
}}
/>
);
}
}
const LoginApp = StackNavigator({
MainPage: {
screen: MainPage,
},
LoginPage: { screen: LoginPage },
MekanAraSonuc:{screen:MekanAraSonuc},
MekanAra:{screen:MekanAra},
NewsTab:{screen:NewsTab},
AllMekan:{screen:AllMekan},
MekanSayfa:{screen:MekanSayfa},
FirsatSayfa:{screen:FirsatSayfa},
EtkinlikSayfa:{screen:EtkinlikSayfa},
EtkinlikSonuc:{screen:EtkinlikSonuc},
FirsatlarSonuc:{screen:FirsatlarSonuc},
ProfileSayfa:{screen:ProfileSayfa},
RezervasyonSayfa:{screen:RezervasyonSayfa},
SearchForm:{screen:SearchForm},
RezervasyonForm:{screen:RezervasyonForm},
FirsatForm:{screen:FirsatForm},
CalendarListView:{screen:CalendarListView},
});
AppRegistry.registerComponent('myproje', () => moreAwesome);
Apperantly, when you create static Navigation Options for an page, "title" can be empty string in Android but not on iOS.
When we change this,
static navigationOptions = ({ navigation }) => {
return {
title: '',
};
};
To this:
When we change this,
static navigationOptions = ({ navigation }) => {
return {
title: ' ',
};
};
And Also be careful intial page gives this error not target page!
I'm trying to use react-native-navigation as navigation system in my react-native. I've wrote a very simple app for test it, but this app crashes(without giving me any error or info) after the splash screen.
my index.ios.js:
/* eslint-disable no-unused-vars */
import App from './src/app';
my app.ios.js:
import {
Platform
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import { registerScreens } from './screens';
registerScreens(); // this is where you register all of your app's screens
// this will start our app
Navigation.startTabBasedApp({
tabs: [{
label: 'One',
screen: 'AwesomeProject.Home', // this is a registered name for a screen
icon: require('../img/one.png'),
selectedIcon: require('../img/one_selected.png'), // iOS only
title: 'Screen One'
}]
});
my screens.js
import { Navigation } from 'react-native-navigation';
import Home from './containers/Home';
import About from './containers/About';
// register all screens of the app (including internal ones)
export function registerScreens() {
Navigation.registerComponent('AwesomeProject.Home', () => Home);
Navigation.registerComponent('AwesomeProject.About', () => About);
}
my Home.js:
import React, { Component } from 'react';
import { Text } from 'react-native';
class Home extends Component {
render() {
return (
<Text>Home!</Text>
);
}
}
export default Home;
my About.js:
import React, { Component } from 'react';
import { Text } from 'react-native';
class About extends Component {
render() {
return (
<Text>About!</Text>
);
}
}
export default About;
You can see a full gist here: https://gist.github.com/inchr/d0184f4ae91abd6036a2fa61725744c9
I've done very test on how loads the tabs in startTabBasedApp() and I've tried to load only a screen too.
Any idea on the reason of the crash/close after the splash screen ?
Thanks.
Ok the problem was that after I've run: react-native link
I've forgot to edit the AppDelete.m file as explained here:
https://github.com/wix/react-native-navigation/wiki/Installation---iOS#installation---ios
https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m