How to center text vertically in its own frame in React Native? - react-native

The text is sticking to the top. How do we center it vertically
<View style={styles.formContainer}>
<View style={styles.textInputBackground}>
<Text style={styles.textInputLabelText}>Name</Text>
<TextInput style={styles.textInput} />
</View>
<View style={styles.textInputBackground}>
<Text style={styles.textInputLabelText}>Email</Text>
<TextInput style={styles.textInput} />
</View>
</View>
const styles = StyleSheet.create({
formContainer: {
marginTop: 130,
},
textInputBackground: {
marginTop: 12,
backgroundColor: 'rgba(0, 0, 0, 0.08)',
flexDirection: 'row',
height: 46,
marginLeft: 16,
marginRight: 16,
borderRadius: 8,
},
textInputLabelText: {
backgroundColor: 'blue',
color: 'red',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
textAlignVertical: 'center',
flex: 2,
},
textInput: {
flex: 12,
},
})


Hi there I've updated your style. this will center your input
textInputBackground: {
marginTop: 12,
backgroundColor: 'rgba(0, 0, 0, 0.08)',
flexDirection: 'row',
height: 46,
marginLeft: 16,
marginRight: 16,
borderRadius: 8,
alignItems:"center", // **<--- add this line**
},


To make text center change style to this
textInputLabelText: {
backgroundColor: 'blue',
color: 'red',
justifyContent: 'center',
alignSelf: 'center', //just change alignItem to alignSelf
textAlign: 'center',
textAlignVertical: 'center',
flex: 2,
},

Related

Text lowered and cutoff in android but not ios - react native

The text should look like this
IOS
But on Android it looks like this:
Android
The code for the styling of the text and container is:
text: {
fontFamily: 'Roboto',
fontSize: 40,
width: 250,
height: 40,
textAlignVertical: 'center',
textAlign: 'center',
},
container: {
backgroundColor: '#DDDDDD',
width: 250,
height: 55,
margin: 12.5,
borderRadius: 10,
justifyContent: 'center'
}
and the components:
<TouchableOpacity
style={styles.container}
onPress={_ => this.navigation.push('Join')} >
<Text style={styles.text}>Join</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.container}
onPress={_ => this.navigation.push('Create')} >
<Text style={styles.text}>Create</Text>
</TouchableOpacity>

Replace your styles with this :
text: {
fontFamily: 'Roboto',
fontSize: 40,
textAlignVertical: 'center',
textAlign: 'center',
},
container: {
backgroundColor: '#DDDDDD',
margin: 12.5,
borderRadius: 10,
justifyContent: 'center',
alignSelf: 'center',
width: 250,
},

Change your styles to below -
text: {
fontFamily: 'Roboto',
fontSize: 40,
textAlignVertical: 'center',
textAlign: 'center',
},
container: {
backgroundColor: '#DDDDDD',
width: 250,
minHeight: 55,
margin: 12.5,
borderRadius: 10,
justifyContent: 'center'
alignItems: 'center',
alignSelf: 'center',
}

React native paper DataTable.Cell overflow text causes hide full text

Below code using DataTable.Cell.
If text bigger than column width it hide text
Please help need to display text if text bigger than column width need to break text in next line.
<DataTable.Row
style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
<DataTable.Cell
style={{
flex: 3,
flexWrap: 'wrap',
borderColor: 'yellow',
borderWidth: 2,
height: auto,
overflow: 'visible',
}}>
<View style={styles.rowbox}>
<Text style={styles.stnname}>Test 1</Text>
<Text>Day:1</Text>
<Text>Distance:0</Text>
</View>
</DataTable.Cell>
<DataTable.Cell numeric>Cell 1 2</DataTable.Cell>
<DataTable.Cell numeric>Cell 1 3</DataTable.Cell>
</DataTable.Row>
<DataTable.Row
style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
<DataTable.Cell
style={{
flex: 3,
flexWrap: 'wrap',
borderColor: 'yellow',
borderWidth: 2,
height: auto,
overflow: 'visible',
}}>
<View style={styles.rowbox}>
<Text style={styles.stnname}>Test 2 Test 2 Test 2</Text>
<Text>Day:1</Text>
<Text>Distance:0</Text>
</View>
</DataTable.Cell>
<DataTable.Cell numeric>Cell 2 2</DataTable.Cell>
<DataTable.Cell numeric>Cell 2 3</DataTable.Cell>
</DataTable.Row>
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
marginTop: 20,
zIndex:1
},
autocompleteContainer: {
flex: 1,
},
descriptionContainer: {
flex: 1,
justifyContent: 'center',
width:'100%',
alignItems: 'stretch'
},
itemText: {
fontSize: 15,
paddingTop: 5,
paddingBottom: 5,
margin: 6,
color: '#000',
},
infoText: {
textAlign: 'center',
fontSize: 16,
},
autodropsection:{
backgroundColor: "#fff",
flex:1,
},
containerMain: {
flex: 1,
padding: 0,
marginTop: 0,
},
datrow1:{
flex: 4,
flexDirection: 'column',
},
tableheader:{
backgroundColor : "#2375b3",
color:'#ffffff',
fontSize: 24,
fontWeight: '700',
flex: 2,
},
tableheadertitle:{
fontSize: 14,
fontWeight: '500',
color:'#fff',
textAlign:"center"
},
tableheadercell:{
color:"#fff",
fontSize:24,
},
cell:{
color:'#fff',
fontSize:24,
flexDirection:'column'
},
stnname:{
fontSize: 12,
fontWeight: '700',
color:'#333',
textAlign:"left",
flexWrap:'wrap',
alignContent:'flex-start'
},
rowbox:{
paddingTop:10,
paddingBottom:10,
paddingLeft:0,
paddingRight:0,
flexDirection:'column',
textAlign:'left',
justifyContent:'flex-start',
flex: 1,
borderWidth:2,
borderColor:'red',
flexWrap:'wrap',
width:'100%'
}
});

Use a View (with justifyContent: 'center') instead of DataTable.Cell to achieve the multilined cell
Source: https://github.com/callstack/react-native-paper/issues/2381#issuecomment-734155600

I Get the same issue, after big search i simply abandon this idea and start to use.
https://github.com/GeekyAnts/react-native-easy-grid/
Is realy simple to construct the same structure, like a table, after o just need to set border if you want, and done, simple and easy like Html.

How to set two buttons stick together?

I set two half oval buttons and try to set the position on center.
But I found they don't stick together, I try to change justifyContent: 'space-between' or 'space-around' is not working.
How to let Left button and Right button stick together ?
Here is my code:
return (
<View style={{ justifyContent: 'center', marginTop: 50, flexDirection: 'row', backgroundColor: 'blue' }}>
<TouchableOpacity style={[styles.buttonStyle, { width: 150, height: 50, borderBottomLeftRadius: 50, borderBottomRightRadius: 0, borderTopLeftRadius: 50, borderTopRightRadius: 0 }]}>
<Text>Left</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.buttonStyle, { backgroundColor: 'orange', width: 150, height: 50, borderBottomLeftRadius: 0, borderBottomRightRadius: 50, borderTopLeftRadius: 0, borderTopRightRadius: 50 }]}>
<Text>Right</Text>
</TouchableOpacity>
</View>
);
const styles = StyleSheet.create({
buttonStyle: {
alignSelf: 'stretch',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
borderWidth: 1,
borderColor: 'transparent',
marginLeft: 5,
marginRight: 5
},
});

remove margins,
buttonStyle: {
alignSelf: 'stretch',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
borderWidth: 1,
borderColor: 'transparent',
marginLeft: 5,//this
marginRight: 5// this
},

how set a View background color to red and it should be transparent

I have a Imagebackground for my parentconatiner, I want to set backgroundColor of one of my childView to red and it should be transparent so that the parent container image is visible
it should be like this
sample image
here is my code
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import colors from '../styles/colors';
import strings from '../localization/strings';
class Appointments extends Component {
render() {
return (
<View style={styles.Container}>
<View style={{ backgroundColor: 'rgba(52, 0, 0, 0.8)', shadowOpacity: 0.2, padding: 5 }}>
<View style={styles.childContainer}>
<Image style={{ justifyContent: 'flex-start', alignItems: 'flex-start' }} source={require('../assets/calender-Icon.png')}
/>
<View style={styles.dateTextContainer}>
<Text style={styles.childText}>Appointment</Text>
<Text style={[styles.childText, { fontSize: 26 }]}>Oct24, 2018</Text>
<Text style={[styles.childText, { fontSize: 16, fontWeight: 'bold' }]}>10:30 am</Text>
</View>
</View>
</View>
<View style={styles.borderText}>
<View style={{ flexDirection: 'row' }}>
<Image source={require('../assets/add-Icon.png')} />
<Text style={[styles.itemName, { fontSize: 16 }]}>New</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Image source={require('../assets/seeAll-Icon.png')} />
<Text style={[styles.itemName, { fontSize: 16 }]}>See All</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
Container: {
backgroundColor: colors.white,
borderRadius: 4,
borderWidth: 1,
borderColor: colors.red
},
childContainer: {
justifyContent: 'space-between',
alignItems: 'flex-start',
margin: 15,
flexDirection: 'row',
},
textStyle: {
fontSize: 16,
color: colors.black,
justifyContent: 'flex-end',
alignItems: 'flex-end',
fontWeight: 'bold'
},
childText: {
color: colors.white,
fontSize: 18,
},
dateTimeContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 10,
alignItems: 'flex-end',
},
dateTextContainer: {
flexDirection: 'column',
marginHorizontal: 10,
justifyContent: 'flex-end',
alignItems: 'flex-end',
},
listItem: {
borderWidth: 1,
borderColor: colors.pureBlue,
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 5,
paddingVertical: 5,
margin: 30
},
itemName: {
fontSize: 14,
color: colors.black,
margin: 2,
paddingLeft: 4
},
border: {
borderRadius: 4,
borderWidth: 1,
borderColor: colors.light_gray,
marginHorizontal: 20
},
imageText: {
flexDirection: 'column',
margin: 10,
flexWrap: 'wrap',
flex: 1
},
borderText: {
flexDirection: 'row',
justifyContent: 'space-between',
margin: 10
}
});
export default Appointments;
I have tried rgba and opacity but still not working
please help me how to do this

You need to remove the backgroundColor of the Container to allow for transparency to go all the way through to the parent container, otherwise the transparency will only allow to see the white background behind
Container: {
// backgroundColor: colors.white,
...
},

Vertical centering in React Native doesn't work

I use a ScrollView and I am not able to center an icon in one of inner Views.
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
<ScrollView>
...
<View style={styles.detailRowContainer}>
<View style={{flex: 1}}>
<Text style={styles.label} numberOfLines={1}>
{'Phone Number'}
</Text>
<Text style={styles.value} numberOfLines={1}>
{phone}
</Text>
</View>
<View style={styles.round}>
<TouchableWithoutFeedback onPress={this._onPressPhone}>
<Icon size={22} name="phone" />
</TouchableWithoutFeedback>
</View>
</View>;
...
</ScrollView>
detailRowContainer: {
flexDirection: 'row',
justifyContent: 'center',
flex: 1,
marginTop: 10,
paddingBottom: 10,
borderBottomWidth: 1,
borderBottomColor: Colors.lightGray,
},
label: {
color: Colors.glofoxDark,
marginBottom: 3,
},
value: {
color: Colors.glofoxDark,
fontWeight: '800',
borderBottomWidth: 1,
borderBottomColor: Colors.lightGray,
},
round: {
backgroundColor: Colors.lightBlue,
width: 30,
height: 30,
borderRadius: 30,
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'flex-end',
flexDirection: 'row',
padding: 4,
},

The styles need to be modified in this way.
Right now you're doing
flexDirection: row along justifyContent: center. Since your first child element is taking complete parent flex, therefore it does not show its effect
paddingBottom is given but , for centering an equivalent paddingTop must be given
padding for the round style should be replaced with margin, otherwise it affects the position of the inner elements
alignItems in round , must not be flex-end, it should be replaced with center
Here are the styles that will fix the vertical centering
detailRowContainer: {
flexDirection: 'row',
alignItems: 'center',
flex: 1,
marginTop: 10,
paddingTop: 10,
paddingBottom: 10,
borderBottomWidth: 1,
borderBottomColor: Colors.lightGray,
},
round: {
backgroundColor: Colors.lightBlue,
width: 30,
height: 30,
borderRadius: 30,
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
margin: 4
},