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',
},
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,
},
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',
}
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 want to implement react-native-modal-dropdown functionality in my app,
here is the code
<View style={styles.viewStyle}>
<Text style={styles.textStyle}>{Strings.Location}</Text>
<View style={styles.input}>
<Image
style={styles.mapIcon}
source={require('../assets/map_pic_icon.png')}
/>
<ModalDropdown
onSelect={(index, value) => { this.setState({ selected: value }) }}
options={['option 1', 'option 2', 'option 3', 'option 4']}
defaultValue={Strings.Gaston}
dropdownTextStyle={{ backgroundColor: '#fff', fontSize: 18, color: colors.black }}/*Style here*/
textStyle={{ fontSize: 18, color: colors.gunmetal, alignSelf: 'flex-start', marginLeft: 10 }}
dropdownStyle={{ flex: 1, width: '90%', marginVertical: 10, borderWidth: 1, borderColor: colors.light_gray }}
style={{ flex: 1, width: '100%', backgroundColor: colors.white, justifyContent: 'center' }}
/>
<Image
style={styles.iconStyle}
source={require('../assets/down_arrow_blue.png')}
/>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.white,
},
viewStyle: {
margin: 10,
},
input: {
height: 50,
width: '100%',
marginTop: 8,
borderRadius: 2,
borderColor: colors.light_gray,
fontSize: 20,
borderWidth: 1,
flexDirection: 'row',
justifyContent: 'space-around'
},
iconStyle: {
margin: 20,
alignSelf: 'flex-end'
},
mapIcon: {
margin: 10,
alignSelf: 'center',
},
});
using this code my screen looks like this
my problem is when i click on blue color down arrow image then drodown is not opening it is only opening when i click on text .
How to solve this
And one more issue is dropdown width is not aligning properly to parent.
It is coming like this
Can anyone please tell me how to show dropdown list when icon is clicked and how to align the drodownlist list width properly.