I am trying to access the props.route.params.data information from the react navigation route prop, however when I try to output it on the screen it just says TypeError: undefined is not an object(evaluating props.routes.params). I know I have correctly followed the path to that data object because I console.log it on the console and it outputs that data. However when I want to put put it on the user interface it gives me that error. Been searchong online but no one has the same issue, maybe because the way to get the params using react stack navigator v5 is by route.params, and v5 came outa couple of months ago. So I will post my code below along with the console.log screen, the error message, and also the object that I am picking from. Thank you!
// App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View , StyleSheet } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import About from "./screens/About";
import Home from "./screens/Home";
import PokeDetails from "./screens/PokeDetails"
import { createStackNavigator } from '#react-navigation/stack';
const App =()=> {
const Stack = createStackNavigator();
return(
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home}/>
<Stack.Screen name="PokeDetails" component={PokeDetails}/>
<Stack.Screen name="About" component={About}/>
</Stack.Navigator>
</NavigationContainer>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1
}
})
export default App;
// Home.js
import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";
import { useRoute } from '#react-navigation/native';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
.then((res)=> res.json())
.then((response)=> {
this.setState({
isLoading: false,
dataSource: response.results,
})
console.log("RESPONSE",response)
console.log("RESPONSE.RESSSULTS",response.results)
})
}
render() {
const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
return(
<View style={GlobalStyles.container}>
<View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
<FlatList
keyExtractor={(item, index) => item.name}
numColumns={1}
data={this.state.dataSource}
renderItem={({item})=>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails',
{data:"hello"})}>
<PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
</TouchableOpacity>
}/>
<Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
</View>
)
}
}
export default Home;
// PokeDetails.js
import React from "react";
import { View, Text , Image, Button} from "react-native";
import {GlobalStyles} from "../styles/GlobalStyles";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useRoute } from '#react-navigation/native';
const PokeDetails =(props)=> {
console.log(props)
console.log(props.route.params.data, "PROPSSSSSSSSSSS");
return(
<View style={GlobalStyles.container}>
<Image source={{uri: props.imageUrl}} style={{height: 50, width: 50}}/>
<Text>{props.route.params.data}</Text>
</View>
)
}
export default PokeDetails;
You are getting the following error because you are pokedetails in your home screen, you can get the data props only if you navigate to pokedetails screen, the thing you can do something like this:
change your Home.js like this:
import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import PokeDetails from "./Pokedetails";
import { useRoute } from '#react-navigation/native';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
.then((res)=> res.json())
.then((response)=> {
this.setState({
isLoading: false,
dataSource: response.results,
})
console.log("RESPONSE",response)
console.log("RESPONSE.RESSSULTS",response.results)
})
}
render() {
const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
return(
<View>
<View>{showIndicator}</View>
<FlatList
keyExtractor={(item, index) => item.name}
numColumns={1}
data={this.state.dataSource}
renderItem={({item})=>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails',
{data:"hello", imageUrl:`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}>
<PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
</TouchableOpacity>
}/>
<Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
</View>
)
}
}
export default Home;
Here iam just passing imageUrl also for reference purpose.
change your pokedetails.js some thing like this:
import React from "react";
import { View, Text , Image, Button} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useRoute } from '#react-navigation/native';
const PokeDetails =(props)=> {
console.log("props is",props);
if(props.navigation == undefined)
{
return(
<View>
<Image source={{uri: props.imageUrl}} style={{height: 50, width: 50}}/>
<Text>{props.name}</Text>
</View>
)
}
else{
return(
<View>
<Image source={{uri: props.route.params.imageUrl}} style={{height: 50, width: 50}}/>
<Text>{props.route.params.data}</Text>
</View>
)
}
}
export default PokeDetails;
Here iam just adding a if condition to check whether the screen is loaded is navigated from another screen.
when the Homescreen loaded it will be something like this:
On clicking bulbassor you will be navigating to the pokedetails screen where here iam showing the details you are sending through navigation:
Hope this helps!
Related
So i'm currently developing a react native application, but i'm getting this error. I think it may have to do with the version of some libraries that i'm using but i'm not sure.
This is my app.js file
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import HomeScreen from './screens/HomeScreen';
import MapScreen from './screens/MapScreen';
import { store } from './store';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import 'react-native-gesture-handler';
import {NavigationContainer} from '#react-navigation/native';
import { createStackNavigator } from "react-navigation-stack";
export default function App() {
const Stack = createStackNavigator();
return (
<Provider store={store}>
<NavigationContainer>
<SafeAreaProvider>
<Stack.Navigator>
<Stack.Screen
name='HomeScreen'
component={HomeScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='MapScreen'
component={MapScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
</SafeAreaProvider>
</NavigationContainer>
</Provider>
);
}
My HomeScreen.js file, which is rendered when the app starts.
import React from 'react'
import { StyleSheet, Text, View, SafeAreaView, Image } from 'react-native'
import tw from 'tailwind-react-native-classnames';
import NavOptions from '../components/NavOptions';
const HomeScreen = () => {
return (
<SafeAreaView style = {tw`bg-white h-full`}>
<View style = {tw`p-5`}>
<Image
style = {{
width: 100,
height: 100,
resizeMode: "contain",
}}
source={{
uri: "https://links.papareact.com/gzs"
}}
/>
<NavOptions/>
</View>
</SafeAreaView>
)
}
export default HomeScreen
My MapScreen.js file, the other screen I have.
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
const MapScreen = () => {
return (
<View>
<Text>Here is the map stuff...</Text>
</View>
)
}
export default MapScreen
The NavOptions.js file, which renders two buttons on the screen to select one.
import { useNavigation } from '#react-navigation/native';
import React from 'react'
import { FlatList, Text, Touchable, TouchableOpacity, View, Image } from 'react-native'
import { Icon } from 'react-native-elements/dist/icons/Icon';
import tw from 'tailwind-react-native-classnames';
const data = [
{
id: "123",
title: "Get a ride",
image: "https://links.papareact.com/3pn",
screen: "MapScreen",
},
{
id:"456",
title:"Order food",
image: "https://links.papareact.com/28w",
screen: "EatsScreen", // Change in future....
}
]
const NavOptions = () => {
const navigation = useNavigation();
return (
<FlatList
data = {data}
horizontal
keyExtractor = {(item) => item.id}
renderItem={({item}) => (
<TouchableOpacity
onPress={() => navigation.navigate(item.screen)}
style = {tw`p-2 pl-6 pb-8 pt-4 bg-gray-200 m-2 w-40`}
>
<View>
<Image
style = {{
width: 120,
height: 120,
resizeMode: "contain",
}}
source={{
uri: item.image
}}
/>
<Text style={tw`mt-2 text-lg font-semibold`}>{item.title}</Text>
<Icon
style = {tw`p-2 bg-black rounded-full w-10 mt-4`}
name="arrowright" color="white" type="antdesign"/>
</View>
</TouchableOpacity>
)}
/>
)
}
export default NavOptions
normally undefined is not a object occurs when you are asking for parameter value from parameter that does not exist.
for example:
let data = [
{
arr:[{name:"aaa"},{name:"bbb"}],
b:'outside1'
},
{
arr:[{name:"ccc"},{name:"ddd"}],
b:'outside2'
},
]
in here if you right data[0].b then it will return outside1
but data[0].b.c will be undefine and data[0].b.c.d will give error undefined is not a object.
in your code I am not seeing any this kind of pattern so please check your code if this is happening anywhere .
For others with the same error but in different context:
I had this issue when I imported modules from 'aws-amplify-react-native', but 'aws-amplfify-react-native' wasn't installed and so it was "undefined"
I'm kind of sure that the export-import is well done, because I use export default.
It was a working code when I had both the sign-up and log-in forms in the same page.
Now I want to navigate to two different pages through two buttons, and it gives me this error in loginIndex.js, that is the file in which I created the NavigationStack.
The fact is that it worked perfectly before adding the two new files to the stack, but now it tells me that 'Welcome' is not a React component.
Dependencies
src
/components
/screens
/welcome
/index.js
/sign_up
/SignUp.js
/login
/login.js
/routes
/loginStack.js
index.js
// #flow
import React, { Component } from 'react';
import {
TouchableOpacity,
StatusBar,
Animated,
FlatList,
Image,
View,
Text,
YellowBox,
} from 'react-native';
import Loading from '~/components/common/Loading';
import {withNavigation} from 'react-navigation';
import Navigation from '~/routes/loginStack'
import ROUTE_NAMES from '~/routes/loginStack'
const Welcome = ({navigation}) => {
onClickLoginButton = (): void => {
const navigation = this.props.navigation
navigation.navigate(ROUTE_NAMES.LOGIN)
};
onClickSignUpButton = (): void => {
const navigation = this.props.navigation
navigation.navigate(ROUTE_NAMES.SIGNUP)
};
onLoadBackgroundImage = (): void => {
this.setState({
isBackgroundImageLoaded: true,
});
};
return (
<Container>
<Navigation/>
<Loading />
<StatusBar
backgroundColor="transparent"
barStyle="light-content"
translucent
animated
/>
<BackgroundImage
onLoad={this.onLoadBackgroundImage}
/>
{isBackgroundImageLoaded && (
<Wrapper>
<TitleWrapper>
<Title></Title>
</TitleWrapper>
<NavigationTitleWrapper>
<TouchableOpacity
onPress={this.onClickLoginButton}
>
<Animated.Text
>
Accedi
</Animated.Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onClickSignUpButton}
>
<Animated.Text>
Registrati
</Animated.Text>
</TouchableOpacity>
</NavigationTitleWrapper>
</Wrapper>
)}
</Container>
);
}
export default withNavigation(Welcome);
loginStack.js
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import Welcome from '../components/screens/welcome/index';
import MainStack from './mainStack';
import Login from '~/components/screens/log_in/Login';
import SignUp from '~/components/screens/sign_up/SignUp';
export const ROUTE_NAMES = {
LOGIN: 'LOGIN',
MAIN_STACK: 'MAIN_STACK',
WELCOME: 'WELCOME',
SIGNUP: 'SIGNUP',
};
const LoginStack = createSwitchNavigator(
{
[ROUTE_NAMES.WELCOME]: {
screen: Welcome,
},
[ROUTE_NAMES.LOGIN]: {
screen: True_login,
},
[ROUTE_NAMES.SIGNUP]: {
screen: SignUp,
},
[ROUTE_NAMES.MAIN_STACK]: {
screen: MainStack,
},
},
{
initialRouteName: ROUTE_NAMES.SPLASH,
},
);
const AppContainer = createAppContainer(LoginStack);
export default AppContainer;
You are using 'setState' but using functional comoponents.
You should use hooks instead..
In addition you use 'this' but again, relevant for classes..
You are adding typescript annotations but using javascript..
Try to change the index file lto this:
import React from 'react';
import {
TouchableOpacity,
StatusBar,
Animated
} from 'react-native';
import Loading from '~/components/common/Loading';
import { withNavigation } from 'react-navigation';
import Navigation from '~/routes/loginStack'
import ROUTE_NAMES from '~/routes/loginStack'
const Welcome = ({ navigation }) => {
const [isBackgroundImageLoaded, setIsBackgroundImageLoaded] = React.useState(false);
onClickLoginButton = () => {
navigation.navigate(ROUTE_NAMES.LOGIN)
};
onClickSignUpButton = () => {
navigation.navigate(ROUTE_NAMES.SIGNUP)
};
onLoadBackgroundImage = () => {
setIsBackgroundImageLoaded(true);
};
return (
<Container>
<Navigation />
<Loading />
<StatusBar
backgroundColor="transparent"
barStyle="light-content"
translucent
animated
/>
<BackgroundImage
onLoad={onLoadBackgroundImage}
/>
{isBackgroundImageLoaded && (
<Wrapper>
<TitleWrapper>
<Title></Title>
</TitleWrapper>
<NavigationTitleWrapper>
<TouchableOpacity
onPress={onClickLoginButton}
>
<Animated.Text
>
Accedi
</Animated.Text>
</TouchableOpacity>
<TouchableOpacity
onPress={onClickSignUpButton}
>
<Animated.Text>
Registrati
</Animated.Text>
</TouchableOpacity>
</NavigationTitleWrapper>
</Wrapper>
)}
</Container>
);
}
export default withNavigation(Welcome);
So I have built a pokemon application that would display pokemon with their images and details. On the homescreen, I have it so that the first 20 pokemon are shown as a preview. Then if the user wants to learn more about the pokemon, they can press on the pokemon and it would bring the user to the "PokeDetails" screen. However, when I press on the pokemon, it brings me to the "PokeDetails" page but the page is blank. Except for the text that I explicitly render from the "PokeDetails" screen. I have the code for both screens below. Any help is appreciated. Thank you
//Home.js
import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
.then((res)=> res.json())
.then((response)=> {
this.setState({
isLoading: false,
dataSource: response.results,
})
console.log("RESPONSE",response)
console.log("RESPONSE.RESSSULTS",response.results)
})
}
render() {
const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
return(
<View style={GlobalStyles.container}>
<View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
<FlatList
numColumns={1}
data={this.state.dataSource}
renderItem={({item})=>
<TouchableOpacity onPress={()=> this.props.navigation.navigate("PokeDetails", {item} )}>
<PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name} item={item} />
</TouchableOpacity>
}/>
<Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
</View>
)
}
}
export default Home;
// PokeDetails.js
import React from "react";
import { View, Text , Image, Button} from "react-native";
import {GlobalStyles} from "../styles/GlobalStyles";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useRoute } from '#react-navigation/native';
const PokeDetails =({name, imageUrl, detail, route})=> {
return(
<View style={GlobalStyles.container}>
<Text>This text is written expilictly</Text>
<Text>{route.params.item}</Text>
</View>
)
}
export default PokeDetails;
// Root.js
import React from "react"
import { createStackNavigator } from "#react-navigation/stack";
import Home from "../screens/Home";
import PokeDetails from "../screens/PokeDetails";
import { NavigationContainer } from '#react-navigation/native';
const Root =() => {
const Stack = createStackNavigator();
return(
<Stack.Navigator>
<Stack.Screen name="Home" component={Home}/>
<Stack.Screen name="PokeDetails" component={PokeDetails}/>
</Stack.Navigator>
)
}
export default Root;
// App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View , StyleSheet } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from "#react-navigation/drawer";
import About from "./screens/About";
import Root from "./Route/Root";
import PokeDetails from "./screens/PokeDetails"
const App =()=> {
const Drawer = createDrawerNavigator();
return(
<View style={styles.container}>
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Root}/>
<Drawer.Screen name="About" component={About}/>
</Drawer.Navigator>
</NavigationContainer>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1
}
})
export default App;
I don't know if i understood your question. You already pass an item props to your PokeDetails component from your Homescreen, but there is no item in the props your receive in it. just add it and i guess you will access to your data and will be able to display it:
const PokeDetails =({name, imageUrl, detail, item})=> {
return(
<View style={GlobalStyles.container}>
<Image source={{uri: imageUrl}} style={{height: 50, width: 50}}/>
<Text style={GlobalStyles.pokeText}>{name}</Text>
<Text>This text is explicitly written</Text>
// add your stuff here...
<Text>{item.something}</Text>
</View>
)
}
By the way, since you already have the item prop, you can remove the name which already comes from item :)
I am using stack navigator to navigate between screen in my react native app. But it is giving me an error using this.props.navigation.navigate . kindly tell me what i am doing wrong here .
I am using react-native router-flux too in my app but for some purpose i need to use stack navigator as my app has home page and it shows some content of blog feed and onclicking read more it should open detailed view of only that specific blog feed in detailed page, therefore, for this purpose i am using stack navigator here .
Here is my code:
Home.js:
import React, { Component } from 'react';
import {
ActivityIndicator,
ListView,
Text,
StyleSheet,
View,
Button,
TouchableOpacity
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {Actions, Router, Scene} from 'react-native-router-flux';
import TimeAgo from 'react-native-timeago';
import {
Card,
CardItem,
Content,
Header,
Body,
Footer,
FooterTab,
Container,
Left,
Icon,
Right
} from 'native-base';
import {GetImage,ContentSnippet} from './helpers/helpers';
import HTMLView from 'react-native-htmlview';
import FitImage from 'react-native-fit-image';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
count:0,
count1:0
}
}
componentDidMount() {
return fetch('http://www.cardory.co.uk/jan/json')
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson.items),
}, function() {
// do something with new state
});
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 80}}>
<ActivityIndicator />
</View>
);
}
return (
<Container style={{flex: 1, paddingTop: 60}} >
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) =>
<Card>
<CardItem header>
<Text style={styles.titleHeading}>{rowData.title}</Text>
</CardItem>
<CardItem cardBody>
<Content style={{marginLeft:10,marginRight:10}}>
<FitImage source={{uri: GetImage(rowData.content_html)}}/>
<HTMLView value={ContentSnippet(rowData.content_html.replace(/<img[^>]*>/g,""))}/>
</Content>
</CardItem>
<CardItem>
<Left>
<TouchableOpacity onPress={() =>this.props.navigation.navigate('Detail')}>
<Text style={styles.ReadMore}>
Read more
</Text>
</TouchableOpacity>
</Left>
<Right>
<Text style={styles.Time}>
<Icon name="time" style={{color:'#483D8B'}}/>
<TimeAgo time= {rowData.date_published}/>
</Text>
</Right>
</CardItem>
</Card>
}
/>
</Container>
);
}
}
const styles=StyleSheet.create({
textHeading:{
fontSize:20,
marginTop:20
},
titleHeading:{
fontSize:20,
fontWeight:'bold',
color:'black',
alignItems:'center',
},
ReadMore:{
color:'#483D8B',
fontSize:15,
fontWeight:'bold'
},
Time:{
color:'#483D8B',
alignSelf:'stretch'
},
});
Navigation.js:
import React,{Component} from 'react';
import {
View,
Text,
TouchableOpacity
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Home from './Home';
import Info from './Info';
import Details from './Details';
import Register from './Register';
const Navigation = StackNavigator({
Home:{screen: Home},
Info:{ screen: Info},
Details:{ screen: Details},
Register:{ screen: Register}
});
And my aim is on cliking read more it should open only that specific blog feed any help would be appreciated. Thanks in advance!
in onPress callback, this may be changed, so the value of this.props.navigation may be different to your expect. you should use a variable to save navigation and avoid use this in callback. see my code below.
render() {
const {navigation} = this.props;
...
<TouchableOpacity onPress={() => navigation.navigate('Detail')}>
...
}
I believe what #Harlan is asking for is something like:
import AppNavigator from './Navigation.js'
class App extends Component {
render(){
return(
<View>
<AppNavigator/>
</View>
)
}
}
AppRegistry.registerComponent( 'app', () => App );
And he probably has a point since you are not exporting your navigator in Navigation.js. Without something like the above code, then your components will not have navigation in their props.
i am getting above mentioned error while running my code and have also searched about this error , i do understand the meaning of this error But i am not able to figure it out in my case.
Here is the code for index.android.js file :-
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import TabNavigatoro from './src/pages/TabNavigatoro';
export default class ReactNewsfeedDemo extends Component {
render() {
return (
<TabNavigatoro/>
);
}
}
AppRegistry.registerComponent('ReactNewsfeedDemo', () => ReactNewsfeedDemo);
Code for TabNavigatoro.js :-
import React, { Component } from 'react';
import {
AppRegistry,
Image
} from 'react-native';
import { Actions, ActionConst } from 'react-native-router-flux';
import logoImg from '../images/logo.png';
import eyeImg from '../images/eye_black.png';
import homeView from './homeView';
import profileView from './profileView';
import TabNavigator from 'react-native-tab-navigator';
export default class TabNavigatoro extends Component {
constructor(props){
super(props);
this.state={selectedTab:'home'}
}
render() {
return (
<TabNavigator selectedTab = {this.state.selectedTab}>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
renderIcon={() => <Image source={logoImg} />}
renderSelectedIcon={() => <Image source={logoImg} />}
onPress={() => this.setState({ selectedTab: 'home' })}>
{homeView}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="Profile"
renderIcon={() => <Image source={eyeImg} />}
renderSelectedIcon={() => <Image source={eyeImg} />}
onPress={() => this.setState({ selectedTab: 'profile' })}>
{profileView}
</TabNavigator.Item>
</TabNavigator>
);
}
}
Here is homeView.js code :-
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TextInput,
} from 'react-native';
export default class homeView extends Component {
render() {
return (
<View style={styles.container} >
<Text style = {styles.description}>
This is Home View , Please click to confirm.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container : {
flex:1,
alignSelf : 'stretch',
justifyContent:'center',
},
description : {
fontSize:16,
color: '#ffffff',
textAlign:'center',
},
});
I found one link with same error but it was not answered :-
https://github.com/expo/react-native-tab-navigator/issues/130
please let me know what actually causing problem whey it's no picking {homeView} and {profileView} pages, why it's coming null ?
Appreciate!!!