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..
Related
I want to add a BottomNavigation to one of the screen of my App, I already used StackNavigation. How do I Implement the BottomNavigation into the routing flow?
I have tried doing it this way
import React from 'react';
import LoginForm from './src/Login/LoginForm';
import Register from './src/Register/Register';
import Timeline from './src/Timeline/Timeline';
import Post from './src/Product/Post';
import Profile from './src/Profile/Profile';
import IconWithBadge from './src/Utility/IconWithBadge';
import {createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer } from "react-navigation";
import { Font } from 'expo';
const AuthStack = createStackNavigator(
{
LoginScreen: {screen:LoginForm,navigationOptions: { header: null }},
RegisterScreen: {screen: Register,navigationOptions: { header: null }},
},
{
initialRouteName: "LoginScreen",
}
);
const AppStack = createStackNavigator(
createBottomTabNavigator(
{
TimelineScreen:Timeline,
ProductScreen:Post
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'TimelineScreen') {
iconName = `ios-home${focused ? '' : '-outline'}`;
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = IconWithBadge;
} else if (routeName === 'ProductScreen') {
iconName = `ios-plus`;
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
)
)
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Auth: AuthStack,
App: AppStack
}
));
export default class App extends React.Component {
render() {
return (
<AppContainer/>
);
}
}
Here is the IconWithBadge.js
import React, {Component} from 'react';
class IconWithBadge extends React.Component {
render() {
const { name, badgeCount, color, size } = this.props;
return (
<View style={{ width: 24, height: 24, margin: 5 }}>
<Ionicons name={name} size={size} color={color} />
{badgeCount > 0 && (
<View
style={{
// /If you're using react-native < 0.57 overflow outside of the parent
// will not work on Android, see https://git.io/fhLJ8
position: 'absolute',
right: -6,
top: -3,
backgroundColor: 'red',
borderRadius: 6,
width: 12,
height: 12,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
{badgeCount}
</Text>
</View>
)}
</View>
);
}
}
Here is my App.js
import React from 'react';
import LoginForm from './src/Login/LoginForm';
import Register from './src/Register/Register';
import Timeline from './src/Timeline/Timeline';
import Post from './src/Product/Post';
import Profile from './src/Profile/Profile';
import IconWithBadge from './src/Utility/IconWithBadge';
import {createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer } from "react-navigation";
const AuthStack = createStackNavigator(
{
LoginScreen: {screen:LoginForm,navigationOptions: { header: null }},
RegisterScreen: {screen: Register,navigationOptions: { header: null }},
},
{
initialRouteName: "LoginScreen",
}
);
const AppStack = createStackNavigator(
{
TimelineScreen: {screen:Timeline,navigationOptions: { header: null,title: "Welcome to the dashboard" }}
}
)
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Auth: AuthStack,
App: AppStack
}
));
export default class App extends React.Component {
render() {
return (
<AppContainer/>
);
}
}
My code seems not to work with my set up here, how do I place the Bottom Navigation routing into the stacknavgiation in order to see it on the TimelineScreen
Modify your code as following. Essentially replace createSwitchNavigator with createBottomTabNavigator
const AppContainer = createAppContainer(
createBottomTabNavigator(
{
Auth: AuthStack,
App: AppStack
}
));
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've seen a ton of people having this issue, but no one's answer has solved this error for me. The error I'm getting is:
undefined is not an object react native evaluating this.props.navigation Here is a picture https://imgur.com/a/JP9RLZT
My goal is to create a login screen that leads to a mainscreen that has a tab bar. The bar works, but I can't figure out how to make the login screen open to that screen because of the above error.
My code for the applicable files looks like this:
app.js
import React from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation'
import MainScreen from './Components/MainScreen'
import Login from './Components/Login/Login'
export default class App extends React.Component {
static navigationOptions = {
title: 'LoginScreen',
headerStyle: {
backgroundColor: '#212121',
},
headerTitleStyle: {
color: '#fff'
}
};
render() {
//const { navigate } = this.props.navigation;
return (
<Login />
);
}
}
const AppStackNavigator = StackNavigator({
Login: {
screen: Login
},
Main: {
screen: MainScreen
},
},
{
initialRouteName: 'Login'
}
)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
})
AppRegistry.registerComponent('BIDMCATHOME', () => AppStackNavigator);
Here's my Login screen code
import React, { Component } from "react";
import {
Text,
} from "react-native";
import { Alert, Button, TextInput, View, StyleSheet } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';
import { Icon } from 'native-base'
export default class Login extends Component {
constructor(props) {
super(props);
const { navigate } = this.props.navigation;
this.state = {
username: '',
password: '',
};
}
onLogin() {
const { username, password } = this.state;
// Alert.alert('Credentials', `${username} + ${password}`);
}
render() {
const { navigate } = this.props.navigation
return (
<View style={styles.container}>
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
placeholder={'Username'}
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
style={styles.input}
/>
<Button
value={this.state.Login}
title={'Login'}
style={styles.input}
onPress={() =>
navigate('MainScreen', { name: 'MainScreen' })}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
},
});
Here's my mainscreen (tab bar screen code)
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Platform
} from "react-native";
import HomeTab from './AppTabNavigator/HomeTab'
import SearchTab from './AppTabNavigator/SearchTab'
import AddMediaTab from './AppTabNavigator/AddMediaTab'
import LikesTab from './AppTabNavigator/LikesTab'
import ProfileTab from './AppTabNavigator/ProfileTab'
import { TabNavigator } from 'react-navigation'
import { Icon } from 'native-base'
class MainScreen extends Component {
static navigationOptions =
{
title: 'MainScreen',
};
render() {
return (
<AppTabNavigator />
);
}
}
export default MainScreen;
const AppTabNavigator = TabNavigator({
HomeTab: {
screen: HomeTab
},
SecondTab: {
screen: SearchTab
},
ThirdTab: {
screen: AddMediaTab
},
MedList: {
screen: LikesTab
},
ProfileTab: {
screen: ProfileTab
}
}, {
animationEnabled: false,
swipeEnabled: true,
tabBarPosition: "bottom",
tabBarOptions: {
style: {
...Platform.select({
android: {
backgroundColor: 'white'
}
})
},
activeTintColor: '#000',
inactiveTintColor: '#d1cece',
showLabel: true,
showIcon: false
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
When you are using a component and want to navigate to other pages via that component, you have to pass this.props.navigation to that component. in your code, you are using Login as a component so you can use this code:
render() {
//const { navigate } = this.props.navigation;
return (
<Login navigation={this.props.navigation} />
);
}
I hope this may help you..
I guess this.props.navigation in your Login component is undefined.
Can you please verify that using a console log.
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/>
);
}
}
My problem is I can't make components to be displayed above background images.
I've read about layout properties and other related SO questions but can't seem to make it work on my project although in my understanding implementation below is correct:
import React, { Component } from 'react';
import { AppRegistry, Image, TextInput, StyleSheet, View } from 'react-native';
let styles = StyleSheet.create({
backgroundImage: {
top: -150,
left: -275
},
dimOverlay: {
flex: 1,
opacity: 0.5,
backgroundColor: 'black',
},
loginForm: {
}
});
class LoginForm extends Component {
constructor(props) {
super(props);
}
render(){
return (
<View>
<TextInput autoCorrect={false} defaultValue='asdf'/>
<TextInput autoCorrect={false} />
</View>
)
}
}
class Background extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Image source={require('./img/login_screen.jpg')} style={styles.backgroundImage}>
<View style={styles.dimOverlay} />
</Image>
);
}
}
class LoginScreen extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Background>
<LoginForm/>
</Background>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => LoginScreen);
I imagine there must be something fixed up with css properties, because otherwise its usually enough to display one property within enough to make the first one be seen above the second one.
try this instead:
import React, { Component } from 'react';
import { AppRegistry, Image, TextInput, StyleSheet, View } from 'react-native';
let styles = StyleSheet.create({
backgroundImage: {
top: -150,
left: -275
},
dimOverlay: {
flex: 1,
opacity: 0.5,
backgroundColor: 'grey',
},
loginForm: {
}
});
class LoginForm extends Component {
constructor(props) {
super(props);
}
render(){
return (
<View style={{flex:1, justifyContent:'center'}}>
<TextInput autoCorrect={false} defaultValue='asdf' style={{ height: 40, borderColor: 'black', borderWidth: 1}}/>
<TextInput autoCorrect={false} defaultValue='ghjk' style={{height: 40, borderColor: 'black', borderWidth: 1}}/>
</View>
)
}
}
class LoginScreen extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Image source={require('./img/login_screen.jpg')} >
<View style={styles.dimOverlay}>
<LoginForm/>
</View>
</Image>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => LoginScreen);