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!
Related
I have use react-native-photo-editor library to design the image, When I open the app I'm getting this alert automatically.
here is my code and screenshot.
import React, { Component } from 'react';
import { RNPhotoEditor } from 'react-native-photo-editor';
import RNFS from 'react-native-fs';
export default class App extends Component {
componentDidMount() {}
render() {
return RNPhotoEditor.Edit({
path: RNFS.DocumentDirectoryPath + '/image.jpg'
});
}
}
Just I have rendered the element with View tag the alert gone and app working
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.
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
---------index.js--------
import { AppRegistry } from 'react-native';
import Navigate from './Navigate';
AppRegistry.registerComponent('form1', () => Navigate);
----Navigate.js-----
import React from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import TabsList from './TabsList';
export const StackTab1 = StackNavigator({
TabList: { screen: TabsList},
});
export const Navigate = DrawerNavigator(
{
Tab1: { screen : StackTab1 },
Tab2: { screen : StackTab1 },
Tab3: { screen : StackTab1 }
});
Whenever I try to run my android simulator, I'm getting that error. All modules are installed, no errors being thrown within my IDE except for the one that's appearing in my simulator.
Picture below of error:
You are not importing Navigate properly.
Use
import { Navigate } from './Navigate';
instead of
import Navigate from './Navigate';
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