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
Related
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}/>
I'm two days trying to make a sidebar work using react native base.
I'm using the example I saw on the react native base website (https://docs.nativebase.io/Components.html#Drawer)
The sidebar is running (it opens). But there's been a kind of modal over the sidebar. The sidebar does not turn white. It gets dark as if it's underneath where it should be.
Look at the two pictures
I do not know what to do. Does anyone have an idea how to make this sidebar menu work? Here's the code I'm using
App.js
import React, { Component } from 'react'
import { Text } from 'react-native'
import { Header, Left, Button, Icon, Right, Body, Title, Drawer } from 'native-base'
import SideBar from './src/components/SideBar'
export default class AppHeader extends Component {
closeDrawer() {
this.drawer._root.close()
}
openDrawer() {
this.drawer._root.open()
}
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar />}
onClose={() => this.closeDrawer()}
>
<Header>
<Left>
<Button transparent onPress={() => this.openDrawer()}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>Title</Title>
</Body>
<Right>
<Button transparent>
<Icon name="bulb" />
</Button>
</Right>
</Header>
</Drawer>
)
}
}
module.exports = AppHeader
SideBar.js
import React, { Component } from 'react';
import { Text } from 'react-native';
import {Content} from 'native-base';
export default class SideBar extends Component {
render() {
return (
<Content style={{backgroundColor:'#FFFFFF'}}>
<Text>Side Bar</Text>
</Content>
);
}
}
module.exports = SideBar;
try to insert the Container Tag inside Sidebar.class:
export default class SideBar extends Component {
render() {
return (
<Container>
<Content style={{backgroundColor:'#FFFFFF'}}>
<Text>Side Bar</Text>
</Content>
</Container>
);
}
}
alternatively you can try to follow (as I did) the structure of NativeBaseKitchenSink: https://github.com/GeekyAnts/NativeBase-KitchenSink
i have a problem i select an image from my phone gallery but now i want to pass it into an other component how i can achieve this ?
i have a component named as gallery in this component i render images from my phone gallery .and i can select any one image from gallery after that when i select a image i want to send it into an other component named as APPLYFILTER
here is my code of Component named as gallery which i used too get image from gallery
import React, { Component } from "react";
import { TouchableOpacity,StatusBar,View,Modal,
TouchableHighlight,StyleSheet,Image } from "react-native";
import { connect } from "react-redux";
import { DrawerNavigator, NavigationActions } from "react-navigation";
import {Icon} from 'react-native-elements';
import {
Container,
Header,
Title,
Content,
Text,
Button,
Left,
Body,
Right,
List,ListItem,Thumbnail,Footer,FooterTab
} from "native-base";
import { Grid, Row } from "react-native-easy-grid";
import CameraRollPicker from 'react-native-camera-roll-multi-picker';
export default class Search extends Component {
static navigationOptions = {
header: null
}
constructor(props) {
super(props);
this.state = {
pickedImage:null,
num:0,
selectSingleItem:true,
images:[],
};
}
getSelectedImages(images){
let image = images.length > 0 ? images[images.length-1] : null;
this.setState({pickedImage:image, images:images,num:images.length});
}
addfilter()
{
if(this.state.num>0)
{
this.props.navigation.navigate('AddFilter');
}
else{
alert('Please select a image');
}
}
render() {
return (
<Container>
<Header>
<Left>
<Button transparent active onPress={()
=>this.props.navigation.navigate('Home') }>
<Text style={{color:'#000'}}>Cancel</Text>
</Button>
</Left>
<Right>
<Button transparent onPress={this.addfilter.bind(this) }>
<Text style={{color:'#000'}}>Next</Text>
</Button>
</Right>
</Header>
<Content >
<View style={{height:300,}}>
<Image source={this.state.pickedImage} resizeMode={'stretch'}style={{ width: '100%', height:300 }} />
{/* {this.state.image} */}
</View>
<CameraRollPicker selectSingleItem='true'
callback={this.getSelectedImages.bind(this)} />
</Content>
<Footer>
<FooterTab>
<Button >
<Text >Gallery</Text>
</Button>
<Button>
<Text>Photos</Text>
</Button>
<Button >
<Text>Videos</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
}
})
You can pass Image as props value to AddFilter component.
this.props.navigation.navigate('AddFilter',<Image Value>).
recently started working on an app using https://github.com/start-react/native-starter-kit
Heres my component:
import React, { Component } from "react";
import { TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import BlankPage2 from "../blankPage2";
import DrawBar from "../drawBar";
import TopNav from "../topNav";
import { DrawerNavigator, NavigationActions } from "react-navigation";
import {
Container,
Header,
Title,
Content,
Text,
Button,
Icon,
Left,
Body,
Right,
Image,
} from "native-base";
import { Grid, Row } from "react-native-easy-grid";
import { setIndex } from "../../actions/list";
import { openDrawer } from "../../actions/drawer";
import styles from "./styles";
class News extends Component {
static navigationOptions = {
header: null
};
render() {
return (
<Container style={styles.container}>
<Header>
<Left>
<Button
transparent
onPress={() => DrawerNav.navigate("DrawerOpen")}>
<Icon active name="menu" />
</Button>
</Left>
<Body>
<Title>News</Title>
</Body>
<Right>
</Right>
</Header>
<Content scrollEnabled={false}>
<TopNav navigation={this.props.navigation}></TopNav>
<Grid style={styles.mt}>
{this.props.list.map((item, i) => (
<Row key={i}>
<TouchableOpacity
style={styles.row}
onPress={() =>
this.props.navigation.navigate("BlankPage", {
name: { item }
})}>
<Image source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}} />
<Text style={styles.text}>{item}</Text>
</TouchableOpacity>
</Row>
))}
</Grid>
</Content>
</Container>
);
}
}
function bindAction(dispatch) {
return {
setIndex: index => dispatch(setIndex(index)),
openDrawer: () => dispatch(openDrawer())
};
}
const mapStateToProps = state => ({
name: state.user.name,
list: state.list.list
});
const NewsSwagger = connect(mapStateToProps, bindAction)(News);
const DrawNav = DrawerNavigator(
{
News: { screen: NewsSwagger },
BlankPage2: { screen: BlankPage2 }
},
{
contentComponent: props => <DrawBar {...props} />
}
);
const DrawerNav = null;
DrawNav.navigationOptions = ({ navigation }) => {
DrawerNav = navigation;
return {
header: null
};
};
export default DrawNav;
And of course, heres my error:
And i have no clue why this is happening. As soon as i remove the Image tag, error goes away. I can't really export the News Component, becouse i am using the Drawer thingy(check starter-kit-demo).
Edit: Error happens on IOS. Iphone 6 emulator.
You are importing Image from native-base when you should be importing it from react-native
import {
Container,
Header,
Title,
Content,
Text,
Button,
Icon,
Left,
Body,
Right,
Image // remove this one
} from "native-base";
And add
import {
TouchableOpacity,
Image
} from "react-native";
Also you'll have to add a height & width for a proper render.
<Image
style={{width: 300, height: 300}}
source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
/>
My function onPressreturn undefined is not a object
This is my code :
import React, {Component} from 'react';
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native';
import {connect} from 'react-redux';
import {Actions} from 'react-native-router-flux';
import {
Container,
Content,
Text,
Icon,
View,
Left,
Right,
Header,
Body,
Title,
Animated
} from 'native-base';
import styles from './styles';
class Championnat extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
{slug : 'team', name : 'Liqgue1'},
{slug : 'worldcup', name : 'Coupe du monde'},
]),
};
}
pressRow(data) {
console.log(data);
}
renderRow(data){
return (
<TouchableHighlight onPress={()=> this.pressRow(data)}>
<View style={styles.lstView}>
<Image style={styles.lstPicto} />
<Text style={styles.lstText}>{data.name}</Text>
<Icon name="angle-right" right style={styles.lstIcon} />
</View>
</TouchableHighlight>
)
}
render() {
return (
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Button transparent onPress={() => Actions.pop()}>
<Icon active name="angle-left"/>
</Button>
</Left>
<Body>
<Title>Choisir un championnat</Title>
</Body>
<Right></Right>
</Header>
<View style={{flex: 1}}>
<ListView
dataSource={this.state.dataSource}
renderRow = {this.renderRow.bind(this)}
></ListView>
</View>
</Container>
)
}
}
export default connect()(Championnat);
Inside of your constructor you need to bind() your function, or use arrow functions.
constructor() {
// your code
this.pressRow = this.pressRow.bind(this);
}
Otherwise, declare your function as an arrow function.
pressRow = (data) => {
// your code
}
change renderRow(data) as arrow function like below snippet
renderRow = (data) => {
// your logic
}
and make sure you pressRow function should be arrow function
pressRow = (data) => {
console.log(data);
}
Hope this will work. :)
This is my screen when i tape on TouchableHighlight. The pb exist only on TouchableHighlight if i change TouchableHighlight for Button, there is no pb.
But on offical doc (https://facebook.github.io/react-native/docs/listview.html), react ask to use TouchableHighlight on listView
try this one.. it should work.. when you render a listView, each of you data belong to one unique ID..
pressRow(event) {
console.log(event);
}
renderRow(data, rowID){
return (
<TouchableHighlight key={rowID} onPress={()=> this.pressRow(rowID)}>
<View style={styles.lstView}>
<Image style={styles.lstPicto} />
<Text style={styles.lstText}>{data.name}</Text>
<Icon name="angle-right" right style={styles.lstIcon} />
</View>
</TouchableHighlight>
)
}
This is my entire code :
In renderRow, if i comment Button an decomment TouchableHighlight it doesn't work, if i comment TouchableHighlight and decomment Button, it'work's.
import React, {Component} from 'react';
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native';
import {connect} from 'react-redux';
import {Actions} from 'react-native-router-flux';
import {
Container,
Content,
Text,
Item,
Input,
Button,
Icon,
View,
Left,
Right,
Header,
Body,
Title,
Spinner,
Animated
} from 'native-base';
import styles from './styles';
import * as competition from '../../../services/competition';
class ContentLoaded extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
class Competition extends Component {
constructor(props) {
super(props);
this.pressRow = this.pressRow.bind(this);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
this.fetchData();
}
/**
* Cherche les competitions
*/
fetchData = function() {
competition.getAll()
.then((data) => {
console.log(data);
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data),
loaded: true,
});
})
.catch((exception) => {
console.log('competition controller 47', exception);
});
}
/**
* Click sur une competiotn
* #param data
*/
pressRow = (data, rowId) => {
console.log(data);
console.log(rowId);
}
/**
* render d'une ligne
* #param data
* #returns {XML}
*/
renderRow(data, rowId){
return (
//<TouchableHighlight key={rowID} style={styles.lstView} onPress={()=> this.pressRow(rowId)}>
<Button style={styles.lstView} onPress={()=> this.pressRow(data, rowId)}>
<Image style={styles.lstPicto} />
<Text style={styles.lstText}>{data.name}</Text>
<Icon name="angle-right" right style={styles.lstIcon} />
</Button>
//</TouchableHighlight>
)
}
/**
* Affichage conditionnek
* #returns {XML}
* #constructor
*/
ContentLoaded () {
if (!this.state.loaded) {
return <Text>
Loading movies...
</Text>
}
return <ListView
dataSource={this.state.dataSource}
renderRow = {this.renderRow.bind(this)}
></ListView>
}
/**
* Render
* #returns {XML}
*/
render() {
return (
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Button transparent onPress={() => Actions.pop()}>
<Icon active name="angle-left"/>
</Button>
</Left>
<Body>
<Title>Choisir un championnat</Title>
</Body>
<Right></Right>
</Header>
<View style={{flex: 1}}>
{!this.state.loaded ? (
<Spinner size="small" color="#000000" />
) : (
<ListView
dataSource={this.state.dataSource}
renderRow = {this.renderRow.bind(this)}
></ListView>
)}
</View>
</Container>
)
}
}
export default connect()(Competition);
import React, {Component} from 'react';
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native';
import {connect} from 'react-redux';
import {Actions} from 'react-native-router-flux';
import {
Container,
Content,
Text,
Icon,
View,
Left,
Right,
Header,
Body,
Title,
Animated
} from 'native-base';
import styles from './styles';
class Championnat extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
{slug : 'team', name : 'Liqgue1'},
{slug : 'worldcup', name : 'Coupe du monde'},
]),
};
}
pressRow(data) {
console.log(data);
}
renderRow(data){
return (
<TouchableHighlight onPress={()=> this.pressRow(data)}>
<View style={styles.lstView}>
<Image style={styles.lstPicto} />
<Text style={styles.lstText}>{data.name}</Text>
<Icon name="angle-right" right style={styles.lstIcon} />
</View>
</TouchableHighlight>
)
}
render() {
return (
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Button transparent onPress={() => Actions.pop()}>
<Icon active name="angle-left"/>
</Button>
</Left>
<Body>
<Title>Choisir un championnat</Title>
</Body>
<Right></Right>
</Header>
<View style={{flex: 1}}>
<ListView
dataSource={this.state.dataSource}
renderRow = {this.renderRow.bind(this)}
></ListView>
</View>
</Container>
)
}
}
export default connect()(Championnat);