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
- Why my debounce function returns undefined value?
- Write data from database to inputs handled with react-hook-form
- How to properly use discriminate union in typescript so when one property is true two additional property is required
- How do I get a component to "listen" to changes in global state in a sibling component?
- How can you detect if your React app has been rendered on the server?
- React DatePicker range with one input Style
- Test the react child component after mounted asynchronously using enzyme
- How do you insert multiple objects into one mongoDB post request
- How do I add rows to a table in React Hooks without getting duplicates?
- React. In class component Return doesnt work
- Need help structuring a double for loop with JSX tags on a two dimensional array
- React component - onClick and nothing happens, why is that?
- React siblings components communication
- Get class instance of ReactElement
- ReactStrap: Display default value in Input of type date
- Tiles not ordered correctly when using LeafletJS with ReactJS
- reactjs select radio input based on the props
- onMouseDown/onClick event on <div> inside <div>
- ReactJs 0.14 - Invariant Violation: Objects are not valid as a React child
- sending form data onto backend
- After Simulate('change') state is not updated
- React state changes but background does not change
- reactjs user authentication logic
- Detect new values after firing an action then pass them an attribute
- How to use slice for update an object in array?
- Playwright test fails when using waitForResponse
- Wordpress Gutenberg React – render variable with HTML
- How do I edit my axios post request so that I successfully send a put request?
- react textarea doesn't show new lines
- Using async await on ReactJS with Babel leads to Error: Unexpected token