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
Related
I didn't do a whole a lot of work on react-native to being with but the formik and react-native-elements is not getting anywhere with my setup. I am not really sure what I am missing exactly. Basically, the form cannot be submitted. I have a reusable button and input components made out of react native elements. The form don't get submitted. Out of curiousity, I also tried RN's default button to submit the form but it also doesn't work. My sandbox is here.
My setup is pretty straight forward as you can see below. Any help would be great on what I am missing exactly:
FormInput.js:
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { Input } from "react-native-elements";
export default class FormInput extends Component {
render() {
let { name, ...rest } = this.props;
return (
<>
<View>
<Input name={name} {...rest} />
</View>
</>
);
}
}
FormButton.js
import React, { Component } from "react";
import { Button } from "react-native-elements";
export default class FormButton extends Component {
render() {
let { title, ...rest } = this.props;
return (
<>
<Button title={title} {...rest} onPress={() => this.props.onPress} />
</>
);
}
}
App.js:
import React, { Component, Fragment } from "react";
import { Alert, Button, Image, StyleSheet, Text, View } from "react-native";
import FormInput from "./components/forms/FormInput";
import FormButton from "./components/forms/FormButton";
import * as yup from "yup";
import { Formik } from "formik";
class App extends Component {
handleSubmit = values => {
console.log("submitted values ", values);
};
render() {
return (
<View style={styles.app}>
<Formik
initialValues={{
name: ""
}}
onSubmit={values => {
this.handleSubmit(values);
}}
validationSchema={yup.object().shape({
name: yup
.string()
.min(3)
.max(25)
.required()
})}
>
{({
values,
handleChange,
errors,
setFieldTouched,
touched,
isValid,
handleBlur,
handleSubmit
}) => (
<Fragment>
<FormInput
name="name"
onChangeText={handleChange("name")}
onBlur={handleBlur("name")}
autoFocus
/>
<Button
onPress={() => handleSubmit}
title="React Native Button"
/>
<FormButton
title="React native elements child button"
onPress={() => handleSubmit}
/>
</Fragment>
)}
</Formik>
</View>
);
}
}
export default App;
Can you post the error if exist? And did you make a method for submit button so that it can pass the value ?
In you App.js you're buttons onPress should be like below:
<Button
onPress={handleSubmit}
title="React Native Button"
/>
<FormButton
title="React native elements child button"
onPress={handleSubmit}
/>
Your onPress do not need to be an annonymous function.
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 have used react native router flux, I want to pass the params to another page.
I have two page, home page (list of item) and detail page (detail of item).
I want to passing the item_id to detail page for fetching the data from API.
This is home page code:
import React, { Component } from 'react';
import { Container, Header, Content, List, ListItem, Thumbnail, Text, Left, Body, Right, Button } from 'native-base';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class Home extends Component {
render() {
return (
<Container>
<Content>
<List>
<ListItem thumbnail>
<Left>
<Thumbnail square source={require('../img/logo.png')} />
</Left>
<Body>
<Text>code</Text>
<Text note numberOfLines={1}>description</Text>
</Body>
<Right>
<Button transparent>
<Text onPress={() => Actions.detail({ item_id: 1 })}>View</Text>
</Button>
</Right>
</ListItem>
</List>
</Content>
</Container>
);
}
}
And this is Detail page code:
import React, { Component } from 'react';
import { Image, FlatList } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { Container, Header, Content, Accordion, CardItem, Body, Card, Left, Thumbnail, Icon, Text, Button } from "native-base";
import Greeting from '../components/props';
export default class Detail extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
}
}
render() {
return (
<Container>
<Content>
<Text>props: {this.props.item_id}</Text>
</Content>
</Container>
);
}
}
Here , the problem is that I need item_id.
(the detail page and the home page run without error)
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
I am very new to react-native and so I am just trying to stumble through user guides and playing around trying to figure things out.
I am having trouble getting a button to show up that I thought I have done correctly. Looking for some suggestions as to why its not appearing.
Logout Button Component:
import React from 'react';
import { Button, Icon } from 'native-base';
// Create our logout button
const LogoutButton = ({ children, buttonStyle, onPress, icon, text }) => {
return (
<Button onPress={onPress} style={buttonStyle}>
<Icon name={icon} />
{text}
</Button>
);
};
export { LogoutButton };
User Panel:
import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon, Text } from 'native-base';
import firebase from 'firebase';
import { LogoutButton } from './common';
export default class UserPanel extends Component {
render() {
return (
<Container>
<Header>
<Button transparent>
<Icon name='ios-menu' />
</Button>
<Title>Dashboard</Title>
<LogoutButton text="Logout" icon="ios-home" style={styles.logout} onPress={() => firebase.auth().signOut()} />
</Header>
</Container>
);
}
}
Button should be to the right of "Dashboard".
I am guessing it has something to do with styling?
In the latest NativeBase Header.js Line 77 onwards, type checking will be performed on its children and render only the following components: <Button>, <Title>, <Subtitle>, <InputGroup>.
Even <LogoutButton> is returning <Button> component, it will still be ignored due to its type.