Develop Reference

The component for route 'WELCOME' must be a React component

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);

Trying to access route.params in react native stack navigator v5

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!

How to implement details screen that dynamically displays detail of pokemon when a user presses on a picture in react native?

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 :)

How to show drawer items using createDrawerNavigator in react-navigation 3?

In my React-native project I am using one Drawer navigation. for this, I have created one class named HomeDrawer. Here's the code for that-
HomeDrawer.js
import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {
createAppContainer,
createStackNavigator,
createDrawerNavigator,
createSwitchNavigator
} from "react-navigation";
import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import LoginScreen from '../components/LoginScreen';
import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
import WelcomeScreen from "../WelcomeScreen";
let user_email ='', user_first_name='';
class HomeDrawer extends Component {
state = {
loading: true
}
static navigationOptions = {
headerLeft: null
}
componentDidMount() {
AsyncStorage.getItem("user_email").then(value => {
console.log(value);
// you will need to handle case when `#ProductTour:key` is not exists
user_email = value;
});
AsyncStorage.getItem("user_first_name").then(value => {
console.log(value);
// you will need to handle case when `#ProductTour:key` is not exists
user_first_name = value;
});
}
async componentWillMount() {
await Font.loadAsync ({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
});
this.setState({loading:false});
}
render() {
if(this.state.loading) {
return(
<Root>
<AppLoading/>
</Root>
)
}
return(
<MyApp/>
)
}
}
const CustomDrawerContentComponent = (props) => (
<View style={{backgroundColor:"#ffff", height:'100%'}}>
<ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150, resizeMode:'cover', backgroundColor:"#aaaa"}}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
<Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
</View>
</Body>
</ImageBackground>
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
</View>
);
const MyApp = createAppContainer(createDrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
},
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
));
export default HomeDrawer;
It was working perfectly with react-navigation version 1.0.0-beta.11. But after updating to version 3 it is showing the following error-
Can't find variable DrawerItem
If I remove the tag like below then , the code working but not showing any items as the items I include in DrawerItem.
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
neither the drawer toggle button is working now. But if I drag the screen from left to right it is showing like the below image-
Now, I want to show the drawer items back and remove the marked toolbar in the 2nd image.
So, it would be very nice if someone helps me to solve the problem with the given code

I will make my life easier (but not the easiest... :) by posting part of a working sample code that works with react-navigation 2.18.2.
Not sure if it will help you, but it will not do any harm...
You cannot use the code as is, of course, but maybe it will help you.
You can just ignore it, or even ask me to delete it, whatever you do is fine.
AppNavigator.js (rendered from App.js)
import React from 'react';
import { createDrawerNavigator } from 'react-navigation';
import WelcomeAuthNavigator from './WelcomeAuthNavigator';
import MainTabNavigator from './MainTabNavigator';
import MainDrawerNavigator from './MainDrawerNavigator';
import Drawer from '../screens/drawers/Drawer';
export default createDrawerNavigator({
WelcomeAuth: WelcomeAuthNavigator,
Drawer: MainDrawerNavigator,
Main: MainTabNavigator
}, {
initialRouteName: 'WelcomeAuth',
contentComponent: props => <Drawer {...props} />,
drawerWidth: 180
});
WelcomeAuthNavigator.js
import React from 'react';
import { createStackNavigator } from 'react-navigation';
import Welcome from '../screens/welcome/Welcome';
import LoginScreen from '../screens/auth/LoginScreen';
import SignupScreen from '../screens/auth/SignupScreen';
const AuthStack = createStackNavigator({
Login: { screen: LoginScreen },
Signup: { screen: SignupScreen }
}, {
headerMode: 'none',
initialRouteName: 'Login'
});
const WelcomeAuthNavigator = createStackNavigator({
Welcome: Welcome,
Auth: AuthStack
}, {
headerMode: 'none',
initialRouteName: 'Welcome',
contentComponent: props => <Drawer {...props} />
});
export default WelcomeAuthNavigator;
MainTabNavigator.js
ContactsStack and PhotosStack are defined using createStackNavigator
const MainTabNavigator = createBottomTabNavigator({
PhotosStack,
ContactsStack
}, {
headerMode: 'none',
headerStyle: { backgroundColor: '#4C3E54' },
headerLeft: <Text onPress={() =>
this.props.navigation.navigate('DrawerOpen')}>Menu</Text>,
title: 'Welcome!',
headerTintColor: 'white',
initialRouteName: 'PhotosStack'
});
export default MainTabNavigator;
MainDrawerNavigator.js
import { createStackNavigator } from 'react-navigation';
import Help from '../screens/drawers/Help';
import About from '../screens/drawers/About';
const MainDrawerNavigator = createStackNavigator({
Help: { screen: Help },
About: { screen: About }
}, {
initialRouteName: 'About'
});
export default MainDrawerNavigator;
Drawer.js
import React from "react";
import { SafeAreaView, View } from "react-native";
import { connect } from 'react-redux';
import { Container, Content, Text, List, ListItem, Left, Right,
Button, Icon, Body, Thumbnail } from "native-base";
const listItems = [
{ title: "Help", route: "Help", icon: "md-help" },
{ title: "About", route: "About", icon: "ios-information-circle-outline" }
];
class Drawer extends React.Component {
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Container>
<Content contentContainerStyle={{
justifyContent: 'flex-start', marginTop: 30
}}>
{this.renderUserPetDetails.bind(this)()}
<List
dataArray={listItems}
renderRow={data => {
return (
<ListItem onPress={() => this.props.navigation.navigate(data.route)} icon>
<Left>
<Button onPress={() => this.props.navigation.navigate(data.route)}
style={{ backgroundColor: "#888" }}>
<Icon active name={data.icon} />
</Button>
</Left>
<Body>
<Text
style={{ fontSize: 14, fontWeight: '600' }}>
{data.title}</Text>
</Body>
</ListItem>
);
}}
/>
</Content>
</Container>
</SafeAreaView>
);
}
}

You should try importing DrawerItems as shown below if you do not have react-navigation-drawer installed please added.
import { DrawerItems } from 'react-navigation-drawer';

You are trying to call DrawerItems without actually importing it hence the error. Make sure you add this line:
import { DrawerItems } from 'react-navigation';

I am having issues with this.props.navigation.navigate in react native

I have been trying to create a touchable highlight that takes to me a new scene by using this.props.navigation.navigate for a react-native app. However, react native gives me an error that says undefined is not an object (evaluating '_this2.props.navigation'). Here is my code:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
ListView,
Image,
Text,
ScrollView,
TouchableHighlight
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { List, ListItem } from 'react-native-elements';
import beerlist from '../datbeerlist.json';
import BeerDetails from './BeerDetails';
const squadIcon = require('../../img/serioussquad.jpg');
class BeerList extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows(beerlist),
};
}
renderRow(beer) {
return (
<View style={styles.row}>
<Image style = {styles.icon} source = {squadIcon}/>
<View style={styles.info}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('BeerDetails')}>
<Text style={styles.items}>
{beer.name}
</Text>
</TouchableHighlight>
</View>
<View style={styles.total}>
<Text style={styles.price}>${(beer.price / 100).toFixed(2)}</Text>
</View>
</View>
);
}
Any ideas on how to get it fixed?

Although #justelouise is right and the
StackNavigator Definiton
part of the code would help, still, if you've navigated to this page using stack navigator then it's been added to the stick navigator already.
I think this.props.navigation is available under the render() method. If you want to use it in another method, then you have to pass it from render() to the method you want. Something like this:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
ListView,
Image,
Text,
ScrollView,
TouchableHighlight
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { List, ListItem } from 'react-native-elements';
import beerlist from '../datbeerlist.json';
import BeerDetails from './BeerDetails';
const squadIcon = require('../../img/serioussquad.jpg');
class BeerList extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows(beerlist),
};
}
renderRow (beer, renderNavigation) {
return (
<View style={styles.row}>
<Image style={styles.icon} source={squadIcon}/>
<View style={styles.info}>
<TouchableHighlight onPress={() => renderNavigation.navigate('BeerDetails')}>
<Text style={styles.items}>
{beer.name}
</Text>
</TouchableHighlight>
</View>
<View style={styles.total}>
<Text style={styles.price}>${(beer.price / 100).toFixed(2)}</Text>
</View>
</View>
);
render () {
const navigation = this.props.navigation;
return (
<View>
{this.renderRow(BEER, navigation)}
</View>
)
}
}

If you are navigating to stackNavigator outside of render() then try this
static navigationOptions = ({ navigation })=>{
const { navigate } = navigation
return{
title: 'Header Text',
headerRight:(<Button
title="Settings" backgroundColor="rgba(0,0,0,0)" color="rgba(0,122,255,1)"
onPress={() =>navigate('settings')}
/>)
}
}