Initial implementation of adjustsFontSizeToFit.

[MattFoley]

No description provided.

[MattFoley]

It had been way too long to fix it up myself, so I've reopened the PR. Here's the original. #2327

[facebook-github-bot]

By analyzing the blame information on this pull request, we identified @nicklockwood, @sahrens and @a2 to be potential reviewers.

[MattFoley]

This should be stable enough to merge now.

[MattFoley]

Keeping this squashed on master led to a missed file. Corrected.

[facebook-github-bot]

@MattFoley updated the pull request.

[MattFoley]

@nicklockwood, @sahrens, @a2 Correct me if I'm wrong, but the tests failing after my last commit/squash are not due to my code changes, correct?

[brentvatne]

Cool :)

[nicklockwood]

Did something go wrong with the merge/rebase?

The adjustsFontSizeToFit and minimumFontScale are defined on both RCTText and RCTShadowText, but the ones on RCTShadowText aren't used anywhere in the code, and the ones on RCTText aren't exported in RCTTextManager.

Also, you don't seem to have added the new props to Text.js or TextStylePropTypes.js

[MattFoley]

I think that's just misunderstanding on my part, and the age of this PR. Let me remove them from RCTShadowText.

I was assuming that RCTTextManager just needed the two RCT_EXPORT_SHADOW_PROPERTY lines it has, is that not correct? Give me a bit and I will add them to Text.js and TextStylePropTypes.js.

[nicklockwood]

RCT_EXPORT_SHADOW_PROPERTY exports properties on the shadow view. To export properties on the view you need RCT_EXPORT_VIEW_PROPERTY. I'm not sure how this could ever have worked in its current form.

[MattFoley]

Miracle of science I suppose.

[MattFoley]

Are you sure that RCT_EXPORT_VIEW_PROPERTY is correct in this instance? It's not used for RCTText at all. (I said project originally, I meant the RCTText class and related.)

[MattFoley]

You know, I think I see part of what's missing. RCTText must be an odd case. From what I can tell, all properties of RCTText are exported as shadow properties, and then passed into RCTText from RCTShadowText via NSTextContainer, NSTextStorage, and NSLayoutManager. That being said, there were a few lines in RCTShadowText that have been squashed out. Updating now.

[facebook-github-bot]

@MattFoley updated the pull request.

[nicklockwood]

@MattFoley thanks, that makes more sense. Is there any reason that this resizing logic can't be implemented on the shadow view though? It seems like it only relies on the view frame, which is calculated on the shadow side.

The reason we have this thread architecture is because calculating text layout is fairly expensive, so we do it off the main thread. But it seems like we lose the benefit of that if we then re-calculate it on the main thread in order to do the size adjustment.

[MattFoley]

That makes sense. I think I'm mainly doing it on the main thread now so that I knew the font was only modified after the frame was completely set for the view. I'm trying to move it out to the RCTextShadowView now without much luck yet.

[MattFoley]

Ah, immediately after typing that I figured out what I was doing wrong. Give me a bit and I'll have this cleaned up and moved out to RCTShadowText.

[facebook-github-bot]

@MattFoley updated the pull request.

[facebook-github-bot]

@MattFoley updated the pull request.

[nicklockwood]

This looks great, thanks!

@facebook-github-bot import

[MattFoley]

I'm going to run some more in depth tests on this @nicklockwood with some of my own projects that are using this, just to make sure everything is solid on master. But yay! 🎉

[facebook-github-bot]

Thanks for importing. If you are an FB employee go to https://our.intern.facebook.com/intern/opensource/github/pull_request/1504537549873434/int_phab to review.

[MattFoley]

Note, I had to update this PR to fix a failing test due to a previous rebase.

[skevy]

@facebook-github-bot shipit

[skevy]

@MattFoley thank you SO much for sticking with this for so long. Sorry it took so long to get it merged!

[ghost]

Thanks for importing.If you are an FB employee go to Phabricator to review internal test results.

[marcshilling]

@skevy @MattFoley 👏👏👏👏

[MattFoley]

@skevy Thanks!!!!!!!!!!!!!!!!!!!!!!!!

ps. @brentvatne it happened. 🎉

[collinglass]

👏👏👏

[chandlervdw]

@MattFoley so, is this available in react-native@0.32 or no? Thanks so much for this!

[MattFoley]

It's in .33rc I think, you're welcome!

Sent from my iPhone

On Sep 2, 2016, at 7:58 AM, Chandler Van De Water notifications@github.com wrote:

@MattFoley so, is this available in react-native@0.32 or no? Thanks so much for this!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[pyankoff]

Text gets truncated a little bit (maybe because of large font?). Easily solved by adding style={{marginVertical: 6}} tho.

[jasan-s]

can adjustsFontSizeToFit work with TextInput? On the user input

[garrettmac]

You can add adjustsFontSizeToFit={true} (currently undocumented) to you 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>

before

after

It all depends on what you're doing. You can also checkout my full blog post on the topic

https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b

[mkozhukharenko]

it does not work for Android in react 47.1 and does not work perfectly for IOS

[AfiyaA]

Does this work for Android? It works for me for IOS but need Android support as well.

[skv-headless]

I should be doable for android https://react-native.canny.io/feature-requests/p/textandroid-autosizing-support. But I failed to implement it maybe someone more experienced with react-native can do it.

[cmacdonnacha]

Would be great to get this on Android too!

[yurykorzun]

We desperately need this on Android

[cmacdonnacha]

I see this is closed, was it merged in?