I have this code in App.js (I'm using CRNA create-react-native-app).
import React from 'react';
import {StyleSheet, Text, View, Button, Navigator, Image} from 'react-native';
import {Container, Content, Header, Body, Icon} from 'native-base';
import UserLocation from './pages/UserLocation';
import ShopNow from './pages/ShopNow';
import ItemFavorite from './pages/ItemFavorite';
import {createStackNavigator,createDrawerNavigator, DrawerItems} from 'react-navigation';
export default class App extends React.Component {
constructor(props) {
super(props);
}
static navigationOptions = {
title:'Welcome',
headerLeft:
<View style={{paddingLeft:16}}>
<Icon
name="md-menu"
size={30}
color='black'
onPress={() => navigation.navigate('DrawerOpen')} />
</View>
}
render() {
return (
<AppStackNavigator/>
//<MyAppDrawer/>
);
}
}
const CustomDrawer = (props) => (
<Container>
<Header style={{
height:200
}}>
<Body>
<Image
style={styles.drawerImage}
source={require('./images/logo.png')}
/>
</Body>
</Header>
<Content>
<DrawerItems {...props} />
</Content>
</Container>
)
const MyAppDrawer = createDrawerNavigator({
Home: {
screen: UserLocation
},
Shop: {
screen: ShopNow
},
Favorite: {
screen: ItemFavorite
}
},{
initialRouteName: 'Home',
contentComponent: CustomDrawer,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
});
const AppStackNavigator = createStackNavigator({
Drawer: {screen: MyAppDrawer},
App: {
screen: UserLocation,
// navigationOptions:{
// title:'Welcome',
// headerLeft:
// <View style={{paddingLeft:16}}>
// <Icon
// name="md-menu"
// size={30}
// color='black'
// onPress={() => navigation.navigate('DrawerOpen')} />
// </View>
// }
},
ShopNow: { screen: ShopNow },
ItemFavorite: { screen: ItemFavorite}
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
drawerImage: {
height: 150,
width: 150,
borderRadius: 75
}
});
I don't know why anywhere I put the static navigationOptions, it doesn't change the header of the first page.
I also tried using the static navigationOptions.headerLeft in the specific page to add hamburger-icon, it doesn't work.
But in the page 'ItemFavorite' at the bottom of the file I set this:
ItemFavorite.navigationOptions = {
drawerIcon: (
<Image source={require('../images/tablet.png')} style={{ height: 24, width: 24 }} />
),
title: 'Favorite Item',
headerLeft: <Text onPress={() =>
navigation.navigate('DrawerOpen')}>Menu</Text>
}
it works! But not working in the first page of stack.
Do I miss something here?
You need put Your View in same line as headerLeft
import React from 'react';
import {StyleSheet, Text, View, Button, Navigator, Image} from 'react-native';
import {Container, Content, Header, Body, Icon} from 'native-base';
import UserLocation from './pages/UserLocation';
import ShopNow from './pages/ShopNow';
import ItemFavorite from './pages/ItemFavorite';
import {createStackNavigator,createDrawerNavigator, DrawerItems} from 'react-navigation';
export default class App extends React.Component {
constructor(props) {
super(props);
}
static navigationOptions = {
title:'Welcome',
headerLeft: <View style={{paddingLeft:16}}>
<Icon
name="md-menu"
size={30}
color='black'
onPress={() => navigation.navigate('DrawerOpen')} />
</View>
}
render() {
return (
<AppStackNavigator/>
//<MyAppDrawer/>
);
}
}
Related
I using the native-base library to create my app user interface, I make the native-base drawer and it's work correctly but when I move between component it gets an error for example when I move from Home screen to details screen and return to Home screen it gets an error like this null is not an object (evaluating '_this.drawer._root') from my details screen
Home.js file:
import React, { useEffect, useState } from 'react';
import * as Font from 'expo-font';
import { View, StyleSheet, ScrollView } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { Container, Header, Content, Spinner, Icon, Left, Right, Button, Body, Title, Drawer } from 'native-base';
import Product from './components/Product';
import SideBar from './components/SideBar';
function HomeScreen({ navigation, props }) {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://boho-box.com/api/app')
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};
return (
<Container>
<Header
style={{ backgroundColor: '#8498a3' }}
androidStatusBarColor="#8498a3"
>
<Left>
<Button transparent>
<Icon name='arrow-back' />
</Button>
</Left>
<Body style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
<Title style={{alignItems: 'center', justifyContent: 'center'}} >Products</Title>
</Body>
<Right>
<Button
transparent
onPress={() => {
this.openDrawer()
}}
>
<Icon name='menu' />
</Button>
</Right>
</Header>
<Drawer
side='right'
ref={(ref) => { this.drawer = ref; }}
content={<SideBar />}
>
<Content>
{isLoading ?
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', padding: 24 }}>
<Spinner color='#8498a3' />
</View>
:
<ScrollView
style={{
flexGrow: 0,
width: "100%",
height: "100%",
}}>
{
data.map((product, index) => {
return(
<View style={styles.row} key={index}>
<View style={styles.col}>
<Product product={product}/>
</View>
</View>
)
})
}
</ScrollView>
}
</Content>
</Drawer>
</Container>
);
}
const styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
col: {
flex: 1,
},
});
export default HomeScreen;
Details.js file:
import * as React from 'react';
import * as Font from 'expo-font';
import { View, Text, ScrollView } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { Container, Header, Content, Spinner, Left, Right, Button, Body, Title, Icon, Drawer } from 'native-base';
import Item from './components/Item';
import SideBar from './components/SideBar';
function DetailsScreen({ route, navigation, props }) {
const { name, price, img, text, productId } = route.params;
const detail = {
title: name,
price: price,
img: img,
text: text,
id: productId,
}
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};
return (
<Container>
<Header
style={{ backgroundColor: '#8498a3' }}
androidStatusBarColor="#8498a3"
>
<Left>
<Button transparent
onPress={() => {
navigation.goBack();
}}
>
<Icon name='arrow-back' />
</Button>
</Left>
<Body style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
<Title style={{alignItems: 'center', justifyContent: 'center'}} >Products</Title>
</Body>
<Right>
<Button transparent
onPress={() => {
this.openDrawer()
}}
>
<Icon name='menu' />
</Button>
</Right>
</Header>
<Drawer
side='right'
ref={(ref) => { this.drawer = ref; }}
content={<SideBar />}
>
<Content>
<ScrollView>
<Item pDetail={detail} />
</ScrollView>
</Content>
</Drawer>
</Container>
);
}
export default DetailsScreen;
Error screenshot when I want to return to Home screen:
I think the Home screen it's not rerender
react-native version: 0.63.2
native-base version: 2.15.2
react-native-cli version: 2.0.1
You are using a functional component, so you should use the 'useRef' hook for this
const drawer = useRef(null);
<Drawer
side='right'
ref={drawer}
content={<SideBar />}
>
The function should be like below
openDrawer = () => {
drawer.current._root.open()
};
I'm totally new to expo and react native
I'm trying to use ImageBackground
I use it as the code below but I get this error "Unable to resolve "./assets/back.jpg" from "app\components\Login.js" "
My image is already in assets folder in my project
And also when I try to import font I get the same error
Does it need to import something before using or something else?
I also Tried it by not importing the image and adding the path directly to source property
Login.js
import React, { Component } from 'react';
import back from './assets/back.jpg';
import {
StyleSheet,
Text,
View,
TextInput,
KeyboardAvoidingView,
TouchableOpacity,
AsyncStorage,
Image,
ImageBackground,
} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
export default class Login extends React.Component {
static navigationOptions = {
header: null,
};
constructor(props) {
super(props);
this.state = {
username:'',
password:'',
}
}
componentDidMount(){
this._loadInitialState().done();
}
_loadInitialState = async () =>{
var value = await AsyncStorage.getItem('user');
if (value !=null){
this.prop.navigation.navigate('Profile');
}
}
render() {
return (
<ImageBackground source={back} style={styles.backImg}>
<KeyboardAvoidingView behavior='padding' style={styles.wrapper}>
<View style={styles.container}>
<Image
style={styles.logo}
source={require('/MyFirst/assets/logo.png')}
/>
<TextInput
style={styles.textInput} placeholder='Username'
onChangeText={(username) =>this.setState({username}) }
underlineColorAndroid = 'transparent'
/>
<TextInput
style={styles.textInput} placeholder='Password'
onChangeText={(password) =>this.setState({password}) }
underlineColorAndroid = 'transparent'
/>
<TouchableOpacity style={styles.btn}
onPress={this.login}>
<Text style={styles.btnText}>Login</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
wrapper:{
flex:1,
},
container:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#e5ffd3',
paddingLeft:40,
paddingRight:40,
},
logo:{
width: 250,
height: 250,
},
textInput:{
alignSelf:'stretch',
padding:16,
marginBottom:20,
backgroundColor:'#fff',
borderWidth: 1,
borderColor: '#d6d7da',
borderRadius: 25,
},
btn:{
alignSelf:'stretch',
backgroundColor:'#589e25',
padding:20,
alignItems: 'center',
borderRadius: 25,
},
btnText:{
color: '#ffffff',
},
})
App.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Login from './app/components/Login'
import Profile from './app/components/Profile'
const MainNavigator = createStackNavigator({
Home: {screen: Login},
Profile: {screen: Profile},
});
const App = createAppContainer(MainNavigator);
export default App;
You should use ImageBackground in this way. It will solve your problem
<ImageBackground source={require('../../assets/back.jpg')} style={styles.backImg}>
Working example can be found here Link
I have following code in App.js
import React, { Component } from 'react';
import { Text, View,} from 'react-native';
import{DrawerNavigator, DrawerActions} from 'react-navigation';
import { Menu} from './src/components/menu';
export default class MainView extends Component {
render(){
return(
<View>
<Menu />
<Text> WHAT ??? </Text>
</View>
);
}
}
and following code in src/components/menu.js
'use strict';
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import{DrawerNavigator, DrawerActions} from 'react-navigation';
export class Menu extends Component {
render(){
return(
<View style= {styles.navContainer}>
<View style= {styles.navContainerFlexing}>
<View>
<Icon name="bars" size={25} color= 'black' style={{marginLeft: 10, fontWeight: '200' }} onPress={() => this.props.navigation.dispatch(DrawerActions.toggleDrawer())} />
</View>
<Text style={[styles.whiteText, styles.navItem]}>Home</Text>
</View>
</View>
);
}
}
export const Drawer = DrawerNavigator(
{
Menu: Menu,
},
{
// initialRouteName: 'Home',
},
{
drawerPosition: 'left',
initialRouteName: 'Home',
drawerBackgroundColor: 'white',
drawerWidth: 300,
}
);
const styles= StyleSheet.create({
navContainer: {
height: 55,
backgroundColor: '#3ba558',
alignItems: 'center',
// flex: 1,
flexDirection: 'row',
// justifyContent: 'flex-start'
},
navContainerFlexing: {
flex: 2,
flexDirection: 'row',
backgroundColor: '#3ba558',
paddingLeft: 20
},
whiteText: {
color: 'white',
},
navItem: {
alignItems: 'center',
marginTop: 'auto',
marginBottom: 'auto',
marginLeft: 10
},
});
Now I want my Menu class to display in App.js, which is displaying but and I also want it workable DrawerNavigator in homepage, right now the drawer is giving:
undefined is not an object (evaluating '_this.props.navigation.dispatch')
I Have explained the configuration of DrawerNavigator in the below link.
Look into the accepted answer in the below link.
How to create a Drawer Component and adding it to multiple screens
As I explained in it try to understand the concept and do not copy the syntax.
Do a comparison with your configuration, you will find your problem.
How Could i Show Drawer Navigator and Tab Navigator Together?
It only shows one of them by changing the order of
<TabNavigate /> ,
<AppDrawerNav />
in this part
export default class App extends Component {
render() {
return (
<TabNavigate /> ,
<AppDrawerNav />
);
}
}
***************** Here is the Full code *************************
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, SafeAreaView, ScrollView,
Dimensions, Image } from 'react-native';
import { createDrawerNavigator, DrawerItems, createMaterialTopTabNavigator }
from 'react-navigation';
import HomeScreen from './Screens/HomeScreen';
import SettingScreen from './Screens/SettingScreen';
import SwitchesScreen from './Screens/SwitchesScreen';
import SencesScreen from './Screens/SencesScreen';
export default class App extends Component {
render() {
return (
<TabNavigate /> ,
<AppDrawerNav />
);
}
}
const CustomDrawerContents = (props) => (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 150, backgroundColor: 'white', alignItems:
"center", justifyContent: "center" }}>
<Image source={require('./Images/hotel.png')} style={{ height: 120, width:
120, margin: 20 }} />
</View>
<ScrollView>
<DrawerItems{...props} />
</ScrollView>
</SafeAreaView>
)
const AppDrawerNav = createDrawerNavigator({
Home: HomeScreen,
Settings: SettingScreen
}, {
contentComponent: CustomDrawerContents,
drawerWidth: 200,
contentOptions: {
activeTintColor: 'orange'
}
}
)
const TabNavigate = createMaterialTopTabNavigator({
Switches: SwitchesScreen,
Sences: SencesScreen
},
{
tabBarPosition: "bottom",
swipeEnabled: false,
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: 'gray',
showIcon: true,
style: {
backgroundColor: 'white'
},
indicatorStyle: {
backgroundColor: 'teal',
height: 0
}
}
})
i Found some Similar questions previously asked but non of them worked for me
i want both drawer and tabs in all pages
i'm beginner , please help me
Thanks
This is a simple sample code:
First, you need to install.: react-navigation
$ npm i react-navigation --save
and here is the App.js sample:
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator, createDrawerNavigator } from 'react-navigation';
class InitialScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
class ConfigScreenApp extends Component {
render() {
return (
<View style={[styles.container, {backgroundColor:'green'}]}>
<Text>Config App Screen</Text>
</View>
);
}
}
class ConfigScreenProfile extends Component {
render() {
return (
<View style={[styles.container, {backgroundColor:'yellow'}]}>
<Text>Config Profile Screen</Text>
</View>
);
}
}
const ConfigScreen = createDrawerNavigator({
ConfigScreenApp:{
screen:ConfigScreenApp
},
ConfigScreenProfile:{
screen:ConfigScreenProfile
}
});
const Navegador = createBottomTabNavigator({
Home: {
screen:InitialScreen
},
Config: {
screen:ConfigScreen
}
});
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
marginTop:20
}
});
export default Navegador;
that's all..
I'm trying to use tcomb-form-native in my react-native (android) app but i get this error msg: undefined is not an object (evaluating '_react.PropTypes.string') react native
I used following commands for install tcomb-form-native :
npm install tcomb-form-native
npm install tcomb --save
npm install tcomb-json-schema
this is my code :
Sign in.js
import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
Image,
KeyboardAvoidingView,
Alert,
TouchableHighlight,
} from 'react-native';
import t from 'tcomb-form-native';
const Form = t.form.Form;
const Login = t.struct({
username: t.String,
password: t.String
});
const options = {
fields: {
password: {
type: 'password',
placeholder: 'Password',
},
username: {
placeholder: 'e.g: abc#gmail.com',
error: 'Insert a valid email'
}
}
}
class SignIn extends Component {
onPress() {
const value = this.refs.form.getValue();
if (value) {
console.log(value);
}
};
render() {
return (
<View style={styles.container}>
<Form
ref="form"
type={Login}
options={options}
/>
<Text style={{color: 'blue', marginBottom: 10}}
onPress={() => Linking.openURL('https://www.google.co.in')}>
Forgot Password?
</Text>
<TouchableHighlight style={styles.button} onPress={this.onPress} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Sign In</Text>
</TouchableHighlight>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 50,
padding: 20,
backgroundColor: '#ffffff',
},
title: {
fontSize: 30,
alignSelf: 'center',
marginBottom: 30
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
}
});
export default SignIn;
Index.js
import React, { Component } from 'react';
import { Scene, Router } from 'react-native-router-flux';
import Page1 from './src/page1';
import Page2 from './src/page2';
import Login from './src/components/login/Login';
import SignUp from './src/components/login/SignUp';
import SignIn from './src/components/login/SignIn';
import GeoMap from './src/components/maps/GeoMap';
class App extends Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="signIn" component={SignIn} hideNavBar={true} title="Sign In" initial="true"/>
<Scene key="login" component={Login} hideNavBar={true} title="Login" />
<Scene key="p1" component={Page1} title="Page1" />
<Scene key="p2" component={Page2} title="Page2" />
<Scene key="signIn" component={Login} title="Sign In" />
<Scene key="signUp" component={SignUp} title="Sign Up" />
<Scene key="geoMap" component={GeoMap} title="Maps" />
</Scene>
</Router>
);
}
}
export default App;
index.android.js
import {
AppRegistry
} from 'react-native';
import App from './app/index';
AppRegistry.registerComponent('GravitonApp', () => App);
Since React v15.5, React.PropTypes has moved into a different package. You should use the prop-types library instead.
import PropTypes from 'prop-types'
instead of
import { PropTypes } from 'react'