I need to align two Text component with different fontSize in a row and vertically centered. I have following now https://snack.expo.io/#troublediehard/dmVuZ2
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.row}>
<Text style={styles.text1}>Font size 20</Text>
<Text style={styles.text2}>Font size 14</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
row: {
flexDirection: 'row',
backgroundColor: 'red',
},
text1: {
fontSize: 20,
backgroundColor: 'blue',
},
text2: {
fontSize: 14,
backgroundColor: 'green',
},
});
For anyone that didn't found a solution yet, you have to wrap the text within another Text tag:
<View style={styles.container}>
<View style={styles.row}>
<Text>
<Text style={styles.text1}>Font size 20</Text>
<Text style={styles.text2}>Font size 14</Text>
</Text>
</View>
</View>
You need to add alignItems: 'center' to styles.row
row: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'red',
},
Related
Layout overlapping on text input in react native as you can see in the images.
I have experimented with keyboardAvoidingView and keyboardAwareScrollView but I just cant fix it or I am implementing them incorrectly.
How to avoid keyboard from changing your flex layout? What's the industry standard? keyboardAvoidingView? I find that inconsistent or have not understood it conceptually. My approach usually is wrapping the entire code with either keyboardAwareScrollView or keyboardAvoidingView. Do I only do it over the textInput component?
const InterviewAlignment = ({navigation}) => {
return (
<View style={styles.container}>
<View style={styles.header}>
</View>
<View style={styles.main}>
<View
style={{
flex: 1,
justifyContent: 'space-between',
}}>
<View
style={{
flex: 1,
backgroundColor: 'red',
}}>
</View>
<View style={styles.modeContainer}>
</View>
<View style={{flex: 1}}>
<Text style={styles.text}>Link Address</Text>
<TextInput
style={styles.linkInput}
/>
</View>
</View>
<View style={{flex: 1, backgroundColor: 'red'}}>
</View>
<View style={{flex: 1.5, backgroundColor: 'black'}}>
</View>
</View>
</View>
);
};
//RFValue is just a responsive wrapper
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: RFValue(16),
minHeight: RFValue(56),
backgroundColor: '#B1C59B',
},
text: {
fontSize: RFValue(15),
color: 'black',
},
main: {
flex: 1,
padding: 15,
},
modeContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start',
flex: 1,
backgroundColor: 'yellow',
},
linkInput: {
marginHorizontal: RFValue(40),
padding: 0,
paddingTop: 2,
borderBottomWidth: RFValue(1),
borderBottomColor: '#C4C4C4',
},
});
You can set height instead of flex in styling
My modal -- noDevicesModalContainer -- is taking up an enormous amount of the screen and I can't work out why.
I am very new to React Native and web development generally, so please do not be afraid to overexplain!
Thank you in advance for your suggestions.
class DevicesEmptyScreen extends Component {
render() {
return (
<View style={styles.screen}>
<View style={styles.noDevicesImage}>
<Image
source={require('./../../../android/app/src/main/res/drawable/no_devices.png')}
/>
</View>
<View style={styles.noDevicesTextContainer}>
<Text style={styles.noDevicesText}>You do not have any devices yet</Text>
</View>
<View style={styles.noDevicesModalContainer}>
<Text style={[styles.noDevicesText, styles.noDevicesModalText]}>
In case no devices have been assigned, please contact your administrator
</Text>
</View>
</View>
)
}
}
export default DevicesEmptyScreen
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
noDevicesImage: {
flex: 1,
marginTop: 40
},
noDevicesTextContainer: {
flex: 1,
justifyContent: 'center'
},
noDevicesText: {
color: '#89C7C8',
padding: 10
},
noDevicesModalContainer: {
flex: 1,
backgroundColor: '#EBF5F6',
borderRadius: 10,
marginHorizontal: 30,
marginVertical: 30
},
noDevicesModalText: {
marginLeft: 20
}
})
As per Modal documentation. Try this
<Modal transparent={true}
visible={this.state.isVisible}
onRequestClose={this.closeModal}>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'}}>
<View style={{
width: 300,
height: 300}}>
...
</View>
</View>
</Modal>
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
Im trying to make a flatlist with some data and a button on each row.
I have tried to do it in a typical "web" fashion, with nested views and formating the elements relative to their parent, but with no success.
this is the current structure of the list:
<View style={styles.row}>
<View style={styles.rowinfo}>
<View>
<Text style={styles.primaryID}>{item.name ? item.name : item.phoneNumber}</Text>
<Text style={styles.secondaryID}>{item.name ? item.phoneNumber : 'Ukjent innringer'}</Text>
</View>
<View>
<Text style={styles.textalignRight}>Varighet: {item.durationDisplay}</Text>
<Text style={styles.textalignRight}>{item.dateStringTime}</Text>
</View>
</View>
<TouchableOpacity style={styles.rowicon}>
<View style={styles.ban_icon}>
<Icon
name='ban'
type='font-awesome'
color='#FFF'
/>
</View>
</TouchableOpacity>
</View>
And here is my styling:
const styles = StyleSheet.create({
row: {
flex: 1,
marginTop: 1,
paddingVertical: 10,
paddingHorizontal: 15,
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderBottomColor: '#f9f9f9'
},
rowinfo:{
flexDirection: "row",
alignSelf: 'stretch'
},
primaryID: {
fontWeight: 'bold'
},
textalignRight: {
textAlign: 'right'
},
rowbt: {
justifyContent: "center",
alignItems: "center",
backgroundColor: 'red'
},
ban_icon: {
color: '#FFF',
fontWeight: 'bold',
fontSize: 14,
marginHorizontal: 8
}
});
I im trying to make it look like this:
But i keep getting this:
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.row}>
<View style={styles.rowinfo}>
<View>
<Text style={styles.primaryID}>{'Phone Number'}</Text>
<Text style={styles.secondaryID}>{'Ukjent innringer'}</Text>
</View>
</View>
<View style={{ flexDirection: 'row'}}>
<View>
<Text style={styles.textalignRight}>Varighet: {'1m og 20s'}</Text>
<Text style={styles.textalignRight}>{'13:23:11'}</Text>
</View>
<TouchableOpacity style={styles.ban_icon}>
<View style={styles.ban_icon} />
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
},
row: {
backgroundColor: 'green',
width: '100%',
marginTop: 1,
paddingVertical: 10,
paddingHorizontal: 15,
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderBottomColor: '#f9f9f9'
},
rowinfo:{
flex: 1,
flexDirection: "row",
},
primaryID: {
fontWeight: 'bold'
},
textalignRight: {
textAlign: 'right'
},
ban_icon: {
padding: 10,
backgroundColor: 'red',
marginLeft: 10,
}
});
Check the snack: https://snack.expo.io/#legowtham/43c687
I was able to get my desired result by using absolute positioning.
I'm trying to make 2 colors of background using flex, and it seems to work good but I want to make the button on the middle as in the photo, where I need to insert the button in the code?
i want it to be like this:
return (
<View style={container}>
<View style={leftContainer}>
</View>
<View style={rightContainer}>
</View>
<Button
title="button"/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row'
},
leftContainer:{
flex:1,
backgroundColor: '#ca8afa',
},
rightContainer:{
flex:1,
backgroundColor: '#96d0e3'
},
addButton: {
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
bottom: 20,
right: 20,
zIndex: 1111,
width: calcSize(192 / 2),
height: calcSize(192 / 2)
}
})
the problem is that the button is also in the row now and not in the middle,
how can i fix it?
Here's a live demo of a possible solution: https://snack.expo.io/HJFL7A3ez
Edit - Adding the code here as well:
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.leftContainer}>
</View>
<View style={styles.rightContainer}>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.addButton} title="button"/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row'
},
leftContainer:{
flex:1,
backgroundColor: '#ca8afa',
},
rightContainer:{
flex:1,
backgroundColor: '#96d0e3'
},
buttonContainer: {
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
addButton: {
zIndex: 1111,
width: 200
}
})