Inside my header component, there is a menu icon. When I press the icon, it should open the DrawerNavigation.
I already tried to add
const { navigate } = this.props.navigation;
But unfortunately, it doesn't fix the problem.
My header component:
import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import styles from '../assets/stylesheets/theme';
export default class Header extends Component {
render() {
return (
<View style={styles.header}>
<Icon onPress={() => navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
<Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
<View style={{ flex: 1 }} />
</View>
)
}
}
My home screen, where I import the header component:
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Header from '../../components/header';
import styles from '../../assets/stylesheets/theme'
export default class HomeScreen extends Component {
render() {
return(
<View style={styles.applicationView}>
<Header />
<Text>Home Screen</Text>
</View>
);
}
}
This error appears when the icon inside the header is pressed
How can I use the navigation inside the header component? Thanks in advance.
Update
Header component:
import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import styles from '../assets/stylesheets/theme';
export default class Header extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.header}>
<Icon onPress={this.props.navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
<Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
<View style={{ flex: 1 }} />
</View>
)
}
}
Home screen:
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Header from '../../components/header';
import styles from '../../assets/stylesheets/theme'
export default class HomeScreen extends Component {
render() {
return(
<View style={styles.applicationView}>
<Header navigation={this.props.navigation} />
<Text>Home Screen</Text>
</View>
);
}
}
Error after update
You need to pass the navigation object to your header component like this
<Header navigation={this.props.navigation} />
Your header component now should be something like this
export default class Header extends Component {
render() {
return (
<View style={styles.header}>
<Icon onPress={this.openDrawer.bind(this)} name="md-menu" style={styles.headerIcon} />
<Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
<View style={{ flex: 1 }} />
</View>
)
}
openDrawer() {
this.props.navigation.navigate('DrawerToggle');
}
}
Related
I used This <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}> to open other page, But when I click <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}> in photos page, I got this error:
enter image description here
The code:
import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, Dimensions, StyleSheet, StatusBar, Image} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import * as Animatable from 'react-native-animatable';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '#react-navigation/native';
const SplashScreen = ({navigation}) => {
const { colors } = useTheme();
return (
<View style={styles.container}>
<StatusBar backgroundColor='#009387' barStyle="light-content"/>
<View style={styles.header}>
<Animatable.Image
animation="bounceIn"
duraton="1500"
source={require('../assets/fmasdeco.png')}
style={styles.logo}
resizeMode="stretch"
/>
</View>
<Animatable.View
style={[styles.footer, {
backgroundColor: colors.background
}]}
animation="fadeInUpBig"
>
<Text style={[styles.title, {
color: colors.text
}]}>Stay connected with everyone!</Text>
<Text style={styles.text}>Sign in with account</Text>
<View style={styles.button}>
<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
<LinearGradient
colors={['#08d4c4', '#01ab9d']}
style={styles.signIn}
>
<Text style={styles.textSign}>Get Started</Text>
<MaterialIcons
name="navigate-next"
color="#fff"
size={20}
/>
</LinearGradient>
</TouchableOpacity>
</View>
</Animatable.View>
</View>
);
};
export default SplashScreen;
My page SignUpScreen.Js
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default function SignUpScreen() {
return (
<View>
<Text>Hello</Text>
</View>
)
}
const styles = StyleSheet.create({})
Whenever You Navigate From Component which isn't in Your Navigation Container Your Navigation Props Is Undefined Your Splashscreen Component isn't in your Navigation Container May be it is a Child of Screen Thats why You Couldn't get Navigation Prop Pass navigation from from Parent Component where you rendered Splashscreen .
OR
You Should Use Use Navigation Hook Provided By React navigation To Navigation Between Screen from Outside of Navigation Container....
import { useNavigation } from '#react-navigation/native';
const someComponent = () => {
const navigation = useNavigation();
<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
<Text>Navigation To Sigin Screen</Text>
</TouchableOpacity>
}
Hope this would Help...
I want to Create a Global Header that can call the Navigation Drawer
My main code is like this :
import * as React from 'react';
import { View, Text, Button, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList,DrawerItem, } from '#react-navigation/drawer';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Header from './components/Headertest';
function Screen1() {
return (
<View>
<View><Text>Screen1</Text></View>
</View>
);
}
function Screen2() {
return (
<View>
<View><Text>Screen2</Text></View>
</View>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Screen1" component={Screen1} />
<Drawer.Screen name="Screen2" component={Screen2} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Header />
<MyDrawer />
</NavigationContainer>
);
}
And my Header Code is like this:
import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
class Header extends React.Component {
render() {
return(
<View style={{flexDirection: 'row', height:50, backgroundColor:'#12415e', marginTop: 25 }}>
<View style={{flex: 1, justifyContent: 'center', alignItems:'center',flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.props.navigation.openDrawer()}>
<Icon style= {{color: 'white'}} name='bars'/>
</TouchableOpacity>
</View>
</View>
)
}
}
export default Header;
But instead an error appears like this:
TypeError: undefined is not an object (evaluating '_this.props.navigation.openDrawer')
What's wrong with my code?
The <Header /> component is not inside a Navigator, so it doesn't have access to the navigation props. Make the <Header /> component a functional component and use the useNavigation() hook.
More details here: https://reactnavigation.org/docs/connecting-navigation-prop
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'm trying to navigate to the home page from login page but my login-form is in another folder named "component", When I'm navigating from the login page using touchableOpacity it is working, But when I'm doing same thing from login-form component it is giving me an error. Can someone tell me what I'm doing wrong.
Here is the code which I'm trying to perform.
code of Login.js
import React, {Component} from 'react';
import {Text, View, ScrollView} from 'react-native';
import LoginForm from '../components/LoginForm';
type Props = {};
export default class Login extends Component<Props> {
static navigationOptions = {
header: null
}
render() {
return (
<ScrollView>
<View>
<LoginForm/>
</View>
<View>
<Text> Skip login and goto</Text>
<Text onPress={()=>this.props.navigation.navigate('Home')}>
Home
</Text>
</View>
</ScrollView>
);
}
}
code of LoginForm.js
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
type Props = {};
export default class LoginForm extends Component<Props> {
render() {
return (
<View>
<TextInput
placeholder={'Email'}
keyboardType={'email-address'}
autoCapitalize={'none'}
/>
<TextInput
placeholder={'Password'}
secureTextEntry={true}
/>
<TouchableOpacity
activeOpacity={0.6}
onPress={()=>this.props.navigation.navigate('Home')}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
}
here is the screenshot of error:
Error when navigating to page in another folder
Please help me to get out of this error. Thanks in advance. :)
You can use withNavigation or you should pass navigation as a props to child component.
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
import { withNavigation } from 'react-navigation';
type Props = {};
class LoginForm extends Component<Props> {
render() {
return (
<View>
<TextInput
placeholder={'Email'}
keyboardType={'email-address'}
autoCapitalize={'none'}
/>
<TextInput
placeholder={'Password'}
secureTextEntry={true}
/>
<TouchableOpacity
activeOpacity={0.6}
onPress={()=>this.props.navigation.navigate('Home')}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
}
export default withNavigation(LoginForm);
In the end of your LoginForm.js you need to put export {LoginForm};
If only this not work, try make your import like this: import {LoginForm} from '../components/LoginForm';
Strange error is appearing while developing one of my React Native project.
enter image description here
Following is the code I am using;
import React, {Component} from 'react';
import {Text, View, Image, StyleSheet} from 'react-native';
import {Content, Container} from 'native-base';
import {Carousel} from 'react-native-looped-carousel';
export default class AppBody extends Component {
render() {
return (
<Container>
<Content>
<Carousel delay={500}>
<View style={[{
backgroundColor: '#BADA55'
}
]}/>
<View style={[{
backgroundColor: 'red'
}
]}/>
<View style={[{
backgroundColor: 'blue'
}
]}/>
</Carousel>
</Content>
</Container>
);
}
}
module.export = AppBody;
Your import from react-native-looped-carousel is incorrect:
import Carousel from 'react-native-looped-carousel'
After fixing that, the carousel won't work. Because you should provide dimensions for it:
import React, { Component } from 'react'
import { Text, View, Image, StyleSheet, Dimensions } from 'react-native'
import { Content, Container } from 'native-base'
import Carousel from 'react-native-looped-carousel'
const {width, height} = Dimensions.get('window')
export default class AppBody extends Component {
constructor(props) {
super(props)
this.state = {
size: {width, height},
}
}
render() {
return (
<Container>
<Content>
<Carousel
delay={2000}
style={this.state.size}
autoplay
pageInfo
onAnimateNextPage={(p) => console.log(p)}
>
<View style={[{backgroundColor: '#BADA55'}, this.state.size]}><Text>1</Text></View>
<View style={[{backgroundColor: 'red'}, this.state.size]}><Text>2</Text></View>
<View style={[{backgroundColor: 'blue'}, this.state.size]}><Text>3</Text></View>
</Carousel>
</Content>
</Container>
)
}
}
module.export = AppBody