SlideShare a Scribd company logo
📚 ☕ ⚛ 🦄
Janic Duplessis
Software engineer @th3rdwave
React Native core contributor
Th3rdwave
Coffee shop directory and community
The Tale of a React Native
Contribution...
📚
☕
⚛
🦄
We 💜 designers but...
Expectation Reality
Just change the font size? 😜
React Native to the rescue!
Let's do it!!
SHIP IT!!!
LOL JK! We test on
Android right?!?
😭😭😭
Ohhh noooo
Deep dive into your
node_modules
Native UI Components
• View Manager 🤖
• Shadow Node 🧘
• JavaScript ⚛
View Manager
• Defines and set props using the @ReactProp
annotation
• Creates the view instance
• Runs on the UI thread
Shadow Node
• Responsible for layout
• Can also define props using the @ReactProp
annotation
• Runs on a background thread
JavaScript
• Use requireNativeComponent to get your
component
• Use it just like any React component!
Turns out that text is hard 😱
Spanned Text
• Text can have different styles attached at different
ranges
Intrinsic size
• This is the preferred size for the view
• Text needs to be measured
margin
padding
intrinsic size
Why is this important? 🤔
The algorithm
layout = measureText(text)

if (adjustsTextToFit) {

while (!fits(layout)) {

text = reduceFontSize(text)

layout = measureText(text)

}

}

Let's start with the easy part...
ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java
And on to the fun part...
😱😱😱
• 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
A few hours later... 🎉 🎉 🎉
Based on a true story
https://github.com/facebook/react-
native/pull/26389
Open source is fun
• Own your dependencies, don't be scared of your
node_modules
• Learn and grow
• Everyone wins
Thanks for having me!!1
@janicduplessis
janicduplessis
Check out Th3rdwave on the App
Store or Play Store

More Related Content

Similar to The Tale of a React Native Contribution

RichFaces CDK: Rapid JSF Component Development
RichFaces CDK: Rapid JSF Component DevelopmentRichFaces CDK: Rapid JSF Component Development
RichFaces CDK: Rapid JSF Component Development
Lukáš Fryč
 
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa..."Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
Fwdays
 
Integrating react in django while staying sane and happy
Integrating react in django while staying sane and happyIntegrating react in django while staying sane and happy
Integrating react in django while staying sane and happy
Fröjd Interactive
 
Server-Side JavaScript with Nashorn
Server-Side JavaScript with NashornServer-Side JavaScript with Nashorn
Server-Side JavaScript with Nashorn
Daniel Woods
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I started
sparkfabrik
 
Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)
kbekessy
 
React and d3
React and d3React and d3
React and d3
Freddy Rangel
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
Mike Melusky
 
Java Script Template Engine 비교하기
Java Script Template Engine 비교하기Java Script Template Engine 비교하기
Java Script Template Engine 비교하기
SeongSik Choi
 
Django course
Django courseDjango course
Django course
Nagi Annapureddy
 
Saas rad with django, django rest framework
Saas rad with django, django rest frameworkSaas rad with django, django rest framework
Saas rad with django, django rest framework
Marco Montanari
 
JSR381 Visual Recognition for Java.pdf
JSR381 Visual Recognition for Java.pdfJSR381 Visual Recognition for Java.pdf
JSR381 Visual Recognition for Java.pdf
Zoran Sevarac, PhD
 
Anatomy of a Progressive Web App
Anatomy of a Progressive Web AppAnatomy of a Progressive Web App
Anatomy of a Progressive Web App
Mike North
 
What I Learned Building a Toy Example to Crawl & Render like Google
What I Learned Building a Toy Example to Crawl & Render like GoogleWhat I Learned Building a Toy Example to Crawl & Render like Google
What I Learned Building a Toy Example to Crawl & Render like Google
Catalyst
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
Christian Heilmann
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
Elad Hirsch
 
iOS storyboard
iOS storyboardiOS storyboard
iOS storyboard
MinHyeok Kim
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
Visual Engineering
 
Enhance the Look of Your App With Text Kit
Enhance the Look of Your App With Text KitEnhance the Look of Your App With Text Kit
Enhance the Look of Your App With Text Kit
Matteo Battaglio
 
Discover Music
Discover MusicDiscover Music
Discover Music
Patrick Sheridan
 

Similar to The Tale of a React Native Contribution (20)

RichFaces CDK: Rapid JSF Component Development
RichFaces CDK: Rapid JSF Component DevelopmentRichFaces CDK: Rapid JSF Component Development
RichFaces CDK: Rapid JSF Component Development
 
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa..."Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
 
Integrating react in django while staying sane and happy
Integrating react in django while staying sane and happyIntegrating react in django while staying sane and happy
Integrating react in django while staying sane and happy
 
Server-Side JavaScript with Nashorn
Server-Side JavaScript with NashornServer-Side JavaScript with Nashorn
Server-Side JavaScript with Nashorn
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I started
 
Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)
 
React and d3
React and d3React and d3
React and d3
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
 
Java Script Template Engine 비교하기
Java Script Template Engine 비교하기Java Script Template Engine 비교하기
Java Script Template Engine 비교하기
 
Django course
Django courseDjango course
Django course
 
Saas rad with django, django rest framework
Saas rad with django, django rest frameworkSaas rad with django, django rest framework
Saas rad with django, django rest framework
 
JSR381 Visual Recognition for Java.pdf
JSR381 Visual Recognition for Java.pdfJSR381 Visual Recognition for Java.pdf
JSR381 Visual Recognition for Java.pdf
 
Anatomy of a Progressive Web App
Anatomy of a Progressive Web AppAnatomy of a Progressive Web App
Anatomy of a Progressive Web App
 
What I Learned Building a Toy Example to Crawl & Render like Google
What I Learned Building a Toy Example to Crawl & Render like GoogleWhat I Learned Building a Toy Example to Crawl & Render like Google
What I Learned Building a Toy Example to Crawl & Render like Google
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
iOS storyboard
iOS storyboardiOS storyboard
iOS storyboard
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
 
Enhance the Look of Your App With Text Kit
Enhance the Look of Your App With Text KitEnhance the Look of Your App With Text Kit
Enhance the Look of Your App With Text Kit
 
Discover Music
Discover MusicDiscover Music
Discover Music
 

Recently uploaded

Optimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptxOptimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptx
WebConnect Pvt Ltd
 
Refactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contextsRefactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contexts
Michał Kurzeja
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
kalichargn70th171
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
ervikas4
 
What is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdfWhat is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdf
kalichargn70th171
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
ICS
 
Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
Jhone kinadey
 
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdfTheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
Ortus Solutions, Corp
 
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical OperationsEnsuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
OnePlan Solutions
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
michniczscribd
 
Microsoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptxMicrosoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptx
jrodriguezq3110
 
Stork Product Overview: An AI-Powered Autonomous Delivery Fleet
Stork Product Overview: An AI-Powered Autonomous Delivery FleetStork Product Overview: An AI-Powered Autonomous Delivery Fleet
Stork Product Overview: An AI-Powered Autonomous Delivery Fleet
Vince Scalabrino
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
kalichargn70th171
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
Paul Brebner
 
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Ortus Solutions, Corp
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
confluent
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
sandeepmenon62
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
VictoriaMetrics
 

Recently uploaded (20)

Optimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptxOptimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptx
 
Refactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contextsRefactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contexts
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
 
What is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdfWhat is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdf
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
 
Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
 
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdfTheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
 
bgiolcb
bgiolcbbgiolcb
bgiolcb
 
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical OperationsEnsuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
 
Microsoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptxMicrosoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptx
 
Stork Product Overview: An AI-Powered Autonomous Delivery Fleet
Stork Product Overview: An AI-Powered Autonomous Delivery FleetStork Product Overview: An AI-Powered Autonomous Delivery Fleet
Stork Product Overview: An AI-Powered Autonomous Delivery Fleet
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
 
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
 

The Tale of a React Native Contribution