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> ?
Related
I am tryin g to make the buttons login and register have top spacing from the logo above them but no css attributes work so far
I tried padding top/margin top and top but all don't work and margin left doesn't work also
here's the expo snack link:
https://snack.expo.io/#mai95/intelligent-tortillas
<Button title="Login" style={{top:300}} onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText}>LOG IN</Text>
</Button>
<Button title="Register"style={{top:300,marginLeft:50}} onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText2}>Register</Text>
</Button>
any idea what's wrong?
The styles prop is not available on the <Button /> component. You should consider wrapping the buttons in a div like so:
<View style={{ flexDirection: 'row', marginTop: 100 }}>
<View style={{ marginHorizontal: 25 }}>
<Button title="Login" onPress={() => navigation.navigate('Details')}>
<Text style={styles.loginText}>LOG IN</Text>
</Button>
</View>
<View style={{ marginHorizontal: 25 }}>
<Button
title="Register"
onPress={() => navigation.navigate('Details')}>
<Text style={styles.loginText2}>Register</Text>
</Button>
</View>
</View>
MarginTop should be in a container <View/>
Here is the snippet working with marginTop:
<View style={{flexDirection:'row', marginTop: 30}}>
<Button title="Login" onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText}>LOG IN</Text>
</Button>
<Button title="Register" onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText2}>Register</Text>
</Button>
</View>
I wanted to add space between button but it's not working below is my code. What do I need to add in my code?
render(){
return (
<View>
<Text>Home</Text>
<Button style={styles.button}
title='Add '
/>
<Button style={styles.button}
title='Search/Update'
/>
</View>
)
}
}
const styles = StyleSheet.create({
button: {
marginBottom: 20,
padding: 30
},
})
Easiest way is to add a spacing view between your two buttons:
<View>
<Text>Home</Text>
<Button style={styles.button} title='Add' />
<View style={styles.space} /> // <------------------------- right here
<Button style={styles.button} title='Search/Update' />
</View>
const styles = StyleSheet.create({
button: {
marginBottom: 20,
padding: 30
},
space: {
width: 20, // or whatever size you need
height: 20,
},
})
Or you could use like this:
<View>
<View style={{ flex: 1, marginBottom: 10 }}>
<Button title="Add" />
</View>
<View style={{ flex: 1 }}>
<Button title="Search/Update" />
</View>
</View>
You can apply this styling to View component in order to get space between two buttons.
Also import Dimensions from react-native and adjust the width of View according to your need.
import { Dimensions } from 'react-native';
<View style={{
width:Dimensions.get("window").width * 0.5,
display:"flex",
justifyContent:"space-evenly",
alignItems: "center"
}}>
<Text>Home</Text>
<Button
style={styles.button}
title='Add '
/>
<Button
style={styles.button}
title='Search/Update'
/>
</View>
The code <View style={{marginVertical: 10}} You have to use here.
The Button should come inside View Tag
You can use the below code to add space between button
<View style={{marginVertical: 10}}>
<Button title="Button 1" />
</View>
<View style={{marginVertical: 10}}>
<Button title="Button 2" />
</View>
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.
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