React Native — How to center Text and auto adjust font size inside a View Component

Vyga Development
Jul 19, 2017 · 4 min read

SEE UPDATE AT BOTTOM.

So you’re having a hard time fitting your text in a node properly?

Well React Native has some undocumented properties you can add to to the <Text> Component (that currently not available on their Text Components Docs Page) but let’s start with the problem.

You have Text that looks like this:

React Native List of Text Components (before fitted)

Your code prolly looks something like this:

let array=[{"subreddit_name_prefixed":"r/worldnews",color:"#FFBC42"},{"subreddit_name_prefixed":"r/politics",color:"#80CED7"},{"subreddit_name_prefixed":"r/PublicBelief",color:"#ABC4AB"},{"subreddit_name_prefixed":"r/inthenews",color:"#E26D5A"}].......<View style={{flex: 1,height,width,justifyContent: "center",flexDirection:"row",alignItems: "center",backgroundColor: "#F5FCFF",}}>
{array.map((item,i) => {
return (<TouchableOpacity key={i}
style={[{
flex:1,
backgroundColor:'rgba(0,0,0,0)',
justifyContent:"center",
alignItems:'center',
borderRadius:10,
borderWidth:1,
borderWidth:2,
borderColor:'rgba(0,0,0,.3)',
height:40,
margin:3,
backgroundColor:item.color,
}]}>
<Text
//adjustsFontSizeToFit={true}
//numberOfLines={1}
style={{
textAlignVertical: "center",
textAlign: "center",
backgroundColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,.3)',
}}>{item.subreddit_name_prefixed}</Text>
</TouchableOpacity>)
})
}
</View>

So you looked around and saw this

this https://github.com/facebook/react-native/issues/728

and this https://github.com/facebook/react-native/pull/4026

and this https://stackoverflow.com/questions/37571418/reactnative-how-to-center-text

Nothing really solved this issue so you use this: https://github.com/ReactNativeBox/react-native-textfit

BUT WAIT, don’t do it sicko, because you prolly never checked out the React Native Text Library itself before you did did you? Shame on you. You can do this by running the following from your Projects Root Directory.

open node_modules/react-native/Libraries/Text

What I found/ what you’re looking for is https://github.com/facebook/react-native/blob/master/Libraries/Text/RCTShadowText.h

These are some (or all? — I haven’t looked through all the Text Folders Files) of the available Text Component’s parameters you can use. Where it would look like the following in yourrender() function:

<Text
color={Color}
fontFamily={String}
fontSize={Float}
fontWeight={String}
fontStyle={String}
fontVariant={NSArray}
isHighlighted={Boolean}
letterSpacing={Float}
lineHeight={Float}
numberOfLines={Integer}
ellipsizeMode={NSLineBreakMode}
shadowOffset={CGSize}
textAlign={NSTextAlignment}
writingDirection={NSWritingDirection}
textDecorationColor={Color}
textDecorationStyle={UnderlineStyle}
textDecorationLine={TextDecorationLineType}
fontSizeMultiplier={Float}
allowFontScaling={Boolean}
opacity={Float}
textShadowOffset={CGSize}
textShadowRadius={Float}
textShadowColor={Color}
adjustsFontSizeToFit={Boolean}
minimumFontScale={Float}
selectable={Boolean}>
Hiiiizz
</Text>

After discovering this I found two that caught my eye adjustsFontSizeToFit and allowFontScaling and ended up just using adjustsFontSizeToFit .

My Final Code:

<View style={{flex: 1,height,width,justifyContent: "center",flexDirection:"row",alignItems: "center",backgroundColor: "#F5FCFF",}}>
{array.map((item,i) => {
return (<TouchableOpacity key={i}
style={[{
flex:1,
backgroundColor:'rgba(0,0,0,0)',
justifyContent:"center",
alignItems:'center',
borderRadius:10,
borderWidth:1,
borderWidth:2,
borderColor:'rgba(0,0,0,.3)',
height:40,
margin:3,
backgroundColor:item.color,
}]}>
<Text
adjustsFontSizeToFit
numberOfLines={1}
// allowFontScaling
style={{
/*
* The following styles may cause conflict if used
* in conjecture with 'numberOfLines'
* or 'adjustsFontSizeToFit':
=> fontSize, height, width, flex, margin
*/
textAlignVertical: "center",
textAlign: "center",
backgroundColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,.3)',
}}>{item.subreddit_name_prefixed}</Text>
</TouchableOpacity>)
})
}
</View>

Result:

Best Practice:

After playing with it for a while I noticed some caveats while using adjustsFontSizeToFit and this is prolly why it’s not documented yet.

I would get weird results when using certain styles in combination with the Text Component that include: fontSize, height, width, flex, and margin just to name a few, this will result in it it looking something the following:

When using adding {flex:1} to styles
When declaring width (eg {width:50}) in styles

Hope this helps someone.

This is my first Medium blog post (my official blog is at http://vyga.io/blog) and I’d like to continue taking a deeper dive into some overlooked or area’s that are not discussed on other blogs in React Native, and that may weight on the success of this post, so if you this and/or this was helpful please say so in the comments and I’d love to do it again.

Also if I missed anything or if I could have done anything better let me know. Thanks again!

UPDATE:

See the React Native Text docs if this has updated by clicking below.

TLDR;

Here are some updates I wanted to add as I found myself kept refering back to this and wanted a cheetsheet of sorts.

Use the following props in your Text components:

1. First try adding the following style to your styles StyleSheet.create({})

centerText:{textAlign:"center",textAlignVertical:"center"},

then use in style:

EXAMPLE 1:

<Text style={[styles.centerText]}>Am I centered?</Text>

2. Use adjustsFontSizeToFit

And optionally use minimumFontScale (with value 0 to 1) in conjecture.

EXAMPLE 2:

<Text adjustsFontSizeToFit minimumFontScale={.5}>Am I centered?</Text>

Note:

Notices confilcts when using the following styles:

fontSize, height, width, flex, margin

So first try omitting them.

3. Use numberOfLines

This will limit numbers of lines shown before truncated.

EXAMPLE 3:

<Text numberOfLines={1}>Limit to One Line!</Text>

4. Use allowFontScaling

Specifies whether fonts should scale to respect Text Size accessibility settings.

EXAMPLE 4:

<Text allowFontScaling>Am I centered?</Text>

5. Clap if you liked this post.

also to follow me on twitter at @vygaio or see my other medium account’s most I’m going to try to use more often ʇʇǝɹɹɐƃ

Vyga Development

Written by

Web, Cloud and Mobile Development based in Denver. @garriiitt