This document summarizes Janic Duplessis's contribution to React Native for adjusting text size to fit its container. It describes how text rendering works in React Native, involving view managers, shadow nodes and JavaScript. It then outlines Janic's process of adding the ability to loop through text spans and reduce font sizes until the text fits, which took a few hours and resulted in an accepted pull request. The document encourages learning about open source dependencies and contributing.

1. 📚 ☕ ⚛ 🦄

2. Janic Duplessis
Software engineer @th3rdwave
React Native core contributor

3. Th3rdwave
Coffee shop directory and community

4. The Tale of a React Native
Contribution...
📚
☕
⚛
🦄

5. We 💜 designers but...
Expectation Reality

6. Just change the font size? 😜

7. React Native to the rescue!

8. Let's do it!!

9. SHIP IT!!!

10. LOL JK! We test on
Android right?!?

11. 😭😭😭

12. Ohhh noooo

13. Deep dive into your
node_modules

14. Native UI Components
• View Manager 🤖
• Shadow Node 🧘
• JavaScript ⚛

15. View Manager
• Defines and set props using the @ReactProp
annotation
• Creates the view instance
• Runs on the UI thread

16. Shadow Node
• Responsible for layout
• Can also define props using the @ReactProp
annotation
• Runs on a background thread

17. JavaScript
• Use requireNativeComponent to get your
component
• Use it just like any React component!

18. Turns out that text is hard 😱

19. Spanned Text
• Text can have different styles attached at different
ranges

20. Intrinsic size
• This is the preferred size for the view
• Text needs to be measured
margin
padding
intrinsic size

21. Why is this important? 🤔

22. The algorithm
layout = measureText(text)
if (adjustsTextToFit) {
while (!fits(layout)) {
text = reduceFontSize(text)
layout = measureText(text)
}
}

23. Let's start with the easy part...
ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java

24. And on to the fun part...

25. 😱😱😱
• Extract the measure code to a separate method
• Use the Layout instance returned by our new
measure method to figure out if text fits
• Loop through spans using Spannable.getSpans and
replace those of type ReactAbsoluteSizeSpan with
a new one with smaller font size

26. A few hours later... 🎉 🎉 🎉

27. Based on a true story
https://github.com/facebook/react-
native/pull/26389

28. Open source is fun
• Own your dependencies, don't be scared of your
node_modules
• Learn and grow
• Everyone wins

29. Thanks for having me!!1
@janicduplessis
janicduplessis
Check out Th3rdwave on the App
Store or Play Store