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',
}
Related
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,
},
I didn't have this problem before, but for some reason right now, my text input box is starting with 0 and it won't start with the place holder I had set. When I delete the 0 when I start entering, it goes away and sort of expands, with the place holder seen. Does anyone have any advice on how I can make it start with a full-text input banner and without the 0?
Here are pictures of what is happening:
Starting
After clicking into text input
Here's my code:
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholderTextColor="#aaaaaa"
secureTextEntry
placeholder='Blood Pressure'
underlineColorAndroid="transparent"
autoCapitalize="none"
multiline
onChangeText={(bp) => this.setState({ bp })}
value={`${this.state.bp}`}
/>
<View style={styles.modalContainer}>
<View style={styles.innerContainer}>
<TouchableOpacity onPress=
{
this.updateInfo,
this.onFooterLinkPress
}
>
<Text style={styles.buttonTitle}>Submit Data</Text>
</TouchableOpacity>
</View>
);
Styles:
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
flex: 5,
alignItems: 'center'
},
title: {
},
logo: {
flex: 1,
height: 120,
width: 90,
alignSelf: "center",
margin: 30
},
input: {
height: 48,
borderRadius: 5,
overflow: 'hidden',
backgroundColor: 'white',
marginTop: 10,
marginBottom: 10,
marginLeft: 30,
marginRight: 30,
paddingLeft: 16
},
button: {
backgroundColor: '#788eec',
marginLeft: 30,
marginRight: 30,
marginTop: 20,
height: 48,
borderRadius: 5,
alignItems: "center",
justifyContent: 'center'
},
buttonTitle: {
color: 'white',
fontSize: 16,
fontWeight: "bold"
},
footerView: {
flex: 1,
alignItems: "center",
marginTop: 20
},
footerText: {
fontSize: 16,
color: '#2e2e2d'
},
footerLink: {
color: "#788eec",
fontWeight: "bold",
fontSize: 16
}
})
I'm having some troubles displaying information which I believe they have to do with the Flexbox Properties, but no matter how I play around with the Styles I don't get to fit everything in some components.
First I have this Component which is a Simple Card Component where I pass my data from API:
<PartidoItem
localImage={logoLocal}
marcadorLocal={marcadorLocal}
time={date}
partidoId={partidoId}
estatus={estatus}
minute={elapsed}
estadio={estadio}
marcadorVisita={marcadorVisita}
visitImage={logoVisita}
onSelect={estatus !== 'NS' && estatus !== 'TBD' ? () => {
selectPartidoHandler(partidoId, tituloPartido)
}
: () => { }
}
/>
This comes from this Component:
import React from 'react';
import { View, Text, Image, StyleSheet, TouchableNativeFeedback, TouchableOpacity, Platform } from 'react-native';
import Card from '../UI/Card';
import Colors from '../../constants/Colors';
const PartidoItem = props => {
let TouchableCmp = TouchableOpacity;
if (Platform.OS === 'android' && Platform.Version >= 21) {
TouchableCmp = TouchableNativeFeedback;
}
return (
<Card style={styles.product}>
<View style={styles.touchable}>
<TouchableCmp onPress={props.onSelect} useForeground>
<View style={styles.container}>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.localImage }}
/>
</View>
</View>
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorLocal}</Text>
</View>
{props.estatus === 'NS' || props.estatus === 'TBD'
? <View style={styles.column}>
<Text style={styles.date}>{props.time}</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
: props.estatus === 'FT' ?
<View style={styles.column}>
<Text style={styles.title2}>Final</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
:
<View style={styles.column}>
<Text style={styles.title}>Tiempo:</Text>
<Text style={styles.title}>{props.minute} '</Text>
</View>
}
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorVisita}</Text>
</View>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.visitImage }}
/>
</View>
</View>
</View>
</TouchableCmp>
</View>
</Card>
);
};
const styles = StyleSheet.create({
product: {
height: 100,
margin: 20,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 10,
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
column: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '20%',
},
space_between_columns: {
width: 100
},
box: {
height: 50,
width: 50
},
imageContainer: {
width: '100%',
height: '70%',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
marginHorizontal: 10,
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
flex: 1,
},
hora: {
fontSize: 14,
color: '#888',
fontWeight: 'bold',
textAlign: 'center',
},
number: {
fontSize: 50,
marginVertical: 4,
fontWeight: 'bold',
justifyContent: 'center',
color: Colors.secondary,
},
title: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
//flexWrap: 'wrap',
flex: 2,
flexGrow: 1,
},
title2: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
color: 'red',
},
date: {
fontSize: 14,
marginVertical: 4,
textAlign: 'center',
flex: 1,
flexGrow: 1,
marginHorizontal: 2,
},
});
export default PartidoItem;
Which Holds this Component as well:
import React from 'react';
import { View, StyleSheet } from 'react-native';
//Importacion de los colores
import Colors from "../../constants/Colors";
const Card = props => {
return (
<View style={{...styles.card, ...props.style}}>
{props.children}
</View>
);
};
const styles = StyleSheet.create({
card: {
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: Colors.background,
}
});
export default Card;
Now the problem is that when I see it in the Android Emulator and it has large Strings I see this:
As you can see the Component is the one in the Primary Box and the Property "Estadio" is too big that doesn't show completely
The same happens when I check this on my iOS device (through Expo):
Is there a way to get this info to fit into that space so it shows the Full Name?
Kind Regards
PD: After Change Advise on first Answer this is the result with the Logos not showing correctly:
Try this for your styles :
const styles = StyleSheet.create({
product: {
height: 120,
margin: 20,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 10,
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
column: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
},
space_between_columns: {
width: 100
},
box: {
height: 50,
width: 50
},
imageContainer: {
width: 100,
height: 100,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
marginHorizontal: 10,
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
flex: 1,
},
hora: {
fontSize: 14,
color: '#888',
fontWeight: 'bold',
textAlign: 'center',
},
number: {
fontSize: 50,
marginVertical: 4,
fontWeight: 'bold',
justifyContent: 'center',
color: Colors.secondary,
},
title: {
fontSize: 14,
margin: 5,
fontWeight: 'bold',
textAlign: 'center',
//flexWrap: 'wrap',
flex: 2,
flexGrow: 1,
},
title2: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
color: 'red',
},
date: {
fontSize: 14,
marginVertical: 4,
textAlign: 'center',
flex: 1,
flexGrow: 1,
marginHorizontal: 2,
},
});
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
},
I want the text input underline placeholder to be longer than the text to look nice and neat. However it only expands when the user is typing more letters. Is there any way possible to set it longer as default?
Also another problem I am having is that in my password text input it is not showing all the text it is only showing PASSWOR.
here is my textinput codes:
<View
style={styles.inputContainer}
>
{/** USERNAME TEXT INPUT**/}
<TextInput
style={styles.usernameInput}
placeholder= "USERNAME"
placeholderTextColor='white'
maxLength= {15}
autoCorrect={false}
underlineColorAndroid='blue'
>
</TextInput>
{/** PASSWORD TEXT INPUT**/}
<TextInput
style={styles.passwordInput}
placeholder= "PASSWORD"
placeholderTextColor='white'
maxLength= {15}
autoCorrect={false}
underlineColorAndroid='blue'
secureTextEntry={true}
>
</TextInput>
</View>
and this is my styles codes:
const styles = StyleSheet.create({
Container: {
flex: 1,
width: null,
height: null,
alignItems: 'center',
justifyContent: 'center',
},
inputContainer: {
height: '80%',
width: '80%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(216,69,69,0.8)',
borderRadius: 50,
},
usernameInput: {
fontFamily: "Montserrat",
fontSize: 20,
color: 'white',
fontWeight: 'bold',
},
passwordInput: {
fontFamily: "Montserrat",
fontSize: 20,
color: 'white',
fontWeight: 'bold',
},
can you change styleSheet like this and tell me result?
Container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
inputContainer: {
height: 120,
width: 120,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(216,69,69,0.8)',
borderRadius: 50,
},
usernameInput: {
fontFamily: "Montserrat",
width: 120,
fontSize: 20,
color: 'white',
fontWeight: 'bold',
},
passwordInput: {
fontFamily: "Montserrat",
fontSize: 20,
width: 120,
color: 'white',
fontWeight: 'bold',
},