score:488
From headline
' style remove height
, justifyContent
and alignItems
. It will center the text vertically. Add textAlign: 'center'
and it will center the text horizontally.
headline: {
textAlign: 'center', // <-- the magic
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: 'yellow',
}
score:0
const styles = StyleSheet.create({
navigationView: {
height: 44,
width: '100%',
backgroundColor:'darkgray',
justifyContent: 'center',
alignItems: 'center'
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
},
})
render() {
return (
<View style = { styles.navigationView }>
<Text style = { styles.titleText } > Title name here </Text>
</View>
)
}
score:0
You can use two approaches for this...
To make text align center horizontally, apply this Property
(textAlign:"center")
. Now to make the text align vertically, first check direction of flex. If flexDirection is column apply property (justifyContent:"center"
) and if flexDirection is row is row apply property (alignItems : "center"
) .To Make text align center apply same property (
textAlign:"center"
). Now to make it align vertically make the hieght of the<Text> </Text>
equal to view and then apply property (textAlignVertical: "center"
)...
Most Probably it will Work...
score:1
In addition to the use cases mentioned in the other answers:
To center text in the specific use case of a BottomTabNavigator, remember to set showIcon to false (even if you don't have icons in the TabNavigator). Otherwise the text will be pushed toward bottom of Tab.
For example:
const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen
}, {
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'black',
showIcon: false, //do this
labelStyle: {
fontSize: 20,
textAlign: 'center',
},
tabStyle: {
backgroundColor: 'grey',
marginTop: 0,
textAlign: 'center',
justifyContent: 'center',
textAlignVertical: "center"
}
}
score:1
first add in parent view flex:1, justifyContent: 'center', alignItems: 'center'
then in text add textAlign:'center'
score:1
used
textalign:center
at the view
score:3
Set in Parent view
justifyContent:center
and in child view alignSelf:center
score:3
Okey , so its a basic problem , dont worry about this just write the <View> component and wrap it around the <Text> component
<View style={{alignItems: 'center'}}>
<Text> Write your Text Here</Text>
</View>
alignitems:center is a prop use to center items on crossaxis
justifycontent:'center' is a prop use to center items on mainaxis
score:5
Wherever you have Text
component in your page just you need to set style of the Text
component.
<Text style={{ textAlign: 'center' }}> Text here </Text>
you don't need to add any other styling property, this is spectacular magic it will set you text in center of the your UI.
score:5
Simple add
textAlign: "center"
in your styleSheet, that's it. Hope this would help.
edit: "center"
score:6
<View style={{backgroundColor: 'blue', justifyContent: 'center' }}>
<Text style={{ fontSize: 25, textAlign: 'center' }} >A</Text>
</View>
score:7
You can use alignSelf
property on Text component
{ alignSelf : "center" }
score:9
The following property can be used: {{alignItems: 'center'}}
becaus you are using item <Text>
not "string".
<View style={{alignItems: 'center'}}>
<Text> Hello i'm centered text</Text>
</View>
score:11
this is a example for Horizontal and Vertical alignment simultaneously
<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
<Text style={{width: '100%',textAlign: 'center'}} />
</View>
score:13
Horizontal and Vertical center alignment
<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text> Example Test </Text>
</View>
score:17
Set these styles to image component: { textAlignVertical: "center", textAlign: "center" }
score:17
textAlignVertical: "center"
is the real magic.
score:85
Already answered but I'd like to add a bit more on the topic and different ways to do it depending on your use case.
You can add adjustsFontSizeToFit={true}
(currently undocumented) to Text
Component to auto adjust the size inside a parent node.
<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>
You can also add the following in your Text Component:
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
Or you can add the following into the parent of the Text component:
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text>Hiiiz</Text>
</View>
or both
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
or all three
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text adjustsFontSizeToFit={true}
numberOfLines={1}
style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
It all depends on what you're doing. You can also checkout my full blog post on the topic
Source: stackoverflow.com
Related Query
- How can I center the text in the headers for an AG-grid control?
- How to include TouchableOpacity within Text ReactNative
- How to load local text file into string variable in ReactNative Project?
- How to center text in Facebook Login Button for React Native (Android)?
- How can I center my clip-path's text relatively to the viewport and display all the clip-path's text?
- How do I center text over a div that dynamically changes width within another div?
- How to center placeholder and text in React Material UI TextField
- How to align center text or div item with Ant Design Space in Reactjs?
- How to center text within a border-radius?
- How put a text at the center of a div without using "text-align:center"?
- How to align text to center in Accordion Component of Material-UI?
- how to evenly center image and text on the page
- How to center text in InputBase from material-ui
- React-Chartjs-2 - How to make the label text stayed center wrapped?
- How can I center Logo and text in material-ui Appbar?
- How to center the text in MUI Breadcrumbs
- How do i rotate around the center of the text geometry in react-three-fiber?
- ReactJS: How can I center the placeholder and text for Material-UI's <DatePicker/>?
- How to center a text in mui snackbar
- How can I center text in a button component using styled-components?
- how to align the butto, textfield and text in the center in react?
- In reactJS, how to copy text to clipboard?
- ReactNative: how to center text?
- How to center a component in MUI and make it responsive?
- How to correctly catch change/focusOut event on text input in React.js?
- How to select all text in input with Reactjs, when it focused?
- How to render a multi-line text string in React
- How to align text input correctly in react native?
- How to align horizontal icon and text in MUI
- In Sublime Text 3, how do you enable Emmet for JSX files?
More Query from same tag
- How to replace class component's function.bind(this) in functional component in Reactjs (pagination)
- call react function inside anonymous function
- ReactTable is ordering elements vertically
- Postman works fine with App Script, React forms fail
- Updating dhtmlx-sheduler uisng React
- deploying nextjs app to elastic beanstalk
- Force react proxy to proxy certain endpoint even with accept: text/html
- creating timer with react
- How to hide multiple fields in react-admin ShowView?
- Only add item to array if unique otherwise delete - React
- Function passed as props not a function
- Adapting a 'custom' component to redux-forms?
- React return Outlet component when I use render in route
- How to load components in react router only when required?
- Re-ender child component everytime there is a change in props value
- Unable to render content from api call in componentDidMount()
- When Passing props through 2 components I loose the ability to use .map on the array
- Javascript memory optimization when array shifting
- Checking value in array by map function and also displaying alert box just once
- SideNav from Materializecss stops working in React Web App
- How can I correct the typescript error? (prop-Types library)
- Highlight the selected item of a navigation pane
- React class component not updating state
- Can't get Google Ads to show in React no matter what I do
- Pass value using button from array
- Reactjs could not alert data when button is Clicked
- react: Convert from Class to functional component with state
- redux-persist: What's the difference between persist and rehydrate?
- Is there a way to know does Link to pdf will not work on click?
- when to use this.props.children and why