For some reason, there is an error when you click on the opening menu and it is unclear to me why it is happening.
"react-navigation": "^3.5.1"
This is for open my menu drawer with pressing.
```
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import { Avatar } from 'react-native-elements';
import { Left, Icon } from 'native-base';
import { DrawerActions } from 'react-navigation';
class Header extends Component {
render() {
return (
<View style={styles.viewStyle}>
<Left>
<Icon
name='menu'
style={styles.menu}
onPress={() => this.props.navigation.openDrawer()}
/>
</Left>
<Text style={styles.textStyle}>Episodes</Text>
</View>
);
}
}
export default Header;
```
```
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { Right, Left, Icon } from 'native-base';
import EpisodeList from '../components/EpisodeList';
import Header from '../components/header';
class HomeScreen extends Component {
static navigationOptions = {
drawerIcon: ({ tintColor }) => (
<Icon name='home' style={{ fontSize: 24, color: tintColor }} />
)
};
render() {
return (
<View style={styles.container}>
<Header />
<View>
<Image
source={{
uri:
'https://images.pexels.com/photos/754082/pexels-photo-754082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
}}
style={{ width: 400, height: 700, position: 'absolute' }}
/>
<EpisodeList />
</View>
</View>
);
}
}
export default HomeScreen;
```
I expect the drawer will open when I press the menu button
the header is a component that i pass into another component that its
activated from there .
You need to pass navigation prop to your child components to use this kind of functionality.
<Header navigation={this.props.navigation} />
or in header file do this,
import {withNavigation} from "react-navigation";
....
...
...
export default withNavigation(Header);
Did you try with the following?
this.props.navigation.dispatch(DrawerActions.openDrawer());
Don't forgot to import,
import { DrawerActions } from "react-navigation";
Please try this, in your HomeScreen
<Header {...this.props}/>
Related
I'm not sure what's wrong here, as far as I can tell I am doing this correctly as it has worked everywhere else in my app. The only difference is that I'm trying to do this from a FlatList component. What is wrong with this? I've also tried putting {navigation} in renderMyItem instead of FLToyCard brackets, didn't work either. Error I'm getting is:
TypeError: undefined is not an object (evaluating 'navigation.navigate').
import { StyleSheet, Text, View, FlatList } from 'react-native'
import React from 'react'
import Toy from './Database'
import ToyCard from './ToyCard'
const FLToyCard = ({navigation}) => {
const headerComp = () => {
return(
<View style={{alignSelf: 'center'}}>
<Text style={{fontSize: 25, padding: 10}}>All Toys For Sale</Text>
</View>
)
}
const renderMyItem = ({item}) => {
return(
<View style={{flex: 1}}>
<ToyCard
name={item.name}
image={item.image}
price={item.price}
desc={item.desc}
seller={item.seller}
onPress={()=>navigation.navigate('SlugProduct')}
/>
</View>
)
}
return(
<View>
<FlatList
data={Toy}
renderItem={renderMyItem}
keyExtractor={(item)=>item.id}
numColumns={2}
ListHeaderComponent={headerComp}
/>
</View>
)
}
export default FLToyCard
This is my App.js:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import SlugProduct from './Screens/SlugProduct';
export default function App() {
const Stack = createNativeStackNavigator()
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Login' >
// list of other pages
<Stack.Screen name="SlugProduct" component={SlugProduct} />
<Stack.Screen name='ViewToys' component={ViewToys}
</Stack.Navigator>
</NavigationContainer>
);
}
EDIT: heres the ViewToys page that FLToyCard is being input into. I've tried adding the onPress into both Views and FLToyCard but got the same error each time.
import { StyleSheet, Text, View, ScrollView} from 'react-native'
import React from 'react'
import FLToyCard from '../Components/FlatListCards'
const ViewToys = ({navigation}) => {
return (
<View style={{backgroundColor: '#ffce20', height: '100%'}}>
<View>
<FLToyCard />
</View>
</View>
)
}
export default ViewToys
The issue is that your not passing navigation props from screen ViewToys into component FLToyCard.
Try this
In ViewToys Screen:
import { StyleSheet, Text, View, ScrollView} from 'react-native'
import React from 'react'
import FLToyCard from '../Components/FlatListCards'
const ViewToys = ({navigation}) => {
return (
<View style={{backgroundColor: '#ffce20', height: '100%'}}>
<View>
<FLToyCard navigation={navigation}/>
</View>
</View>
)
}
export default ViewToys
change this <FLToyCard /> to this <FLToyCard navigation={navigation} />
and you are all done.
you are getting undefined in navigation in FLToyCard component that's why you are getting this error.
This error come when we do not put these mention in a page
import { NavigationContainer,useFocusEffect } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
So I think put above in every page once your problem will solve,
I'm developing mobile application with the below technologies.
- react-native
- native-base (Especially, Drawer component)
- react-native-router-flux
And I have a problem with mine.
My application has Drawer on the left side, and it can be shown from the left side on the screen when clicking the icon on the header.
However, when swiping back, the Drawer component can be seen but not as Drawer, it is like a screen that attaches on the left side.
This link is the GIF animation that reproduces my problem.
https://gyazo.com/a9109844199bae04f898431edbeaddbc
These are my code.
DrawerComponent
import React, { Component } from 'react';
import { Drawer, Hdeader, Left, Icon } from 'native-base';
import SidebarContainer from '../component/SidebarConmponent';
:
export default class DrawerComponent extends Component {
:
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SidebarComponent navigator={this._navigator} userId={this.props.userId} firebase={this.props.firebase}/>}
openDrawerOffset={0.4}
tapToClose={true}
onClose={() => this.closeDrawer}
onOpen={() => this.openDrawer}
styles={{ height: 100 }}
side={'left'}
type={'overlay'}
>
<Header style={{ backgroundColor: 'transparent' }}>
<Left style={{ flexDirection: 'row'}}>
<Icon onPress={this.openDrawer.bind(this)} type='MaterialIcons' name='menu' style={{ color: 'white', justifyContent: 'center' }} />
</Left>
{this.props.children}
</Drawer>
:
SiderbarComponent
:
import React, { Component } from 'react';
import { Container, Content, Header, Left, Icon, List, ListItem } from 'native-base';
export default class SidebarContainer extends Component {
:
render() {
return (
<Container>
<View style={{ height: height }}>
<Content>
<List>
<ListItem button>
<Icon type='Ionicons' name='md-home' />
<Text style={{ paddingLeft: 10 }}Home</Text>
</ListItem>
</List>
</Content>
</View>
</Container>
)
}
}
HomeComponent
import React, { Component } from 'react';
import { Text } from 'react-native';
import DrawerComponent from '../component/DrawerComponent';
export default class HomeComponent extends Component {
render(
return (
<DrawerComponent>
<Text>Home</Text>
</DrawerComponent>
)
)
}
Home component extends from wrong.need to extends from Component import
try this like this
import React from 'react'
import { Text } from 'react-native';
import DrawerComponent from '../component/DrawerComponent';
export default class Home extends React.Component {
render(){
return (
<DrawerComponent>
<Text>Home</Text>
</DrawerComponent>
)
}
}
So I've added a TouchableHighlight into my code but it doesn't render the image into the app, and the navigation prop assigned to it isn't activated.
import React, { Component } from "react";
import { Center } from "#builderx/utils";
import { View, StyleSheet, Image, Text } from "react-native";
import { createAppContainer } from 'react-navigation';
import { MainNavigation } from '../screens/MainNavigator';
import { TouchableHighlight } from 'react-native'
import { AppContainer } from "../screens/MainNavigator"
export default class DlLoading_2 extends Component {
render() {
return (
<View style={styles.root}>
<Center />
<TouchableHighlight onPress={() =>
{this.props.navigation.navigate('DlMain')}}>
<Image
source={require('../assets/ComponentTMP_0-image.jpg')}
style={styles.blueDisk}/>
</TouchableHighlight>
<Center horizontal>
<Image
source={require("../assets/ComponentTMP_0-image2.png")}
style={styles.dlLogo}
/>
</Center>
<Center horizontal>
<Text style={styles.text}>TRANSINDENTAL MEDITATION</Text>
</Center>
</View>
)
}
}
const styles = StyleSheet.create({
blueDisk: {
height: 401.5,
width: 602,
position: "absolute"
}
});
I've tried changing the image type, adding the styling to the element and that's pretty much all I can think of.
I have a custom header like this
import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Image } from 'react-native';
import { Header, Left, Right, } from 'native-base';
import { Icon } from 'react-native-elements';
export default class MainHeader extends React.Component {
pressSearch() {
this.props.navigation.navigate('Login');
}
render () {
return(
<Header style={{paddingTop:25}}>
<Left style={{marginBottom:10}}>
<TouchableOpacity>
<View style={{flexDirection:'row'}}>
<Image
style={styles.stretch}
source={require('../images/logoforplay.png')}
/>
<Text style={styles.headerText} > Eventlinn </Text>
</View>
</TouchableOpacity>
</Left>
<Right>
<TouchableOpacity
style={styles.headerButton}
onPress={this.pressSearch.bind(this)}
>
<Icon
name={'search'}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.headerButton}
>
<Icon
name={'add-location'}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.headerButton}
>
<Icon
name={'notifications'}
/>
</TouchableOpacity>
</Right>
</Header>
)
}
}
const styles = StyleSheet.create ({
mainContainer: {
flex:1,
backgroundColor:'white'
},
cardContainer: {
flex:1
},
stretch: {
height:35,
width:35,
},
headerText: {
fontSize:24,
marginTop:3,
},
headerButton: {
marginBottom:10,
marginLeft:15
}
})
My problem navigation.navigate not working.My routers working well because i can navigate to 'login' with another screen.I read something about pure components but still dont understand how to solve this problem.What do you suggest ? By the way i am new to react native.
If your header isn't a route within your Router at the head of your app you will need to use withRouter from react-router
import {withNavigation} from 'react-navigation'
export default withNavigation(MainHeader)
Now you should be able to access this.props.navigation without directly passing it down as a prop from a parent component.
use import { withNavigation } from 'react-navigation'; at the top and then export default withNavigation(FilmItem); at the end.
See doc : https://reactnavigation.org/docs/en/connecting-navigation-prop.html
i am using drawer from native base for my react native application. when u click the menu button the drawer not open up and i get this error ( _this._drawer.open ) is not a fucntion what is the isse here is my code
import React, { Component } from 'react';
import {
AppRegistry,View
} from 'react-native';
import {ScrollableTab,TabHeading, Drawer, Container,Content, Header,
Title, Button, Left, Right, Body, Icon ,Text,Tab, Tabs } from 'native-base';
import SecondStatus from './component/StatusComponent';
import HeaderComponent from './component/headerComponent';
import Sports from './component/Sports';
import MainPage from './component/MainPage';
import SideBar from './component/SideBar';
export default class Point extends Component {
closeDrawer = () => {
this.drawer.close()
};
openDrawer = () => {
alert('asasa click');
console.log('asad--');
this._drawer.open();
};
render() {
return (
<Container>
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar />}
onClose={() => this.closeDrawer()} >
<Header >
<Left>
<Button transparent onPress={this.openDrawer}>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>UrduPoint</Title>
</Body>
<Right>
<Button transparent onPress=
{this.openDrawer.bind(this)}>
<Icon name='menu' />
</Button>
</Right>
</Header>
</Drawer>
</Container>
);
}
}
AppRegistry.registerComponent('Point', () => Point);
here is my SideBar.js
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
export default class SideBar extends Component{
render(){
return(
<View>
<Text>
asad
</Text>
</View>
)
};
}
ps. this drawer is same as in npm 'react-native-drawer'
According to the native base documentation, you should call:
this.drawer.root.open()
I have used react-native-drawer this npm thats work for me
Here is a very basic working example using native-base
import React, { Component } from 'react';
import {
Container,
Header,
Left,
Button,
Icon,
Body,
Title,
Right,
Content,
Drawer,
Text
} from 'native-base';
import {
StyleSheet,
View,
ScrollView
} from 'react-native';
class SideBar extends Component {
render() {
return (
<Container>
<Content
bounces={false}
style={{ flex: 1, backgroundColor: '#fff', top: -1 }}
>
<Button transparent>
<Text>Action</Text>
</Button>
</Content>
</Container>
);
}
}
export default class Core extends Component {
openDrawer() {
this._drawer._root.open();
}
closeDrawer() {
this._drawer._root.close();
}
render() {
return (
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar navigator={this._navigator} />}
onClose={() => this.closeDrawer()}
>
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.openDrawer()}
>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>TITLE</Title>
</Body>
<Right />
</Header>
<Content>
</Content>
</Container>
</Drawer>
);
}
}
Here is the sample example of NativeBase Drawer provided in its docs with a note saying You need to create your own SideBar component and import it.
Drawer Sample Code
import React, { Component } from 'react';
import { Drawer } from 'native-base';
import SideBar from './yourPathToSideBar';
export default class DrawerExample extends Component {
render() {
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar navigator={this.navigator} />}
onClose={() => this.closeDrawer()} >
// Main View
</Drawer>
);
}
}
Check for Sidebar Sample Code from NativeBase-KitchenSink
this._drawer._root.open()
is working for me