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
Related
I know these kind of questions have in the stackoverflow before. But I cannot the find the correct solution for this problem.
Have any solution for put <FlatList/> inside of the <ScrollView></ScrollView> in react-native?
here is my code...
<ScrollView
onScroll={(e) => {
onScroll(e);
}}
stickyHeaderIndices={[1]}
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
style={{ width: '100%' }}
>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
</ScrollView>
Error gives as follow:
ERROR VirtualizedLists should never be nested inside plain
ScrollViews with the same orientation because it can break windowing
and other functionality - use another VirtualizedList-backed container
instead.
I found the solution for that. I put my <ScrollView></ScrollView> component codes inside of <FlatList> ListHeaderComponent props.
Here is how it looks. I'm pretty sure this should works for every-one
I found that solution from here. you can refer it and can understandable it very easily.
How to Fix 'VirtualizedLists should never be nested inside plain ScrollViews' Warning
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
data={data}
ListHeaderComponent={ //here I write ListHeaderComponent and put all code lines of `<ScrollView></ScrollView>` in here
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Image
source={require('../assets/Interview.png')}
width="100%"
height="0"
style={styles.logo2}
/>
</View>
}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
You can do this by,
<ScrollView>
<ScrollView horizontal={true}> // add this
<FlatList />
<ScrollView/>
<ScrollView>
this happens because inside the FlatList there is a ScrollView too, what you can do is wrap your FlatList in a View to separate the Scroll's
InnerWrapper is only another View
you can wrapper you FlatList like this:
<ScrollView
onScroll={(e) => {
onScroll(e);
}}
stickyHeaderIndices={[1]}
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
style={{ width: '100%' }}
>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<InnerWrapper>
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
</InnewWrapper>
)}
</View>
</ScrollView>
As you don't have any other element don't use ScrollView. Use this code as flatlist will itself scroll at its elements.
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
style={{flex:1}}
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
just add this property in Flatlist
scrollEnabled={false}
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 am not able to use the native base deck swiper every time I try to run the program using the code given in the official website of native base I get a blank white screen.My code is:-
<DeckSwiper
dataSource={cards}
renderItem={item =>
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={item.image} />
<Body>
<Text>{item.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image style={{ height: 300, flex: 1 }} source={item.image} />
</CardItem>
<CardItem>
<Icon name="heart" style={{ color: '#ED4A6A' }} />
<Text>{item.name}</Text>
</CardItem>
</Card>
}
/>
no error is displayed but the only thing I got is a white blank screen
Put your Deckswiper inside the view and give height to that view. it should work
<View style={{height:400}}>
<DeckSwiper
dataSource={cards}
renderItem={item =>
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={item.image} />
<Body>
<Text>{item.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image style={{ height: 300, flex: 1 }} source={item.image} />
</CardItem>
<CardItem>
<Icon name="heart" style={{ color: '#ED4A6A' }} />
<Text>{item.name}</Text>
</CardItem>
</Card>
}
/>
</View>
Whoever searching an answer about this issue remember that the example in native-base docs using internal resources for images. So if you're using external resources for your Image components (like an image url) please use
<Image style={{ height: 300, flex: 1 }} source={{uri:item.image}} />
instead. It's basic as hell but can be overlooked easily.
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>
I'm using Native-base components to create a card.
But, i find a problem in displaying icons with text. I want to display it like this :
But i get this result :
This is my code :
<Card style= {{ flex: 1 , width : width-30 , marginTop :10}}>
<CardItem cardBody>
<Image source= { require('./images/post-media/1.png') } style={{height: 200, width: null, flex: 1}}>
</Image>
</CardItem>
<CardItem style = {{backgroundColor: 'white'}}>
<Body>
<Text style= {styles.txt}>
this is my text blabla blabla blabla
</Text>
<View style={{ borderBottomWidth: 1, borderBottomColor: '#839fcc', width: width-70 }} />
</Body>
</CardItem>
<CardItem >
<Left>
<Button transparent>
<Icon name="time" style={styles.icon} />
<Text>2017.07.05 </Text>
</Button>
</Left>
<Body>
<Button transparent >
<Icon name="heart" style={styles.icon} />
<Text >325</Text>
</Button>
</Body>
<Right>
<Icon name="chatbubbles" style={styles.activeIcon} />
<Text>325</Text>
</Right>
</CardItem>
</Card>
For the style :
icon: {
color: '#839fcc'
},
activeIcon:{
color:'#0d5be9'
}
Any idea please ?
Your question is not clear,but from the screen shot i see that breakage is the problem.
Import these things from the below library(this answer works only if you use this library)
import { Col, Row, Grid } from 'react-native-easy-grid';
In you code use the Row tag and give proper flux to place the icon and text in proper manner.
<CardItem >
<Left>
<Row>
<Button transparent>
<View style={{flex: 1}}>
<View style={{flex: 2}}>
<Icon name="time" style={styles.icon} />
</View>
<View style={{flex: 2}}>
<Text>2017.07.05 </Text>
</View>
</View>
</Button>
</Row>
</Left>
</CardItem>
Above i have only edited the left tag , use flux or else it will break in different screen sizes.By properly altering the flux values you can arrange their position in suitable manner.