In the image given below where you can see the name and the email is not aligned middle of the view. So, I want to align them exactly middle of this vertical view-
I have also provided the code of this class in the below-
import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView} from 'react-navigation';
import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
class HomeDrawer extends Component {
constructor(props) {
super(props);
this.state= {loading:true};
}
async componentWillMount() {
await Font.loadAsync ({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
});
this.setState({loading:false});
}
render() {
if(this.state.loading) {
return(
<Root>
<AppLoading/>
</Root>
)
}
return(
<MyApp/>
)
}
}
const CustomDrawerContentComponent = (props) => (
<Container style={styles.Container}>
<Header style={styles.drawerHeader}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ios/50/000000/administrator-male-filled.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text>S. M. Asif Ul Haque</Text>
<Text>asif#abc.com</Text>
</View>
</Body>
</Header>
<Content>
<DrawerItems {...props}/>
</Content>
</Container>
);
const MyApp = DrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
}
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
);
const styles = StyleSheet.create({
Container:{
textAlign:'center'
},
drawerHeader:{
height:200,
textAlign:'center',
backgroundColor: 'white'
},
drawerHeaderText:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#5555'
},
drawerImage:{
height: 100,
width: 100,
borderRadius: 75
},
drawerBody: {
flexDirection:'row',
justifyContent:'space-between',
textAlign:'center',
backgroundColor:'#aaaa'
}
});
export default HomeDrawer;
So, What should I do to align them vertically middle of the header of the drawer?
Set alignItems:'center' in your drawerBody styling
Related
In my React-native project I am using one Drawer navigation. for this, I have created one class named HomeDrawer. Here's the code for that-
HomeDrawer.js
import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {
createAppContainer,
createStackNavigator,
createDrawerNavigator,
createSwitchNavigator
} from "react-navigation";
import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import LoginScreen from '../components/LoginScreen';
import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
import WelcomeScreen from "../WelcomeScreen";
let user_email ='', user_first_name='';
class HomeDrawer extends Component {
state = {
loading: true
}
static navigationOptions = {
headerLeft: null
}
componentDidMount() {
AsyncStorage.getItem("user_email").then(value => {
console.log(value);
// you will need to handle case when `#ProductTour:key` is not exists
user_email = value;
});
AsyncStorage.getItem("user_first_name").then(value => {
console.log(value);
// you will need to handle case when `#ProductTour:key` is not exists
user_first_name = value;
});
}
async componentWillMount() {
await Font.loadAsync ({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
});
this.setState({loading:false});
}
render() {
if(this.state.loading) {
return(
<Root>
<AppLoading/>
</Root>
)
}
return(
<MyApp/>
)
}
}
const CustomDrawerContentComponent = (props) => (
<View style={{backgroundColor:"#ffff", height:'100%'}}>
<ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150, resizeMode:'cover', backgroundColor:"#aaaa"}}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
<Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
</View>
</Body>
</ImageBackground>
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
</View>
);
const MyApp = createAppContainer(createDrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
},
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
));
export default HomeDrawer;
It was working perfectly with react-navigation version 1.0.0-beta.11. But after updating to version 3 it is showing the following error-
Can't find variable DrawerItem
If I remove the tag like below then , the code working but not showing any items as the items I include in DrawerItem.
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
neither the drawer toggle button is working now. But if I drag the screen from left to right it is showing like the below image-
Now, I want to show the drawer items back and remove the marked toolbar in the 2nd image.
So, it would be very nice if someone helps me to solve the problem with the given code
I will make my life easier (but not the easiest... :) by posting part of a working sample code that works with react-navigation 2.18.2.
Not sure if it will help you, but it will not do any harm...
You cannot use the code as is, of course, but maybe it will help you.
You can just ignore it, or even ask me to delete it, whatever you do is fine.
AppNavigator.js (rendered from App.js)
import React from 'react';
import { createDrawerNavigator } from 'react-navigation';
import WelcomeAuthNavigator from './WelcomeAuthNavigator';
import MainTabNavigator from './MainTabNavigator';
import MainDrawerNavigator from './MainDrawerNavigator';
import Drawer from '../screens/drawers/Drawer';
export default createDrawerNavigator({
WelcomeAuth: WelcomeAuthNavigator,
Drawer: MainDrawerNavigator,
Main: MainTabNavigator
}, {
initialRouteName: 'WelcomeAuth',
contentComponent: props => <Drawer {...props} />,
drawerWidth: 180
});
WelcomeAuthNavigator.js
import React from 'react';
import { createStackNavigator } from 'react-navigation';
import Welcome from '../screens/welcome/Welcome';
import LoginScreen from '../screens/auth/LoginScreen';
import SignupScreen from '../screens/auth/SignupScreen';
const AuthStack = createStackNavigator({
Login: { screen: LoginScreen },
Signup: { screen: SignupScreen }
}, {
headerMode: 'none',
initialRouteName: 'Login'
});
const WelcomeAuthNavigator = createStackNavigator({
Welcome: Welcome,
Auth: AuthStack
}, {
headerMode: 'none',
initialRouteName: 'Welcome',
contentComponent: props => <Drawer {...props} />
});
export default WelcomeAuthNavigator;
MainTabNavigator.js
ContactsStack and PhotosStack are defined using createStackNavigator
const MainTabNavigator = createBottomTabNavigator({
PhotosStack,
ContactsStack
}, {
headerMode: 'none',
headerStyle: { backgroundColor: '#4C3E54' },
headerLeft: <Text onPress={() =>
this.props.navigation.navigate('DrawerOpen')}>Menu</Text>,
title: 'Welcome!',
headerTintColor: 'white',
initialRouteName: 'PhotosStack'
});
export default MainTabNavigator;
MainDrawerNavigator.js
import { createStackNavigator } from 'react-navigation';
import Help from '../screens/drawers/Help';
import About from '../screens/drawers/About';
const MainDrawerNavigator = createStackNavigator({
Help: { screen: Help },
About: { screen: About }
}, {
initialRouteName: 'About'
});
export default MainDrawerNavigator;
Drawer.js
import React from "react";
import { SafeAreaView, View } from "react-native";
import { connect } from 'react-redux';
import { Container, Content, Text, List, ListItem, Left, Right,
Button, Icon, Body, Thumbnail } from "native-base";
const listItems = [
{ title: "Help", route: "Help", icon: "md-help" },
{ title: "About", route: "About", icon: "ios-information-circle-outline" }
];
class Drawer extends React.Component {
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Container>
<Content contentContainerStyle={{
justifyContent: 'flex-start', marginTop: 30
}}>
{this.renderUserPetDetails.bind(this)()}
<List
dataArray={listItems}
renderRow={data => {
return (
<ListItem onPress={() => this.props.navigation.navigate(data.route)} icon>
<Left>
<Button onPress={() => this.props.navigation.navigate(data.route)}
style={{ backgroundColor: "#888" }}>
<Icon active name={data.icon} />
</Button>
</Left>
<Body>
<Text
style={{ fontSize: 14, fontWeight: '600' }}>
{data.title}</Text>
</Body>
</ListItem>
);
}}
/>
</Content>
</Container>
</SafeAreaView>
);
}
}
You should try importing DrawerItems as shown below if you do not have react-navigation-drawer installed please added.
import { DrawerItems } from 'react-navigation-drawer';
You are trying to call DrawerItems without actually importing it hence the error. Make sure you add this line:
import { DrawerItems } from 'react-navigation';
I have a createMaterialTopTabNavigator and when I press to navigate on another screen, I would like hide the tabs and the header but display the current header ("Pronostics détails"). It's possible ?
The code of MontanteTab :
import React from 'react';
import {ScrollView, View, FlatList} from 'react-native';
import {ListItem} from "react-native-elements";
import pronostics from "../../data/Constants/Pronostics";
import {createAppContainer, createStackNavigator} from "react-navigation";
import PronosticsDetailsScreen from "../../screens/PronosticsDetailsScreen";
class MontanteTab extends React.Component {
render() {
return (
<View>
<ScrollView>
<View>
<FlatList
data={pronostics}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => (
<ListItem
key={item.id}
leftAvatar={{source: {uri: item.image}}}
title={item.competition}
subtitle={item.equipe_domicile + ' - ' + item.equipe_exterieur}
onPress={() => this.props.navigation.navigate('PronosticsDetails', {name: 'Jnae'})}
/>
)}
/>
</View>
</ScrollView>
</View>
);
}
}
const MontanteStack = createStackNavigator(
{
Montante: {
screen: MontanteTab,
navigationOptions: ({navigation}) => ({
header: null,
}),
},
PronosticsDetails: {
screen: PronosticsDetailsScreen,
navigationOptions: ({navigation}) => ({
headerMode: 'screen',
headerTitle: 'Pronostics détails',
headerStyle: {
backgroundColor: '#000000',
textAlign: 'center',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
color: '#c7943e',
textAlign: 'center',
alignSelf: 'center',
justifyContent: 'center',
flex: 1,
}
}),
},
},
{
initialRouteName: 'Montante',
}
);
export default createAppContainer(MontanteStack);
The code of PronosticsDetailsScreen :
import React from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import {Text} from "react-native-elements";
export default class PronosticsDetailsScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Détails</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
contentContainer: {
paddingTop: 30,
},
image: {
height: 100,
width: 100,
}
});
I tried to set the header to "null" but the current header is also hidden..
Thank you in advance for your help
Life would be easy if the API supported the ability to hide createMaterialTopTabNavigator()! But this option exists for bottom tabs, not top.
After doing research and test, I think it is possible to hide the tabs and header. It's a matter of playing with the nested navigation. (Inspired by: https://github.com/react-navigation/react-navigation/issues/1979 and Hide parent's navigation header from the nested navigator)
For example:
Pushing the back button on Screen 07 will go back to Screen 06.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation';
import Screen01 from './screens/Screen01';
import Screen02 from './screens/Screen02';
import Screen03 from './screens/Screen03';
import Screen04 from './screens/Screen04';
import Screen05 from './screens/Screen05';
import Screen06 from './screens/Screen06';
import Screen07 from './screens/Screen07';
const AppStackNavigator = createStackNavigator({
home: {
screen: Screen01
},
flowOne: {
screen: createStackNavigator({
page02: {
screen: Screen02 },
page03: {
screen: Screen03 },
flowTwo: {
screen: createBottomTabNavigator({
page04: {
screen: Screen04
},
flowThree: {
screen: createMaterialTopTabNavigator({
page05: {
screen: Screen05
},
page06: {
screen: Screen06
},
})
}
}) // end createBottomTabNavigator, end flowThree
},
flowFour: createStackNavigator({
page07: {screen: Screen07}
}
) // end flowFour
},
{
navigationOptions: {header: null} // hides header in flowOne
})
},
});
const AppContainer = createAppContainer(AppStackNavigator);
export default class App extends React.Component {
render() {
return (
<AppContainer />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I've got Expo demo here: https://exp.host/#project8888/NavigationDemo
I'm trying to implement navigation into my practice app:
onPress will cause a move from HomeScreen to ListingReview.
I'm not sure what's going wrong to be honest, though I have suspect I'm not passing props correctly.
Please help!
This is my repo: https://github.com/rphly/practice
(Each object is created in a separate .js file in src/components.)
Index.js
import React, { Component } from 'react';
import { AppRegistry, ScrollView } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Header from './src/components/Header';
import Card from './src/components/Card';
import ListingsFeed from './src/components/ListingsFeed';
import ListingReview from './ListingReview';
class HomeScreen extends Component {
render() {
return (
<ScrollView>
<Header />
<ListingsFeed />
</ScrollView>
);
}
}
export const App = StackNavigator({
Home: { screen: HomeScreen, navigationOptions: {header: null} },
ListingReview: { screen: ListingReview },
});
AppRegistry.registerComponent('hackathon', () => App);
ListingDetails.js (where I'm implementing onPress)
import React from 'react';
import { View, Text, Image, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Card from './Card';
import CardSection from './CardSection';
const ListingDetails = (props) => {
return (
<Card>
<CardSection>
<View style={styles.titleContainerStyle}>
<Text style={styles.titleContentStyle}>{props.listing.title}</Text>
</View>
<View style={styles.thumbnailContainerStyle}>
<Image style={styles.thumbnailStyle} source={{uri: props.listing.primary_photo_url}}/>
</View>
<View style={styles.headerContentStyle}>
<Text style={{marginBottom: 5}} numberOfLines={15}>{props.listing.description.trim()}</Text>
<Text style={styles.priceContentStyle}>${props.listing.price}</Text>
</View>
<Button
onPress={() => navigation.navigate('ListingReview')}
title= "Mark Listing"
color = "#D2232A"
/>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
//backgroundColor: '#D2D2D2D2',
justifyContent:'center',
alignItems: 'center',
marginLeft: 10
},
titleContainerStyle: {
marginLeft: 10,
marginBottom: 2,
marginTop: 2
},
titleContentStyle: {
fontSize: 15,
fontWeight: 'bold'
},
thumbnailStyle: {
height: 180,
width: 180
},
thumbnailContainerStyle: {
flexDirection: 'row',
justifyContent: 'center',
padding: 2,
marginLeft: 5,
marginRight: 5,
marginTop: 5,
marginBottom: 5
//alignItems: 'flex-start'
},
priceContentStyle: {
fontSize: 15,
color: 'green'
}
};
export default ListingDetails;
ListingFeed.js (where I connect ListingDetails and Index)
import React, { Component } from 'react';
import axios from 'axios';
import { View } from 'react-native';
import ListingDetails from './ListingDetails'
class ListingsFeed extends Component {
state = { listings:[] };
componentWillMount() {
axios.get('example.com/i-removed-the-url')
.then( response => this.setState({ listings:response.data.data.products}));
// this.setState({ listings:response.data.data.products})
}
renderListings() {
return this.state.listings.map(listing =>
<ListingDetails key={listing.id} listing={listing}/>
);
}
render() {
console.log(this.state);
return (
<View>
{this.renderListings()}
</View>
);
}
}
export default ListingsFeed;
You have to pass the navigation props from your HomeScreen to your ListingsFeed component like <ListingsFeed navigation={this.props.navigation}/>. And then, to pass this same props to your ListingDetails : <ListingDetails key={listing.id} listing={listing} navigation={this.props.navigation}/>
In your ListingDetails component you call the navigation.navigate('ListingReview') function, but the navigation is defined nowhere in your component. You have to call props.navigation.navigate('ListingReview') instead (from props) or get a navigation const from props : const {navigation} = props;
ListingDetails.js and ListingsFeed.js not in the stack.
export const App = StackNavigator({
Home: { screen: HomeScreen, navigationOptions: {header: null} },
ListingReview: { screen: ListingReview },
ListingDetails: { screen: ListingDetails },
ListingsFeed:{screen:ListingsFeed}
});
Strange error is appearing while developing one of my React Native project.
enter image description here
Following is the code I am using;
import React, {Component} from 'react';
import {Text, View, Image, StyleSheet} from 'react-native';
import {Content, Container} from 'native-base';
import {Carousel} from 'react-native-looped-carousel';
export default class AppBody extends Component {
render() {
return (
<Container>
<Content>
<Carousel delay={500}>
<View style={[{
backgroundColor: '#BADA55'
}
]}/>
<View style={[{
backgroundColor: 'red'
}
]}/>
<View style={[{
backgroundColor: 'blue'
}
]}/>
</Carousel>
</Content>
</Container>
);
}
}
module.export = AppBody;
Your import from react-native-looped-carousel is incorrect:
import Carousel from 'react-native-looped-carousel'
After fixing that, the carousel won't work. Because you should provide dimensions for it:
import React, { Component } from 'react'
import { Text, View, Image, StyleSheet, Dimensions } from 'react-native'
import { Content, Container } from 'native-base'
import Carousel from 'react-native-looped-carousel'
const {width, height} = Dimensions.get('window')
export default class AppBody extends Component {
constructor(props) {
super(props)
this.state = {
size: {width, height},
}
}
render() {
return (
<Container>
<Content>
<Carousel
delay={2000}
style={this.state.size}
autoplay
pageInfo
onAnimateNextPage={(p) => console.log(p)}
>
<View style={[{backgroundColor: '#BADA55'}, this.state.size]}><Text>1</Text></View>
<View style={[{backgroundColor: 'red'}, this.state.size]}><Text>2</Text></View>
<View style={[{backgroundColor: 'blue'}, this.state.size]}><Text>3</Text></View>
</Carousel>
</Content>
</Container>
)
}
}
module.export = AppBody
So My app is pretty basic:
import React, { Component } from 'react';
import Landing from './App/pages/landing.js';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
NavigatorIOS
} from 'react-native';
class twitterQue extends Component {
_enter() {
console.log('Hey Girl');
}
render() {
return (
<NavigatorIOS
initialRoute={{
component: Landing,
title: 'Welcome!',
passProps: {},
}}
/>
);
}
}
AppRegistry.registerComponent('twitterQue', () => twitterQue);
I then have a landing component:
import React, { Component } from 'react';
import Button from '../components/button/buttons.js';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
class Landing extends Component {
_enter() {
console.log('Hey Girl');
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Twitter Que
</Text>
<Button type={"primary"} buttonWidth={240} onPress={() => this._enter()}>Que Up Some Tweets!</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('Landing', () => Landing);
module.exports = Landing;
Nothing to funky. Nothing renders out to the page and there are no errors. The app loads and I see "Welcome!" As the title but the (Landing) component doesn't show. Am I missing something?
If I move every thing from Landing render into index.js render it works. Am I misunderstanding the docs?
Try adding style={{flex:1}} to NavigatorIOS:
<NavigatorIOS
style={{flex:1}}
initialRoute={{
component: Landing,
title: 'Welcome!',
passProps: {},
}}
/>
NavigatorIOS has no default styling out of the box. So basically there is no default width or height specified. This means that if you do not specify a width and a height, or a flex value, then it will not show up in your view.