For the life of me, I can't center the headerTitle component. Ideas?
class GroupSelectionScreen extends React.Component{
static navigationOptions = ({navigation}) => {
return {
headerLeft: <View>
<Image source={logoImg} style={{width:72, height:33, marginLeft:5}}/>
</View>,
headerStyle: {
backgroundColor: theme.colors.darkBlue,
height: 75,
},
headerTitle: <View style={{
alignItems: "center",
flexDirection: 'row',
}}>
<View style={{backgroundColor: statusColor, width: 15, height: 15, borderRadius: 8}}></View>
<Text style={{color: 'white', fontSize: 25}}>{username}</Text>
</View>,
headerRight: <SetStatusButton onPress={navigation.getParam('toggleSetStatus')}/>,
};
};
Because you are using flexDirection:'row' you will probably want to add the property justifyContent:'center' to center the content of the view horizontally
This is due to the fact that justifyContent works on the primary axis and alignItems work on the secondary axis. Setting the flexDirection as row changes the primary axis to be row.
Adding flexDirection to a component's style determines the primary axis of its layout.
Adding justifyContent to a component's style determines the distribution of children along the primary axis.
You can see more in the docs
https://facebook.github.io/react-native/docs/flexbox
Here is a snack https://snack.expo.io/#andypandy/flexdirection
Each of the three views have flexDirection: 'row'
The first view has justifyContent: 'center' and the text is centred horizontally.
The second view has alignItems: 'center' and the text is centred vertically.
The third view has both justifyContent: 'center' and alignItems: 'center' and the text is centred horizontally and vertically
Here is an image of what it looks like
And here is the code
<View>
<View style={{flexDirection: 'row', justifyContent: 'center', backgroundColor: 'yellow', height: 100, width: 100, margin: 10}} >
<Text>Hello</Text>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', backgroundColor: 'cyan', height: 100, width: 100, margin: 10}} >
<Text>Hello</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems:'center', backgroundColor: 'forestgreen', height: 100, width: 100, margin: 10}} >
<Text>Hello</Text>
</View>
</View>
Update
In react-navigation there appears to be a difference between how headerTitle given by the question poster is handled in Android and iOS.
In iOS the headerTitle centres vertically and horizontally, however in Android it centres only vertically and is aligned left. Obviously this is not ideal.
There is a way to make it work in both iOS and Android, simply
Wrap the original header in a View with flex:1
Make sure the original header's View has a style with justifyContent: 'center' and alignItems: 'center'
Here is the code for the new headerTitle
<View style={{flex: 1}}>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<View style={{backgroundColor: 'green', width: 15, height: 15, borderRadius: 8}}/>
<Text>Spencer</Text>
</View>
</View>
Here is a snack showing it working https://snack.expo.io/#andypandy/navigation-header
Related
I am trying to make the corners of the bottom sheet provided by the react-native-bottom-sheet rounded by passing the style prop to it. But the rounded corners are being overlapped by something which I don't know. How do I make the the corners rounded?
Screenshot:
Code:
<BottomSheet
style={{
flex: 1,
borderWidth: 5,
borderColor: "red",
backgroundColor: "blue",
borderRadius: 50
}}
index={1}
ref={bottomSheetRef}
snapPoints={snapPoints}
onChange={handleSheetChange}
>
<View
style={{
backgroundColor: "lightgreen",
marginTop: 30,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}
>
<View style={{ backgroundColor: "white" }}>
<Text>
I am back
</Text>
</View>
</View>
</BottomSheet>
This BottomSheet component is wrapped inside a View with flex: 1
Just added overflow: hidden to the BottomSheet's style prop and it worked.
I ran into the same problem but found another solution because I was using a Handler that was outside the BottomSheet so adding overflow: 'hidden' just hid my Handler.
Reading the code I realized that the style prop that is passed to BottomSheet is added to the code as containerStyle here, but the component in charge of defining the rounded corners is actually the BackgroundComponent which has the border radius in its styles.
So, in order to get a BottomSheet with a custom corner radius is better to add a separate backgroundComponent with all the modifications we want.
Like this:
function customBackground({ pointerEvents, style }) {
return (
<View
pointerEvents={pointerEvents}
style={[styles.bgContainer, style]}
/>
);
}
function renderSheet(){
return(
<BottomSheet
index={1}
ref={bottomSheetRef}
snapPoints={snapPoints}
onChange={handleSheetChange}
backgroundComponent={customBackground}
>
<View
style={{
backgroundColor: "lightgreen",
marginTop: 30,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}
>
<View style={{ backgroundColor: "white" }}>
<Text>
I am back
</Text>
</View>
</View>
</BottomSheet>
;)
}
const styles = StyleSheet.create({
bgContainer: {
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
backgroundColor: "blue"
},
})
<View>
<Text>Hello</Text>
<Image source={require('./Vector.png')} />
</View>
I have the above View. I want to vertically and horizontally align image and text. Image should be on the right and text left in the same row. But I am not able to do align them correctly.
You can check here live dmeo here expo-snack:
Also the code is pretty ismple :
import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hey</Text>
<Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
backgroundColor: '#ecf0f1',
padding: 8,
flexDirection:'row',
alignItems:'center'
}
});
hope it helps. feel free for doubts , and if you want the text and image to be not so distant you can have justifyContent: 'center',
For horizontal:
flexDirection: 'row',
For vertical:
flexDirection: 'column',
Use flexDirection: 'row' to make it in the same row & use justifyContent: 'center', alignItems: 'center' to align it vertically & horizontally.
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello</Text>
<Image style={{ width: 50, height: 50 }} source={require('./Vector.png')} />
</View>
You can simply do it by using flexDirection
Example :
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<Text>Hello</Text>
<Image
style={{ width: 30, height: 30, resizeMode: "contain" }}
source={require("./Vector.png")}
/>
</View>
If you want to make the image right corner on the screen and text on the left corner try this. It can be done using position
<View
style={{
flex: 1,
flexDirection: "row"
}}
>
<Text style={{ position: "absolute", right: 0 }}>Hello</Text>
<Image
style={{
width: 30,
height: 30,
resizeMode: "contain",
position: "absolute",
left: 0
}}
source={require("./Vector.png")}
/>
</View>
I want to achieve the following:
I want to display a label next to a centered value.
As far as I can see that's not possible with flexbox, right?
How could I achieve that?
Additionally I'd like to have the base-aligned, but currently this option is not working on Android. Therefore I'm using hardcoded paddings for the smaller text boxes. Any other Idea for that?
Another suggestion, if you don't want to use empty Views, is to position Value to the center, and then have the unit positioned absolute (so it goes off the flex) and to the bottom so you ensure it's base-aligned to Value.
<View style={styles.container}>
<Text style={styles.value}>
Value
<Text style={styles.unit}>unit</Text>
</Text>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'lightgrey',
},
value: {
backgroundColor: '#eee',
textAlign: 'center',
fontSize: 20,
position: 'relative',
},
unit: {
fontSize: 12,
position: 'absolute',
bottom: 0,
},
});
You can use use 3 flex boxes placed horizontally to get a similar effect. Leave the left box blank.
(Ive added background colors for reference)
<View style={styles.container}>
<View
style={{
flexDirection: 'row',
}}>
<View style={{ flex: 1}} /> {/* blank view */}
<View
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
}}>
<Text style={{ fontSize: 30 }}>Value</Text>
</View>
<View
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'fllex-start',
}}>
<Text style={{ fontSize: 12 }}>Unit</Text>
</View>
</View>
</View>
I'm trying to have my two buttons sit in a row, equally spaced, and I want them of equal height and width. But they look like this at the moment.
I'm very new to React Native so please go gently!
Here's my code for what's returned.
return (
<View style={styles.screen}>
<View style={styles.horseProfile}>
<HorseProfile />
</View>
<View style={styles.vitalSignsGrid}>
<LargeVitalSigns />
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={this._alertHandler}>
<View style={styles.buttonStyling}>
<Text style={styles.buttonText}>ECG</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this._alertHandler}>
<View style={styles.buttonStyling}>
<Text style={styles.buttonText}>Resp Pattern</Text>
</View>
</TouchableOpacity>
</View>
<View>{/* timer and stop button */}</View>
</View>
)
Here are my styles.
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
horsePatientProfile: {
flex: 1
},
vitalSignsGrid: {
flex: 3,
backgroundColor: '#14172B'
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'green',
width: '100%',
flex: 4
},
buttonStyling: {
backgroundColor: '#2B4250',
borderRadius: 30,
alignItems: 'center',
justifyContent: 'space-around',
width: '50%',
height: '35%',
flexDirection: 'row',
},
buttonText: {
color: '#84C5C6',
fontWeight: 'bold'
}
})
Can anyone help please? Thank you.
the width of your buttons styles.buttonStyling is 50% which is 50% of the parent Component, the parent is the touchableOpacity, since it doesn't have a set width itself it will stretch with the content, in other words the 50% does not mean the same thing, you should give an exact (relative size, I like react-native-size-matter) to the touchable opacity and justifyContent as space between to space evenly
For height, width try using React Native Dimensions React Native Dimentions
Import it:
import {Dimensions} from "react-native";
var {height, width} = Dimensions.get('window');
Example using in style:
buttonStyling: {
backgroundColor: '#2B4250',
borderRadius: 30,
alignItems: 'center',
justifyContent: 'space-around',
width: width/2,
height: height / 3.5,
flexDirection: 'row',
},
or use Flexbox
In react native I have:
<View style={styles.navBar}>
<Text>{'<'}</Text>
<Text style={styles.navBarTitle}>
Fitness & Nutrition Tracking
</Text>
<Image source={icon} style={styles.icon}/>
</View>
with these styles:
{
navBar: {
height: 60,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
navBarTitle: {
textAlign: 'center',
},
icon: {
height: 60,
resizeMode: 'contain',
},
}
This is the effect I get:
This is the effect I want:
In the first example, the spacing between items is equal.
In the second example, each item is justified differently. The first item is left-justified. The second item is center-justified. The third, right-justified.
This question is similar, but it looks like react native does not support margin: 'auto'. Furthermore, the other answers only work if you only care about left and right justification, but no one really addresses center justification without auto margin.
I am trying to make a navigation bar in react native. The vanilla ios version looks like this:
(source: apple.com)
How do I do something similar? I'm mainly concerned with centering.
One way is to use nested View (flex containers) for 3 different regions and set flex:1 to left and right region
<View style={styles.navBar}>
<View style={styles.leftContainer}>
<Text style={[styles.text, {textAlign: 'left'}]}>
{'<'}
</Text>
</View>
<Text style={styles.text}>
Fitness & Nutrition Tracking
</Text>
<View style={styles.rightContainer}>
<View style={styles.rightIcon}/>
</View>
</View>
const styles = StyleSheet.create({
navBar: {
height: 60,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'blue',
},
leftContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
backgroundColor: 'green'
},
rightContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: 'red',
},
rightIcon: {
height: 10,
width: 10,
resizeMode: 'contain',
backgroundColor: 'white',
}
});
You could also set marginLeft: 'auto' to the middle component. It should push it to the right. Also works for React Native
Source: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6
If you're using a NavigationBar from the Navigator module see my question: Changing the default style for a Navigator.NavigationBar (title)
use this
marginLeft: "auto",
marginRight: "auto"