I’m using react native base. I want to centre align the title in iOS and android both, since text is long it hides it with “…”.
I've tried different option unable to fix it. How can I fix it?
Code:
<Header iosStatusbar="light-content" androidStatusBarColor='#000' >
<Left>
<Button transparent onPress={() => this.navigateCustom("goBack")}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>CLAP TO SUPPORT US</Title>
</Body>
<Right>
<Button transparent onPress={()=> this.navigateCustom("DrawerOpen") }>
<IconEvil name={"menu"} style={{ color: "rgb(255,255,255)", fontSize:30}}/>
</Button>
</Right>
</Header>
EDIT:
When I apply flex:1 to left right and body it changes nothing but applying flex:4 to body shows the title but it’s not centred
<Header iosStatusbar="light-content" androidStatusBarColor='#000' >
<Left style={{flex:1}}>
<Button transparent onPress={() => this.navigateCustom("goBack")}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body style={{flex:4}}>
<Title>CLAP TO SUPPORT US</Title>
</Body>
<Right style={{flex:1}}>
<Button transparent onPress={()=> this.navigateCustom("DrawerOpen") }>
<IconEvil name={"menu"} style={{ color: "rgb(255,255,255)", fontSize:30}}/>
</Button>
</Right>
</Header>
Result:
Applying center alignment:
This is what i have tested on my device ios simulator, and Samsung Galaxy S7Edge and emulator.
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class App extends Component {
render() {
return (
<Container>
<Header>
<Left style={{ flex: 1 }}>
<Button transparent>
<Icon name='arrow-back' />
</Button>
</Left>
<Body style={{ flex: 4, justifyContent: 'center', alignItems: 'center' }}>
<Title>Title Center</Title>
</Body>
<Right style={{ flex: 1 }}>
<Button transparent>
<Icon name='menu' />
</Button>
</Right>
</Header>
</Container>
);
}
}
This is what i have tested and result.
I recommend you to check your React-Native package version and compare.
Here my last version:
"native-base": "^2.3.6",
"react": "16.2.0",
"react-native": "0.52.0",
EDIT:
CODE:
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class App extends Component {
render() {
return (
<Container>
<Header>
<Left style={{ flex: 1 }}>
<Button transparent>
<Icon name='arrow-back' />
</Button>
</Left>
<Body style={{ flex: 4, justifyContent: 'center', alignItems: 'center' }}>
<Title>Title Center</Title>
</Body>
<Right style={{ flex: 1 }}>
<Button transparent>
<Icon name='menu' />
</Button>
</Right>
</Header>
</Container>
);
}
}
NEXUS S RESULT
React Native (NativeBase) follows Android and iOS guidelines,
The title is on the Left of the header for Android and Center for iOS.
If you want it to be in the center, Please apply:
flex: 1 to <Left>, <Body> and <Right>
Example:
<Left style={{ flex: 1 }}>
</Left>
<Body style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Title>Home</Title>
</Body>
<Right style={{ flex: 1 }}>
</Right>
Related
I started using React native and React native Elements. I'm trying to have buttons one under another with some space between buttons and left and right side.
<View style={styles.container}>
<ThemeProvider>
<Button
buttonStyle={styles.btnStyle}
icon={
<Icon
name="arrow-right"
size={15}
color="white"
/>
}
title="My BTN 1"
/>
<Button
buttonStyle={styles.btnStyle}
icon={
<Icon
name="arrow-right"
size={15}
color="white"
/>
}
title="My BTN 2"
/>
<Button
buttonStyle={styles.btnStyle}
icon={
<Icon
name="arrow-right"
size={15}
color="white"
/>
}
title="My BTN 3"
/>
</ThemeProvider>
</View>
And the styles:
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
btnStyle: {
marginBottom: 5,
width: '90%'
}
});
It is displaying one beside another and not respecting the size of the mobile device.
Thanks
You need to remove this one from your stylesheet
flexDirection: 'row'
Or, simply change it into
flexDirection: 'column'
I have 4 tabs load using tabnavigator. I have home, favourite, cart and profile screen. User will choose desired product on home, add it to cart. The badge count on tab is updating, but when I'm go to cart screen, it is still plain empty.
I'm running on development. So if I refresh my script on VSCode, the product will be show on cart screen.
This is my cart script:-
renderProductList() {
var contents = appGlobal.ObjProduct.map((item) => {
return (
<Content key={item.ProdID}>
<TouchableOpacity onPress={() => {
console.log('Touch item: ' + JSON.stringify(item));
}}>
<Card>
<CardItem>
<Left>
<FastImage
source={{ uri: item.ProdImage, priority: FastImage.priority.normal, }}
style={{
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
}}
resizeMode={FastImage.resizeMode.cover}
/>
</Left>
<Body>
<Text>{item.ProdName}</Text>
</Body>
<Right>
</Right>
</CardItem>
</Card>
</TouchableOpacity>
</Content>
);
});
return (
<Content padder>
{contents}
</Content>
)
}
renderNoProduct() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
<SvgUri width="150" height="150" source={EmptyCart} />
<Text style={{ color: 'gray', marginTop: 10 }}>Your cart is empty :(</Text>
</View>
)
}
render() {
return (
<Container>
<Header searchBar rounded>
<Left style={{ flex: null }}>
</Left>
<Body style={{ flex: 3 }}>
<Title style={{ marginLeft: 10, }}>Shopping Cart</Title>
</Body>
<Right style={{ flex: null }}>
</Right>
</Header>
{appGlobal.ObjProduct.length > 0 ? this.renderProductList() : this.renderNoProduct()}
<Footer>
<FooterTab>
<Button style={{ backgroundColor: '#d15f02' }}>
<Text style={{ color: 'white' }}>Proceed to order</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
It is another way to make it global mapping or product change when using tab navigator?
You need to call a function when the focused screen changes on TabNavigation
on your Cart tab use this:
import { withNavigationFocus } from 'react-navigation';
class CartScreen extends React.Component {
componentDidUpdate(prevProps) {
if (prevProps.isFocused !== this.props.isFocused) {
// Call any action to update you view
//fetch data when the component is focused
//To prevent extra component re-renders, you may need to write some logic in shouldComponentUpdate
}
}
render() {
return (
<Container>
<Text>{this.props.isFocused ? 'Focused' : 'Not focused'}</Text>
</Container>
);
}
}
// withNavigationFocus returns a component that wraps CartScreen and passes
// in the navigation prop
export default withNavigationFocus(CartScreen);
withNavigationFocus
withNavigationFocus is a higher-order component which passes the isFocused prop into a wrapped component. It's useful if you need to use the focus state in the render function of your screen component or another component rendered somewhere inside of a screen.
I'm trying to create a page that where I can edit the 'tenant' data.
Here is my page:
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import {
Container, Header, Content, Card,
CardItem, Text, Icon, Right,
Left, Body, Title, Button }
from 'native-base';
import { Avatar } from 'react-native-elements';
import NavigationService from '../NavigationService';
class TenantDetails extends Component {
render() {
const { navigation } = this.props;
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => NavigationService.navigate('Tenants')}
>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>My Name</Title>
</Body>
<Right />
</Header>
<Content>
<View style={styles.userRow}>
<View style={styles.userImage}>
<Avatar
rounded
size="large"
source={{
uri: 'https://myirent.com/rent/appImg/person-icon.png',
}}
/>
</View>
<View>
<Text style={{ fontSize: 16 }}>Jonh Test</Text>
<Text
style={{
color: 'gray',
fontSize: 16,
}}
>
joinh#gmail.com{'\n'}xxx-xxx-xxxx
</Text>
</View>
</View>
<Card>
<View style={styles.containerTextHeader}>
<Text style={styles.infoTextHeader}>Tenant Details</Text>
</View>
<CardItem>
<Icon active name="logo-googleplus" />
<Text>First Name</Text>
<Right>
<Icon name="arrow-forward" />
</Right>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
scroll: {
backgroundColor: 'white',
},
userRow: {
alignItems: 'center',
flexDirection: 'row',
paddingBottom: 8,
paddingLeft: 15,
paddingRight: 15,
paddingTop: 6,
},
userImage: {
marginRight: 12,
},
listItemContainer: {
height: 55,
borderWidth: 0.5,
borderColor: '#ECECEC',
},
containerTextHeader: {
paddingTop: 20,
paddingBottom: 12,
backgroundColor: '#F4F5F4',
},
infoTextHeader: {
fontSize: 16,
marginLeft: 20,
color: 'gray',
fontWeight: '500',
},
});
export default TenantDetails;
Thanks. I 'm having issue with the right arrow not align to the right (image below). Also, how can I change the to have a label and value (Where I have First Name)? So when I click on it, I can open. modal to edit the value
Screen:
here is part of your code. i add Left tag:
<Card>
<View style={styles.containerTextHeader}>
<Text style={styles.infoTextHeader}>Tenant Details</Text>
</View>
<CardItem>
<Left>
<Icon active name="logo-googleplus" />
<Text>First Name</Text>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</CardItem>
</Card>
for modal problem, you can install react-native-modal by npm install --save react-native-modal.
wrap a button around CardItem that you need to onPress it. then call on onPress, a method that it changes your state of visibility for modal.
something such as this code:
<Modal
style={{ margin: 0 }}
isVisible={this.state.modalVisible}
/>
for changing of your field such as name, etc, use state of component
I want the buttons to be at the center of screen. I know the View is not stretched, but how to solve?
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name="menu"/>
</Button>
</Left>
</Header>
<Content>
<View style={{ flex:1, justifyContent: "center", alignItems: "center"}}>
<Button block info style={{margin: 10}}>
<Text>AAAA</Text>
</Button>
<Button block info style={{margin: 10}}>
<Text>BBBB</Text>
</Button>
</View>
</Content>
<Footer/>
</Container>
);
try this
render(){
return(
<View style={{ flex:1,
justifyContent: 'center',
alignItems: 'center'}}>
<Button
color="#4682b4"
title="Click me"
onPress={() => Alert.alert('Clicked')}/>
</View>
);
}
Why are you taking <Container> and <Content> ?
I'm using native-base to create a React Native app:
I'm using the Header Component to display Body, Left and Right elements. According to the docs, the title should automatically center but it does not (as seen below).
Am I missing something simple here? Any help would be appreciated!
import {
Container,
Header,
Content,
Left,
Right,
Body,
Title,
Icon
} from "native-base"
export default class Seminars extends React.Component{
render(){
return(
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Icon name='arrow-back' />
</Left>
<Body>
<Title>Seminars</Title>
</Body>
<Right>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
)
}
}
const styles = StyleSheet.create({
container: {
},
header: {
paddingRight: 15,
paddingLeft: 15
},
content: {
display: "flex",
flex: 1,
justifyContent: "center",
padding: 15
}
});
If you want the title to be in the center, you can add flex:1 in Left, Body and Right like this :
return(
<Container style={styles.container}>
<Header style={styles.header}>
<Left style={{flex:1}}>
<Icon name='arrow-back' />
</Left>
<Body style={{flex:1}}>
<Title>Seminars</Title>
</Body>
<Right style={{flex:1}}>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
)
And this is the result :
I hope this answer can help you :)
This answer can help you, worked for me.
<Header style={{backgroundColor:'#ff2929'}}>
<Left style={{flex: 1}}>
<Button transparent style={{width: 65}}>
<Icon style={{color:"#fff"}} type="MaterialIcons" name={this.props.imageLeft}/>
</Button>
</Left>
<Body style={{flex: 3,justifyContent: 'center'}}>
<Title style={{color: '#fff',alignSelf:'center'}}>{this.props.headerTitle}</Title>
</Body>
<Right style={{flex: 1}}>
<Button transparent style={{width: 65}}>
<Icon style={{color:this.props.color}} type="MaterialIcons" name={this.props.imageRight}/>
</Button>
</Right>
</Header>
You can also try this one:
<Header>
<Left style={{ flex: 1 }}>
<Icon name="arrow-back" />
</Left>
<Body style={{ flex: 1 }}>
<Title style={{ alignSelf: "center" }}>Seminars</Title>
</Body>
<Right style={{ flex: 1 }}>
<Icon name="menu" />
</Right>
</Header>
I find the best way to do this and its Work for me.
<Header transparent>
<Left style={{ flex: 1 }}>
<Icon name='arrow-back' />
</Left>
<Body style={{ flex: 1 }}>
<Title style={{ justifyContent: 'center', color: '#9fabdd' }}>Home</Title>
</Body>
<Right style={{ flex: 1 }}>
<Icon name='arrow-back' />
</Right>
</Header>
<Header>
<Left style={{flex: 1}} />
<Body style={{flex: 1}}>
<Title style={{alignSelf: 'center'}}>Header</Title>
</Body>
<Right style={{flex: 1}} />
</Header>
static navigationOptions = ({ navigation }) => {
return {
headerTitle: (
<Image style={{width: 50, height: 10}} alignItems='center' source={require('../assets/zazzy.png')} />
</View>
),
headerLeft: (
<View style={{ padding: 10 }}>
<Ionicons name="ios-apps" color='gold' size={24} onPress={() => navigation.navigate('DrawerOpen')} />
</View>
),
headerRight: (
<View style={{ padding: 10 }}>
<Ionicons name="md-search" color='silver' size={24} onPress={() => navigation.navigate('DrawerOpen')} />
</View>
)
}
}
render() {
return (
<HomeScreenTabNavigator screenProps={{ navigation: this.props.navigation }} />
)
}
}
<Container style={styles.container}>
<Header style={styles.header}>
<Left style={{flex:1}}>
<Icon name='arrow-back' />
</Left>
<Body style={{flex:1}>
<Title style={{width:'100%'}}>Seminars</Title>
</Body>
<Right style={{flex:1}}>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
I found this as a solution when the left and right items are of unequal sizes, works for both android and iOS