I am making a pokedex, and from the FlatList I would like users to be able to click on a pokemon, and get directed to a detail page of the particular pokemon. However, the navigation.navigate is not working in both class and function based views. I have looked at the documentation and it uses the method I am trying to implement. What is going wrong?
App.js
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import PokedexData from './components/PokedexData';
import PokemonView from './components/PokedexData';
const Stack = createStackNavigator();
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
options={{headerShown: false}}
name="PokedexList"
component={PokedexData}
/>
<Stack.Screen name="PokemonView" component={PokemonView} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
PokedexData.js
import React, {Component} from 'react';
import axios from 'axios';
import {View, FlatList} from 'react-native';
import PodexRow from './PokedexRow';
export default class PokedexRow extends Component {
constructor(props) {
super(props);
this.state = {
pokemon: [],
};
}
componentDidMount() {
this.loadPokemon();
}
loadPokemon = () => {
axios
.get('https://pokeapi.co/api/v2/pokemon?limit=151')
.then((res) => this.setState({pokemon: res.data.results}));
};
renderItem = ({item}) => <PodexRow name={item.name} />;
render() {
return (
<FlatList
data={this.state.pokemon}
renderItem={this.renderItem}
keyExtractor={(item) => item.url}
/>
);
}
}
PokedexRow.js
import {View, StyleSheet, Text, Pressable} from 'react-native';
export default class PokedexRow extends Component {
constructor(props) {
super(props);
}
onPressHandle = () => {
alert(this.props.name);
const {navigate} = this.props.navigation;
};
render() {
return (
<View style={styles.PokedexRowView}>
<Pressable
style={styles.PokedexClickable}
onPress={this.onPressHandle}
android_ripple={{color: 'gray'}}>
<Text style={styles.PokedexRowText}>{this.props.name}</Text>
</Pressable>
</View>
);
}
}
const styles = StyleSheet.create({
/*stles removed for brevity*/
});
Because PokedexRow is not a screen where you get the navigation prop automatically. you can use useNavigation for a functional component to get access to navigation object or pass navigation from screen component to your PokedexRow as a prop.
renderItem = ({item}) => <PodexRow navigation={this.props.navigation} name={item.name} />;
Related
I have a cart icon as a header-right button for almost all screens. I am using react-navigation5.
I want to update the badge count on that button from my components.
Any possible way to achieve it without using redux or flux library?
following is my code for example:
route.js
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { Home, Cart, Wishlist, Login, Signup, Contact, Profile, Search } from './scenes';
import { Primary, Secondary } from './assets/color';
import { HeaderButton } from './components'
const Stack = createStackNavigator();
function Route() {
return (
<Stack.Navigator initialRouteName="Profile" screenOptions={({ navigation, route }) =>({ headerRight:()=>(<HeaderButton navigation={navigation} nav='Cart'/>)})}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Cart" component={Cart} options={{headerRight:null}}/>
<Stack.Screen name="Search" component={Search} />
</Stack.Navigator>
);
}
export default Route;
headerButton.js
import React, { Component } from "react";
import { View } from 'react-native'
import { Button, Icon, Badge, Text } from 'native-base';
import { Primary, Danger } from '../../assets/color'
export class HeaderButton extends Component{
render(){
return(
<>
<Button rounded transparent onPress={()=>this.props.navigation.push('Cart')}>
<Icon type='MaterialIcons' name='shopping-cart' style={{color:Primary,right:6,top:2}}/>
</Button>
<Text>{this.props.count}</Text>
</>
);
}
}
home.js
import React, { Component } from "react";
import { View } from 'react-native'
import { Button, Icon, Badge, Text } from 'native-base';
import { Primary, Danger } from '../../assets/color'
export class Home extends Component{
constructor(){
super();
this.state={
count:1
}
}
addToCart=()=>{
var varcount=this.state.count;
varcount=varcount+1;
this.setState({count:varcount})
}
render(){
return(
<Button onPress={this.addToCart}>
<Text>Add to cart</Text>
</Button>
);
}
}
Whenever count is changed in the app it must be reflected in headerbutton component which is in route.js as headerRight
When ever you call the addToCart, you should add parenthesis to it since it has a function value, it should be addToCart().
Also whenevery you call addToCart() The value will not change because the scope the varcount is only local, I suggest you make it global so it will not reset the value
I have solved it by myself, using passing parameters from parent to child and vise versa.
The following are the changes I have made in my code.
route.js
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { Home, Cart, Wishlist, Login, Signup, Contact, Profile, Search } from './scenes';
import { Primary, Secondary } from './assets/color';
import { HeaderButton } from './components'
const Stack = createStackNavigator();
function Route() {
const [count, setCount] = React.useState(0);
const onCount=(value)=>{
setCount(value);
console.log(count, value);
}
return (
<Stack.Navigator initialRouteName="Profile" screenOptions={({ navigation, route }) =>({ headerRight:props =>(<HeaderButton navigation={navigation} nav='Cart' {...props} badgeCount={count}/>)})}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Cart" component={Cart} options={{headerRight:null}}/>
<Stack.Screen name="Search" component={Search} />
</Stack.Navigator>
);
}
export default Route;
headerButton.js
import React, { Component } from "react";
import { View } from 'react-native'
import { Button, Icon, Badge, Text } from 'native-base';
import { Primary, Danger } from '../../assets/color'
export class HeaderButton extends Component{
render(){
return(
<>
<Button rounded transparent onPress={()=>this.props.navigation.push('Cart')}>
<Icon type='MaterialIcons' name='shopping-cart' style={{color:Primary,right:6,top:2}}/>
</Button>
<Text>{this.props.badgeCount}</Text>
</>
);
}
}
home.js
import React, { Component } from "react";
import { View } from 'react-native'
import { Button, Icon, Badge, Text } from 'native-base';
import { Primary, Danger } from '../../assets/color'
export class Home extends Component{
constructor(){
super();
this.state={
count:1
}
}
addToCart=()=>{
var varcount=this.state.count;
varcount=varcount+1;
this.setState({count:varcount})
this.props.onCountChange(this.state.count);
}
render(){
return(
<Button onPress={this.addToCart}>
<Text>Add to cart</Text>
</Button>
);
}
}
I am using Redux Form to capture user info submission. I've connected Redux Form with the store and written the form according to the instructions, but when clicking the submit button, no values are passed through.
I do not usually ask on Stack Overflow so please excuse for my bad wording. I do not know how to articulate my problem.
I copied my code on to snack expo (link: https://snack.expo.io/S1_6f7dQV)
Here are my codes:
Components/Form.js
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { StyleSheet, View, Text, TouchableOpacity, TextInput } from 'react-native';
const renderField = ({ label, keyboardType, name }) => {
return (
<View>
<Text>{label}</Text>
<TextInput keyboardType={keyboardType}
>
</TextInput>
</View>
);
};
const submit = values => {
alert(`here is the value ${JSON.stringify(values)}`)
}
const ContactComponent = props => {
const { handleSubmit } = props;
console.log('handle submit ...');
console.log(handleSubmit);
return (
<View>
<Text>Redux-form example</Text>
<Field keyboardType="default" label="Username: " component={renderField} name="Username" />
<Field keyboardType="email-address" label="Email: " component={renderField} name="Email" />
<TouchableOpacity onPress={handleSubmit(submit)} style={{ margin: 10, alignItems: 'center' }}>
<Text>Submit</Text>
</TouchableOpacity>
</View>
);
}
const ContactForm = reduxForm({
form: 'contact', // a unique identifier for this form
})(ContactComponent);
export default ContactForm;
Component/MainComponent.js
import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from '../screens/HomeScreen';
import React, { Component } from 'react';
import { View, Icon} from 'native-base';
const MainNavigator = createStackNavigator({
Home: { screen: HomeScreen }
// AddTransaction: { screen: AddTransaction },
// TransactionList: { screen: TransactionList }
})
const Main = createAppContainer(MainNavigator);
export default Main;
Screen/HomeScreen.js
import React, {Component} from 'react';
import { Container, View, Text, Content, Button, Form } from 'native-base';
import ContactForm from '../components/Form.js';
class HomeScreen extends Component {
static navigationOptions = {
title: 'Home',
}
render() {
return (
<Container>
<ContactForm/>
</Container>
);
}
}
export default HomeScreen;
App.js
import React from 'react';
import { View, Text } from 'native-base';
import Main from './components/MainComponent';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { createLogger } from 'redux-logger';
import { reducer as formReducer } from 'redux-form';
const rootReducer = combineReducers({
form: formReducer,
});
export const store = createStore(rootReducer)
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<Main />
</Provider>
);
}
}
Try including the input props to yout TextInput like below, as shown in the example here on ReduxForm's docs
const renderField = ({ label, keyboardType, name, input }) => {
return (
<View>
<Text>{label}</Text>
<TextInput keyboardType={keyboardType} {...input}
>
</TextInput>
</View>
);
};
Working with react-native and I get a problem with navigator.
Routes.js
import React from 'react';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import ItemListScreen from '../screens/ItemListScreen';
import ItemDetailsScreen from '../screens/ItemDetailsScreen';
export const RootStack = () => {
return createDrawerNavigator(
{
Home: {
screen: ItemList
},
ItemDetails: {
screen: ItemDetails
}
}
)}
export const ItemList = createStackNavigator({
ItemList: {
screen: ItemListScreen
}
},
{
headerMode: 'none'
});
export const ItemDetails = createStackNavigator({
ItemDetails: {
screen: ItemDetailsScreen
}
},
{
headerMode: 'none'
});
Header.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Header, Body, Text, Icon, Left, Right } from 'native-base';
export default class AppHeader extends Component {
render() {
const headerText = this.props.headerText
return (
<Header>
<Left><Icon name='menu' onPress={()=> this.props.navigation.navigate('DrawerOpen')} /></Left>
<Body style={styles.header}>
<Text style={styles.headerText}>{headerText}</Text>
</Body>
<Right></Right>
</Header>
);
}
}
Index.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Root, Button, Text, Drawer } from 'native-base';
import {RootStack} from './config/Routes';
import Header from './components/Header/Header';
import SideBar from './components/SideBar/SideBar';
export default class Index extends Component {
render() {
const Screen = RootStack();
const { globalContainer } = styles;
return (
<Root style={ globalContainer }>
<Header />
<Screen />
</Root>
)
}
}
The error is:
undefined is not an object (evaluating
'_this2.props.navigation.navigate')
The error is in OnPress() in Header.js
onPress={() => this.props.navigation.navigate('DrawerOpen')
What is the cause of this error? How to solve?
Your navigation object is not defined since you are not providing it the object.
You can include the navigation object using two ways,
Declare the object in the StackNavigator class
Pass navigation props explicitly. For example - in index.js you'll need to change <Header /> to <Header navigation={this.props.navigation} />. So, here you are providing it the necessary proprs in order to execute the navigate action.
EDIT
The actual issue is here,
<Root style={ globalContainer }>
<Header />
<Screen />
</Root>
you are defining your routes later, but calling your Header screen earlier. So precisely, navigation object is undefined in index.js itself.
What you should do is, list index.js in the StackNavigator class as the first object, so it'll be called first. So, your index.js will look something like this.
<Root style={ globalContainer }>
<Header navigation={this.props.navigation} /> //navigation object will be defined here
</Root>
Also, as i see, you have made your DrawerNavigator as your RootStack. I'll like to propose something different, You define a StackNavigator as your root stack, and then include drawer navigation in it.
Something on the lines of -
export const RootStack = createStackNavigator({
Index: //your index.js screen declaration
Drawer: //drawer navigator object
ItemDetails: {
screen: ItemDetailsScreen
}
},
EDIT 2
You'll be not be calling Rootstack in index.js. Your index.js will look something like this.
export default class Index extends Component {
render() {
const { globalContainer } = styles;
return (
<Root style={ globalContainer }>
<Header navigation={this.props.navigation}/>
</Root>
)
}
}
If index.js is your entry file, then you'll have to create a new entry file that calls the RootStack.
Something like entryFile.js
render() { return <RootStack /> }
which will automatically render all your routes and place index.js as your first screen.
Finally solved the issue. My approach has been given below:
Routes.js
import React from 'react';
import { createStackNavigator } from 'react-navigation';
import { Drawer } from './Drawer';
export const App = createStackNavigator(
{
Drawer: {
screen: Drawer
}
},
{
initialRouteName: "Drawer",
headerMode: "none"
}
)
Drawer.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { createDrawerNavigator } from 'react-navigation';
import ItemListScreen from '../screens/ItemListScreen';
import SideBar from '../components/SideBar/SideBar';
export const Drawer = createDrawerNavigator(
{
Home: { screen: ItemListScreen }
},
{
navigationOptions: {
gesturesEnabled: false
},
initialRouteName: "Home",
drawerPosition: 'left',
contentComponent: props => <SideBar {...props} />
}
);
Index.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Button, Text, Drawer } from 'native-base';
import { App } from './config/Routes';
import AppHeader from './components/Header/Header';
export default class Index extends Component {
render() {
const { globalContainer } = styles;
return (
<App style={ globalContainer } navigation={this.props.navigation}></App>
)
}
}
Header.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Header, Body, Text, Icon, Left, Right } from 'native-base';
export default class AppHeader extends Component {
render() {
const {navigation, headerText} = this.props
const {header, text, drawerIcon } = styles
return (
<Header>
<Left>
<Icon name='menu' style={drawerIcon} onPress={()=> navigation.openDrawer()} />
</Left>
<Body style={header}>
<Text style={text}>{headerText}</Text>
</Body>
<Right></Right>
</Header>
);
}
}
I'm currently figuring out how to reuse a navigation which is declared in it's own class for multiple screens or to put it in another way: If my approach isn't clever react wise, is there another, better way to create a navigation that is reused on multiple screens?
Whenever I'm trying to click a button in the navigation I get an error "undefined is not an object (evaluating _this2.props.navigation.navigate). So I guess that I'm missing something about this.props in the Navigation.js.
I'm using react-navigation because it has been recommended on SO and in the react-native documentation as the way to go.
App.js
import React from 'react';
import {createStackNavigator} from 'react-navigation';
import HomeScreen from './screens/home/HomeScreen'
import ProfileScreen from './screens/profile/ProfileScreen'
import SettingsScreen from './screens/settings/SettingsScreen'
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Profile: ProfileScreen,
Settings: SettingsScreen,
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
Navigation.js - contains the planned navigation for all screens
import React from 'react';
import {StyleSheet, View, TouchableOpacity, Text} from 'react-native';
class Navigation extends React.Component {
render() {
return (
<View style={navigationStyles.footerWrapper}>
<View style={navigationStyles.footer}>
<TouchableOpacity style={navigationStyles.footerItem}
onPress={() => this.props.navigation.navigate('Home')}>
<Text style={navigationStyles.placeholderIcon}/>
</TouchableOpacity>
<TouchableOpacity style={navigationStyles.footerItem}
onPress={() => this.props.navigation.navigate('Profile')}>
<Text style={navigationStyles.placeholderIcon}/>
</TouchableOpacity>
<TouchableOpacity style={navigationStyles.footerItem}
onPress={() => this.props.navigation.navigate('Settings')}>
<Text style={navigationStyles.placeholderIcon}/>
</TouchableOpacity>
</View>
</View>
);
}
}
const navigationStyles = StyleSheet.create({
//
});
module.exports = Navigation;
HomeScreen.js - screen that should contain the navigation but displays an error when the onPress event is fired
import React from 'react';
import {StyleSheet, View, TouchableOpacity, Text} from 'react-native';
import styles from '../../common/customStyleSheet'
import Navigation from '../../components/navigation/Navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
header: null,
};
render() {
const {navigate} = this.props.navigation;
return (
<View style={styles.container}>
<Text style={homeScreenStyles.paddingMedium}>HomeScreen.</Text>
<Navigation/>
</View>
);
}
}
const homeScreenStyles = StyleSheet.create({
paddingMedium: {
paddingTop: 200,
},
});
module.exports = HomeScreen;
your Navigation component won't automatically inherit the navigation prop from HomeScreen because it is just a subcomponent (it is not defined in the stack navigator like the HomeScreen is). So you need to pass the navigation as a prop to the Navigation component in your HomeScreen JSX.
// HomeScreen.js
render() {
return (
<View style={styles.container}>
<Text style={homeScreenStyles.paddingMedium}>HomeScreen.</Text>
<Navigation navigation={this.props.navigation}/>
</View>
);
}
I have a HomePage.js with only one button, Login Button, and when clicked I want to render LoginPage.js. I tried something like this but it's not working:
HomePage.js:
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
constructor () {
super();
this.state = {LoginPage:false};
}
showLogin = () => {
this.setState({LoginPage:true});
}
render() {
return(
<View>
<TouchableOpacity onPress={() => this.showLogin()}>
<Text>LogIn</Text>
</TouchableOpacity>
</View>
)
}
}
export default HomePage;
In React it's easily done with react-router but I don't know how to do it with React-Native.
EDIT 1 after including react-navigation I get the following error: Route 'navigationOptions' should declare a screen. Did I miss something?
App.js:
import React, {Component} from 'react';
import {StackNavigator} from 'react-navigation';
import HomePage from './HomePage';
import LoginPage from './LoginPage';
const App = StackNavigator({
Home: {screen: HomePage},
LoginPage: {screen: LoginPage},
navigationOptions: {
header: () => null,
}
});
export default App;
HomePage.js
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return(
<View>
<TouchableOpacity onPress={() => navigate('LoginPage'), { name: 'Login' }}>
<Text>Login</Text>
</TouchableOpacity>
<Button
onPress={() => navigate('LoginPage'), { name: 'Login' }}
>Log In</Button>
</View>
)
}
}
export default HomePage;
LoginPage.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class LoginPage extends Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
return (
<View>
<Text>This is login page</Text>
</View>
);
}
}
export default LoginPage;
Use React Navigation. Its the best and simple solution right now for react native.
for adding the library use npm install --save react-navigation
You can define class for routing like below using a StackNavigator.
import {
StackNavigator,
} from 'react-navigation';
const BasicApp = StackNavigator({
Main: {screen: MainScreen},
Profile: {screen: ProfileScreen},
, {
headerMode: 'none',
}
});
Then u can define classes like the one u mentioned in the question.
eg:
class MainScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
}
and second class
class ProfileScreen extends React.Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
const { goBack } = this.props.navigation;
return (
<Button
title="Go back"
onPress={() => goBack()}
/>
);
}
}
The navigate function can be used for navigating to a class and goBack can be used for going back to a screen.
For hiding header u can use header mode or specify navigation options in each screen
For details please refer : https://reactnavigation.org/
If you're just looking for a plugin like react-router to use on React Native, you can use react-native-router-flux, available here: https://github.com/aksonov/react-native-router-flux.
Also, it's better if you just put a reference to the function in there instead of invoking it. Something like:
<TouchableOpacity onPress={this.showLogin}>...</TouchableOpacity>