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'
Related
In my React Native app, I have a card with a bunch of buttons at the bottom of it -- see image below.
I want to leave the first two icons where they are, on the left but move the (X) button all the way to the right. How do I accomplish this?
Here's what I have right now which is not working:
<Card style={styles.listItem}>
<Card.Content>
<Paragraph>{item.description}</Paragraph>
</Card.Content>
<Card.Actions>
<Button><Icon name="checkcircleo" /> </Button>
<Button><Icon name="clockcircleo" /> </Button>
<Button style={{ alignItems: 'stretch' }}><Icon name="closecircle" /> </Button>
</Card.Actions>
</Card>
To align the last button to the right, add { marginLeft: 'auto' } style to it.
To align all buttons to the right, add { justifyContent: 'flex-end' } style to Card.Actions.
Try adding alignSelf: "flex-end" to the button style:
<Card style={styles.listItem}>
<Card.Content>
<Paragraph>{item.description}</Paragraph>
</Card.Content>
<Card.Actions>
<Button>
<Icon name="checkcircleo" />
</Button>
<Button>
<Icon name="clockcircleo" />
</Button>
<Button style={{ alignSelf: "flex-end" }}>
<Icon name="closecircle" />
</Button>
</Card.Actions>
</Card>
You can group the first two buttons by flex and flex direction:'row' and you can use the justifyContent:space-between on the group button and the cross button.
Here is an example of how it can be achieved. :
<Card.Actions>
<View style={{flexDirection:'row',justifyContent:'space-between'}} >
<View style={{flexDirection:'row'}}>
<Button>
<Icon name="checkcircleo" />
</Button>
<Button>
<Icon name="clockcircleo" />
</Button>
</View>
<View>
<Button style={{ alignSelf: "flex-end" }}>
<Icon name="closecircle" />
</Button>
</View>
</View>
</Card.Actions>
Here is the example of the expo snack : expo-snack
Do check out.
Feel free for doubts
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 have two buttons that look like this
This is the code
render = () => (
<Image
source={require('../../images/login.jpg')}
style={[AppStyles.containerCentered, AppStyles.container, styles.background]}
>
<Image
source={require('../../images/logo.png')}
style={[styles.logo]}
/>
<Spacer size={200} />
<View style={[AppStyles.row, AppStyles.paddingHorizontal]}>
<View style={[AppStyles.flex1]}>
<Button
title={'Login'}
icon={{ name: 'lock' }}
onPress={Actions.login}
/>
</View>
</View>
<Spacer size={10} />
<View style={[AppStyles.row, AppStyles.paddingHorizontal]}>
<View style={[AppStyles.flex1]}>
<Button
title={'Sign up'}
backgroundColor={'#FB6567'}
icon={{ name: 'face' }}
onPress={Actions.signUp}
/>
</View>
</View>
</Image>
)
I want the buttons to occupy one row and possibly share 40% - 40% of the space with the rest of the 20% going to the padding. How can i have them occupy one row?.
You'd need to define a container with flexDirection set to row and use justifyContent depending on where you want your padding:
render() {
return (
<View style={styles.container}>
<View style={styles.button} />
<View style={styles.button} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
},
button: {
backgroundColor: 'green',
width: '40%',
height: 40
}
});
Change space-between to space-around if you want the padding to be distributed to the sides too. (Demo)
How do we align a Text to be next to an Input in React Native? In the image below the Text is in the top left but the Picker seems to have padding or margin applied. I tried other solutions with flex but also ran into this problem
This works for me -
<View style={styles.Container}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<View style={{flex:.5}}>
<Text>Placeholder</Text>
</View>
<View style={{flex:.5}}>
<Picker>
<Picker.Item label="Java" value="java"/>
<Picker.Item label="JavaScript" value="js"/>
</Picker>
</View>
</View>
</View>
You can change the flex values according to your needs.
I have a similar problem with the picker. Give equal flex for both text and picker(eg: parent have flex: 1 and give flex: 0.5 to both text and picker ). Better to give height and width to the picker according to your screen size. I think you didn't give flexDirection(row) to that the parent View. And also give height and width for items to the picker.
Sample code for giving style to picker:
<Picker
style={styles.picker}
mode="dropdown"
itemStyle={styles.itemStyle}>
<Item label="1 Hr" value="1" />
<Item label="4 Hrs" value="4" />
<Item label="8 Hrs" value="8" />
<Item label="16 Hrs" value="16" />
<Item label="24 Hrs" value="24" />
</Picker>
Styles:
itemStyle: {
fontSize: 15,
height: 75,
color: 'black',
textAlign: 'center',
fontWeight: 'bold'
}
picker: {
width: 100
},
Its working for me.
Thanks.
<View style={styles.Container}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<View style={{flex:.5}}>
<Text>Placeholder</Text>
</View>
<View style={{flex:.5}}>
<Picker itemStyle={{textAlign:"left"}}>
<Picker.Item label="Java" value="java"/>
<Picker.Item label="JavaScript" value="js"/>
</Picker>
</View>
</View>
This worked for me.