I have a componet like:
import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import { StyleProvider, Container, Content, Footer, FooterTab, Button, Icon } from 'native-base'
export default class MainFooter extends Component {
render() {
return (
<StyleProvider style={footerTabTheme}>
<Footer>
<FooterTab>
<Button>
<Icon name="ios-home" />
</Button>
<Button active>
<Icon name="ios-people" />
</Button>
<Button>
<Icon style={{fontSize: 45}} name="ios-radio-button-on-outline" />
</Button>
<Button>
<Icon name="md-medkit" />
</Button>
<Button>
<Icon name="ios-people" />
</Button>
</FooterTab>
</Footer>
</StyleProvider>
)
}
}
const footerTabTheme = {
"NativeBase.Button": {
".active": {
backgroundColor: "#c71818",
}
}
}
According to documentation I should be able to customize the active button background color for footer now.
But I am getting error about can not read androidRipple or something.
What is wrong in here ?
According to the documentation, you need wrap all UI inside the 'Container' component:
<StyleProvider style={...}>
<Container> {*<--------------*}
...
<Container>
</StyleProvider>
Related
Hi my friend how to solve this problem,I have the following sourcode :
import React, { Component } from 'react';
import { Container, Header, Content, SwipeRow, View, Text, Icon, Button } from 'native-base';
class SwipeRowExample extends Component {
render() {
return (
<Container>
<Header />
<Content scrollEnabled={false}>
<SwipeRow
leftOpenValue={75}
rightOpenValue={-75}
left={
<Button success onPress={() => alert('Add')}>
<Icon active name="add" />
</Button>
}
body={
<View>
<Text>SwipeRow Body Text</Text>
</View>
}
right={
<Button danger onPress={() => alert('Trash')}>
<Icon active name="trash" />
</Button>
}
/>
</Content>
</Container>
);
}
}
export default SwipeRowExample;
Message obtained: undefined is not an object (evaluating 'this.panResponder.panHandlers')
But the results displayed :
SwipeRow was removed from the latest version and they recommend react-native-swipe-list-view
to use SwipeRow change native base version to 2.12.0
SwipeRow (removed)
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>).
I got this error after tapping Categories Tab(Button):
undefined is not object (evaluating _this2.props.navigation.navigate)
it seems that the navigation property is not defined in AppFooter
I use nativebase for themeing.
App.js
...
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class Home extends Component {
static navigationOptions = {
header: null,
}
render() {
return (
<StyleProvider style={getTheme(platform)}>
<Container>
<Header style={{justifyContent:'flex-end'}}>
. . .
</Header>
<Content>
. . .
</Content>
<AppFooter/>
</Container>
</StyleProvider>
);
}
}
const Pardisiha = StackNavigator({
Home: { screen: Home },
Category: { screen: Category },
});
AppRegistry.registerComponent('Pardisiha', () => Pardisiha);
AppFooter.js
import React, { Component } from 'react';
import { Footer, Button, FooterTab, Text, Icon } from 'native-base';
export default class Index extends Component {
render() {
return (
<Footer>
<FooterTab>
<Button vertical style={{paddingLeft:0,paddingRight:0}}>
<Icon name="person" />
<Text>Profile</Text>
</Button>
<Button vertical style={{paddingLeft:0,paddingRight:0}}>
<Icon name="search" />
<Text>Search</Text>
</Button>
<Button vertical style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.navigation.navigate('Category')} >
<Icon active name="list" />
<Text>Categories</Text>
</Button>
<Button vertical active style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.navigation.navigate('Category')} >
<Icon name="home" />
<Text>Home</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
i have a solution for you, i have tried your code, and work in me.
you can add function to navigate your navigation and passing it into AppFooter Component, this is the function :
App.js
onNavigate = (Screen) =>{
this.props.navigation.navigate(Screen)
}
and then passing into your AppFooter, modify your code to this one:
App.js
<AppFooter onNavigate={this.onNavigate} />
and then if you want to call this function, modify to this one too:
AppFooter.js
<Button vertical style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.onNavigate('Category')} >
<Icon active name="list" />
<Text>Categories</Text>
</Button>
<Button vertical active style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.onNavigate('Home')} >
<Icon name="home" />
<Text>Home</Text>
</Button>
Hope can solving your problem, please notice me if you have another error, thanks :)
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