React Native — How to center Text and auto adjust font size inside a View Component
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:
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/TextWhat 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:
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 ʇʇǝɹɹɐƃ
