What is the best way to align the placeholder text for TextInput component? I have already attempted to use the styles component as described below. There doesn't seem to be a property for this.
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.textInput}
onChangeText={(text) => this.setState({
username: text
})}
placeholder='Add Username'
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
textInput: {
height: 40,
width: 200,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
borderColor: 'gray',
borderWidth: 1,
}
});
Add textAlign: 'center' to your textInput style.
Add textAlign={'center'} as a property to the TextInput component
if you doesnt give multiline property of textinput 'true'
place holder is always center of text input
you can give padding for example paddingTop
to style of textInput
to make distance between place holder and textinput
set TextInput style padding:0 and adjust spacing accordingly
Related
I'm new to react-native-material and I have the label text on top of the input text image when I use the :
<View style={styles.layout} >
<TextInput label="Email" variant="outlined" style={styles.textInput} />
<View/>
const styles = StyleSheet.create({
layout: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
width: "100%"
},
textInput:{
width: "80%",
marginVertical: 10
},
});
Thank you in advance for your help.
I expect the label to stay on top as long as the there's an input in the TextInput
There would be always a blue border when the text focus. I have already set style borderWidth: 0, but there is still a border. I also tried to set the border color, it won't work either.
Any hint?
Nothing special, I starts from expo tab boilerplate.
Also I found the autofocuse won't be able to triggered either :(
import * as React from "react";
import { StyleSheet } from "react-native";
import { TextInput } from "react-native-gesture-handler";
import EditScreenInfo from "../components/EditScreenInfo";
import { Text, View } from "../components/Themed";
export default function TabOneScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>Tab One</Text>
<View
style={styles.separator}
lightColor="#eee"
darkColor="rgba(255,255,255,0.1)"
/>
<TextInput
autoFocus={true}
placeholder="here is a input"
style={{ padding: 4, borderBottomWidth: 2 }}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
title: {
fontSize: 20,
fontWeight: "bold",
},
separator: {
marginVertical: 30,
height: 1,
width: "80%",
},
});
Can you try setting outlineStyle to 'none'. This will remove all border styles
<TextInput style={{outlineStyle: 'none' }} />
[The Error image 1]
Current Behaviour
I receive this image if I am trying to nest a ScrollView within the View.
Expected Behaviour
Since the KeyBoardAvoidingView pushes the input boxes to the top and hides some of them I want a ScrollView to be able to scroll through the input boxes so hiding content can be seen but when I try to do it with my code I get the error in the above image.
import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView, StatusBar, ScrollView} from 'react-native';
export default class SignUp extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={60} style={styles.container}>
<StatusBar backgroundColor = "#FFFFFF" barStyle = "dark-content" hidden = {true}/>
<View style={styles.boxContainer}>
<View style = {[styles.boxContainer, styles.boxOne]}>
<ScrollView style = {[styles.boxContainer, styles.boxOne]} >
<TextInput
style={styles.inputBox}
placeholder="full name"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent">
</TextInput>
<TextInput
style={styles.inputBox}
placeholder="email or phone"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent"
autoCapitalize="none">
</TextInput>
<TextInput
style={styles.inputBox}
placeholder="date of birth"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent"
autoCapitalize="none">
</TextInput>
<TextInput
style={styles.inputBox}
placeholder="username"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent"
autoCapitalize="none">
</TextInput>
<TextInput
style={styles.inputBox}
secureTextEntry={true}
placeholder="password"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent"
autoCapitalize="none">
</TextInput>
</ScrollView>
</View>
<View style={styles.boxContainerToggle}>
<TouchableOpacity
style={[styles.boxContainer, styles.boxTwo]}>
<Text style={styles.paragraph}>Login</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
boxContainer: {
flex: 1, // 1:3
justifyContent: 'center',
},
boxContainerToggle: {
flex: 1,
flexDirection: 'row',
padding: 20,
backgroundColor: 'white',
},
boxOne: {
flex: 5, // 5:6
backgroundColor: 'white',
padding: 20
},
boxTwo: {
flex: 1, // 1:6
backgroundColor: '#252525',
flexDirection: 'row',
width: '100%',
height: '100%',
alignItems: 'center'
},
inputBox: {
height: 40,
backgroundColor: '#B6B6B630',
marginBottom: 10,
paddingHorizontal: 10,
},
paragraph: {
fontSize: 27,
fontWeight: 'bold',
textAlign: 'center',
color: '#FFFFFF',
},
});
So looks like the problem lies with the style for boxContainer. ScrollView does not support justifyContent unless you either pass it as a part of the contentContainerStyle prop or you wrap all your content inside the ScrollView and give justify content to that view. Personal experience says wrap your content inside the scrollview in its own view tag.
<ScrollView style={ styles.boxOne }
<View style={ style.boxContainer }>
{content goes here}
</View>
</ScrollView>
Please Use contentContainerStyle instead style
<ScrollView contentContainerStyle={styles.scrollView}>
<Text>Hello World!</Text>
</ScrollView>
I had same issue with my flatlist. That's enought to move to another alignItems: 'center' and justifyContent: 'center',
<FlatList
style={styles.screen}
data={orders}
renderItem={itemData =>
<View style={styles.screenView}>
<Text>{itemData.item.totalAmount}</Text>
</View>}
/>
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: Colors.background,
},
screenView: {
alignItems: 'center',
justifyContent: 'center',
}})
The positioning of child elements of the ScrollView must be done through contentContainerStyle prop.
In this case the justify content must be part of the contentContainerStyle prop and other styles can be part of style prop. Example code is shown as below:
<ScrollView horizontal={true} style={styles.scrollWrapper} contentContainerStyle={styles.scrollContent}>
... {children}
</ScrollView>
and the styles can be applied as below. flex: 1 along with justifyContent: 'center' centers the content of ScrollView.
const styles = StyleSheet.create({
scrollWrapper: {
borderBottomColor: COLORS.line_grey,
borderBottomWidth: 1
},
scrollContent:{
justifyContent: 'center',
flex:1
}
})
Why does iOS not center the text input control?
I am including the render and stylesheet
code:
left android, right ios
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(text) => this.setState({text})}
underlineColorAndroid='rgba(0,0,0,0)'
value={this.state.text}
placeholder= 'username'
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#13493A'
}
input: {
height: 40,
width: 250,
borderRadius: 5,
backgroundColor: '#598176',
color: 'white',
marginTop: 30,
textAlign: 'center'
}
});
Thank you in advance,
Anthonie
Looking on the issue tracker, this appears to be a bug in React Native on iOS: #11892 So your code should work but doesn't. There is a listed workaround which is to add alignSelf: 'center' to the TextInput's styles (see example).
I want to place one <View> over another in react-native. Here is my code:
<View style={styles.container}>
<View style={styles.vimgProduct}>
<Image style={styles.imgProduct} source={{uri: "http://www.unclesamsjamms.com/unclesamcash7.jpg"}}/>
</View>
<View style={styles.vNewView}>
</View>
</View>`
and here is my style:
container: {
flex: 1,
paddingTop: 65,
backgroundColor: "#F5FCFF"
},
vimgProduct: {
paddingTop: 20,
justifyContent: 'center',
alignItems: 'center'
},
vNewView: {
height: 400,
paddingVertical: 20,
marginTop: -60,
marginHorizontal: 40,
borderWidth: 3,
borderColor: "black",
borderRadius: 15,
flexDirection: "row",
justifyContent: 'center',
alignItems: 'center'
}
My problem now is, that the View with Image is over my "vNewView" but the border of "vNewView" is in foreground and overlaps my "vimgProduct".
I want that my vNewView is in background and my vimgProduct is in foreground. How can I achieve this? In HTML/CSS it works with zIndex I think.
Could you help me please here? Would be great!
best regards,
Alban
To achieve similar functionality to z-index in react native, you simply need to place your components in the order that they are intended to be layered. For example, if you have three components in a row, then the second will overlay the first, and the third will overlay the second, so on and so forth.
For what you are doing, maybe try placing the vNewView as the first item in the view and use position: 'absolute' .
I'd here is an overlay container that you can use to overlay your views:
import React, { ReactElement } from 'react';
import { View, StyleSheet, ViewStyle, StyleProp } from 'react-native';
type OverlayContainerProps = {
back?: ReactElement;
front?: ReactElement;
backViewStyle?: StyleProp<ViewStyle>;
frontViewStyle?: StyleProp<ViewStyle>;
containerStyle?: StyleProp<ViewStyle>;
};
export default function OverlayContainer({
back,
front,
backViewStyle,
frontViewStyle,
containerStyle,
}: OverlayContainerProps): ReactElement {
return (
<View style={[styles.container, containerStyle]}>
<View style={backViewStyle}>{back}</View>
<View style={[styles.front, frontViewStyle]}>{front}</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignContent: 'center',
alignItems: 'center',
justifyContent: 'center',
},
front: {
position: 'absolute',
zIndex: 1,
},
});
Credit where it is due, I got my inspiration for this approach from seeing this bit of code: https://github.com/onmyway133/blog/issues/254