In React Native, I have a <TextInput/> but with flexbox style set to center it, yet it still does not and rather just sits to the left but only vertically centered. I tested it out with simple <Text/> and it centers correctly.
How can I center <TextInput/> with flexbox?
Here is the code:
render() {
return (
<View style={{alignItems: 'center', justifyContent: 'center', flex: 1, }}>
<TextInput
style={{fontWeight: 'bold', height: 18, color: 'red'}}
placeholderStyle={{fontWeight: 'bold'}}
placeholderTextColor='red'
placeholder='Center Me'
/>
</View>
)
}
}
Thank you in advance!
EDIT - with additional styles added
<View style=style={{alignItems: 'center', justifyContent: 'center', flex: 1,}}>
<TextInput
onChangeText={this._handleName}
value={this.props.name}
placeholderTextColor='white'
placeholder='Put in name'
style={{
backgroundColor: 'black',
borderWidth: 0,
borderRadius: 15,
width: 250,
height: 70,
fontFamily: 'Roboto',
fontSize: 20,
textAlign: 'center',
}}
/>
</View>
Add textAlign: 'center' to your TextInput component.
style={{fontWeight: 'bold', height: 18, color: 'red', textAlign: 'center'}}
The actual element is center aligned, but textAlign controls the alignment of the inner text and placeholder.
The result of adding the change to your code
Related
I have some react-native code, where I have a pop-up modal. I created it using flex, but for some reason the text will not vertically align. I solved it using top = 30%, but then my touchable opacities(surrounding the texts) do not span all of the free space available. And I feel this is a hacky solution.
Curious if there is a better one, to automatically align the text vertically and make sure the touchable opacities take up the free space available to them?
Below is my code:
<Modal
isVisible={confirmationVisible}
onBackdropPress={() => toggleConfirmation()}
style={styles.confirmationModal}
>
<Text style={styles.confirmationTitle}>Would you like to add a beacon to {assetName}?</Text>
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddAssetScreenFinish")}>
<Text style={styles.confirmationText}>No, I'm done</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddBeaconExistingScreen")}>
<Text style={styles.confirmationText}>Yes, an existing Beacon</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddBeaconScreen")}>
<Text style={styles.confirmationText}>Yes, a new Beacon</Text>
</TouchableOpacity>
</Modal>
Below is my styling:
confirmationModal: {
flex: 0.3,
width: "60%",
alignItems: "center",
justifyContent: "space-evenly",
backgroundColor: "white",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
marginRight: "auto",
borderRadius: 8
},
confirmationTitle: {
fontWeight: "bold",
textAlign: "center",
margin: 5,
paddingLeft: 20,
paddingRight: 20
},
confirmationContainer: {
borderTopColor: "lightgrey",
borderTopWidth: 1,
width: "100%"
},
confirmationText: {
textAlign: "center",
color: COLORS.purple
},
Edit:
using this modal if curious
Also, have tried justifyContent on confirmationContainer but it does not work, unsure why
Edit2:
Got the solution. Seems flex is scaling the height and width had to be set manually for my text element. Removing the justifyContent and alignItems from a parent container, I was able to use textAlignVertical for my title and scale titleContainer vs touchableContainers with flex 2 and flex 1 respectively. Not sure what is going on, but the touchable now scales the whole free space and the text is aligned vertically...used AnthonyDev220's solution and reworked it so marked him as best answer, updated styles jsx did not change:
confirmationModal: {
flex: 0.3,
width: "60%",
backgroundColor: "white",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
marginRight: "auto",
borderRadius: 8
},
confirmationTitle: {
fontWeight: "bold",
textAlign: "center",
textAlignVertical: "center",
flex: 2,
paddingLeft: 20,
paddingRight: 20
},
confirmationContainer: {
borderTopColor: "lightgrey",
borderTopWidth: 1,
flex: 1,
width: "100%"
},
confirmationText: {
marginTop: "auto",
marginBottom: "auto",
textAlign: "center",
color: COLORS.purple
},
You could try adding textAlignVertical: "center" to your confirmationText
or
Try wrapping your component inside a component and then style your componenet.
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddAssetScreenFinish")}>
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text style={styles.confirmationText}>No, I'm done</Text>
</TouchableOpacity>
</View>
same for your other two <Text> components.
confirmationContainer: {
display: flex,
justifyContent: center,
alignItems:center,
borderTopColor: "lightgrey",
borderTopWidth: 1,
width: "100%"
}
Please do not mark this as duplicate.It is not. I haven't found any working solution for me.
So basically, I have been browsing stackoverflow and GitHub and I could get nothing working for me. If I set the behavior of KeyboardAvoidingView to padding nothing happens. However, position or height works fine, just as intended. Anyone has any ideea why? I need padding here, specifically. It doesn't matter where I put my KeyboardAvoidingView tag or what I wrap with it, it won't work.
Basically I am trying to get the <RichToolbar> to get pushed up when i open the keyboard. Seems easy, lost a day on it :(
I also tried the package containing KeyboardAwareScrollView, no luck.
I am currently using
react-native-cli: 2.0.1
react-native: 0.61.2
My code:
return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="position">
<View style={styles.container}>
<ScrollView scrollEnabled={false} contentContainerStyle={styles.textEditorContainer}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<>
<TextInput
autoCorrect={false}
style={styles.title}
placeholder={Strings.screen.edit.titlePlaceholder}
onChangeText={this.onTitleValueChange}
value={titleValue}
/>
{divider}
<RichEditor
ref={this.setEditorRef}
initialContentHTML={this.props.initialEditorValue.content}
style={styles.textEditor}
/>
</>
</TouchableWithoutFeedback>
{this.renderCornerAnimation()}
<View style={styles.toolbarContainer}>
<RichToolbar
style={styles.toolbar}
getEditor={() => this.richText}
iconTint={'#000033'}
selectedIconTint={'#2095F2'}
selectedButtonStyle={{ backgroundColor: 'transparent' }}
/>
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
);
}
}
interface Style {
container: ViewStyle;
textEditorContainer: ViewStyle;
textEditor: ViewStyle;
title: TextStyle;
toolbarContainer: ViewStyle;
toolbar: ViewStyle;
toolbarButton: TextStyle;
lottieView: ViewStyle;
divider: ViewStyle;
iconSetContainerStyle: ViewStyle;
textInput: ViewStyle;
}
function createStyleSheet(colorScheme: ColorScheme): Style {
return StyleSheet.create<Style>({
container: {
flex: 1,
width: '100%',
height: '100%',
paddingTop: getStatusBarHeight(true),
backgroundColor: color[colorScheme].background,
alignItems: 'center',
},
textEditorContainer: {
width: screenWidth / 1.2,
backgroundColor: palette.white[1],
borderRadius: 40,
},
textEditor: {
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
width: '100%',
backgroundColor: palette.white[1],
},
title: {
backgroundColor: palette.white[1],
width: '100%',
padding: 5,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
fontWeight: '700',
fontSize: 20,
},
toolbarContainer: {
flex: 1,
minHeight: 35,
alignItems: 'center',
justifyContent: 'flex-end',
backgroundColor: color[colorScheme].background,
paddingBottom: getBottomSpace(),
},
toolbar: {
height: 35,
backgroundColor: color[colorScheme].background,
},
toolbarButton: {
fontSize: 12,
textAlign: 'center',
},
lottieView: {
position: 'absolute',
top: 0,
right: 0,
width: 20,
height: 20,
},
divider: {
width: '10%',
borderRadius: 4,
marginLeft: 8,
borderBottomWidth: 6,
},
iconSetContainerStyle: {
flexGrow: 1,
justifyContent: 'space-evenly',
alignItems: 'center',
},
textInput: {
color: color[colorScheme].text,
},
});
}
I am not a pro developer but try this hack....!
<View
style={{ flex: 1, }}>
<Modal
visible={state}
transparent={true}
>
<View style={{ flexDirection: 'column-reverse', flex: 1 }}>
<TextInput placeholder='wexneweyxuyfwwyfunwfyw' />
</View>
</Modal>
<View style={{ flex: 1 }}>
<TouchableOpacity style={{ flex: 1, backgroundColor: color.rebeccapurple }}>
<Text>Touch</Text>
</TouchableOpacity>
</View>
</View>
This will auto align textInput on top of keyBoard Thanks ..
also run the fucntion easy .....
I am trying to drawing circle shape view for textview inside that some text.
It is working with Android, But, iOS not working properly. Text is coming top of the view.
<Text style={styles.na}> NA </Text>
styles
na: {
width: 60,
height: 60,
borderRadius: 60 / 2,
backgroundColor: 'orange',
alignItems: 'center',
textAlign: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
textAlignVertical: 'center',
marginRight: 10,
overflow: 'hidden',
},
Any suggestions?
try this code, works for me
<View style={{
width: 60,
height: 60,
justifyContent: "center",
borderRadius: 60 / 2,
backgroundColor: 'orange',
}}>
<Text style={{
alignSelf: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
}}>NA</Text>
</View>
try alignSelf : center
alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems.
Reference
I have a modal Component that I am trying to put in the center of the screen.
In my view tag with style={styles.containerStyle} the way it currently is written the modal is vertically in the middle but horizontally to the left. If I add flexDirection: 'row' to the containerStyle it moves it to the middle horizontally but to the top vertically.
This is my modal component:
class ItemInformationModal extends Component {
onNotesChange(text) {
this.props.notesChanged(text);
}
render() {
return (
<Modal
transparent
animationType='fade'
visible={this.props.itemModalVisible}
>
<View style={styles.containerStyle}>
<View style={styles.modalContainer}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styles.itemTitle}>{this.props.currItem.text}</Text>
<View style={{ padding: 5 }}>
<DatePickerIOS />
</View>
</View>
<View style={{ padding: 5 }}>
<Feather
name="x-square"
size={35}
color={'#db5461'}
onPress={() => this.props.closeItemModal()}
/>
</View>
</View>
<View style={{ padding: 5 }}>
<TextInput
placeholder={'Add notes'}
value={this.props.currItem.notes}
multiline
style={styles.notesInput}
onChangeText={this.onNotesChange.bind(this)}
/>
</View>
</View>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalContainer: {
width: '75%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#cdd2c9',
backgroundColor: '#cdd2c9',
alignSelf: 'baseline',
},
notesInput: {
height: 130,
borderWidth: 1,
borderRadius: 10,
borderColor: '#28313b',
padding: 10,
color: '#28313b'
},
itemTitle: {
fontSize: 20,
color: '#28313b',
padding: 10
}
});
You can remove alignSelf
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems:"center"
},
modalContainer: {
width: '75%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#cdd2c9',
backgroundColor: '#cdd2c9',
}
I'm using native-base.
this is my code:
<View style={{width:'100%',height:45}}>
<Card style={{position:'absolute',zIndex:90,paddingTop: 0, marginRight:10,width: '100%', alignSelf: 'center',borderRadius:10,padding:10,height:45 }}>
<CardItem style={{ position:'absolute', zIndex:1,backgroundColor: '#fff', height: 45, width: '100%', paddingTop: 0, paddingBottom: 0, justifyContent: 'flex-end' }}>
<TouchableOpacity onPress={() => this.onClickSubs(sub)} style={{height:'100%',width:'100%'}}>
<Text onPress={() => this.onClickSubs(sub)} style={{ textAlign: 'center', fontSize: 16, color: colorConstants.GRAY_LIGHT_COLOR }}>{sub.title}</Text>
</TouchableOpacity>
</CardItem>
</Card>
<View style={{position:'absolute',zIndex:999,right:0,width:20,height:20,borderRadius:10,borderWidth:2,borderColor:'#fff',backgroundColor:colorConstants.PRIMARY_COLOR,alignSelf:'center',justifyContent:'center',alignItems:'center'}}>
</View> //circle view
</View>
but my circle view is background of Card:
Just add elevation value in your circle view style
<View
style={{
position: "absolute",
zIndex: 999,
right: 0,
width: 20,
height: 20,
borderRadius: 10,
borderWidth: 2,
borderColor: "#fff",
backgroundColor: "red",
alignSelf: "center",
justifyContent: "center",
alignItems: "center",
elevation:3 <-----------elevation in circle view---------
}}
/>
without elevation
with elevation