SlideShare a Scribd company logo
BUILDING NATIVE MODULES
Ebou Jobe
About Me!
3rd Year Software Eng. Student McGill University
IOS / Android Developer
Why native modules ?
 High performance e.g. Image Processing
 Platform API e.g. sensors
 Integrate React Native to an existing IOS/Android app
 Native features that React Native doesn’t support
React Native Architecture
BRIDGE
Native Realm JavaScript Realm
BRIDGING IN REACT NATIVE
BRIDGE
 All communications passes through the bridge
 Communications are asynchronous
MessageQueue
 Where the communication happens
 Everything is been passed through the messageQueue.
 Layout measurement, network request, user interaction, render request etc.
rn-snoopy
MessageQueue Congestion
MessageQueue Congestion
Avoiding MessageQueue Congestion
 Keep passes across the bridge minimal!
 Keep your data flat
 Don’t send files over the bridge.
BUILDING YOUR OWN MODULES
MESSAGES AND ARGUMENTS
JS -> NATIVE
 Method calls
NATIVE -> JS
 Event Emitter
 Callbacks
 Promises
NATIVE MODULES
NATIVE MODULES
 Methods
 Constants (Synchronous)
NATIVE UI COMPONENTS
 Views
IOS
JavaScript Side
Android
Android
JavaScript side
react-native-create-bridge
 Supports Objective/Java
 Kotlin/Swift
QUESTIONS ?
THANK YOU!

More Related Content

Similar to Native modules

Vishnu(java)
Vishnu(java)Vishnu(java)
Vishnu(java)
venkata vishnu
 
Sniffing the Mobile Context
Sniffing the Mobile ContextSniffing the Mobile Context
Sniffing the Mobile Context
Andy Davies
 
Comparing Native and React Native App Development Company.pdf
Comparing Native and React Native App Development Company.pdfComparing Native and React Native App Development Company.pdf
Comparing Native and React Native App Development Company.pdf
John William
 
Yi Yang_Resume
Yi Yang_ResumeYi Yang_Resume
Yi Yang_Resume
Yi Yang
 
Cross platform mobile application architecture for enterprise
Cross platform mobile application architecture for enterpriseCross platform mobile application architecture for enterprise
Cross platform mobile application architecture for enterprise
Venkat Alagarsamy
 
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery MobileBuilding Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Jon Cortez
 
Java__J2EE_Gaurav_Singh
Java__J2EE_Gaurav_SinghJava__J2EE_Gaurav_Singh
Java__J2EE_Gaurav_Singh
Gaurav Singh
 
Javascript Client & Server Architectures
Javascript Client & Server ArchitecturesJavascript Client & Server Architectures
Javascript Client & Server Architectures
Pedro Melo Pereira
 
Cross-platform mobile that Works - Coobers
Cross-platform mobile that Works - CoobersCross-platform mobile that Works - Coobers
Cross-platform mobile that Works - Coobers
Coobers
 
Flu3nt highlights
Flu3nt highlightsFlu3nt highlights
Flu3nt highlights
dswork
 
Introduction to React Native - Lev Vidrak, Wix
Introduction to React Native - Lev Vidrak, WixIntroduction to React Native - Lev Vidrak, Wix
Introduction to React Native - Lev Vidrak, Wix
DroidConTLV
 
$Resume2016 edward chen
$Resume2016 edward chen$Resume2016 edward chen
$Resume2016 edward chen
ed Chen
 
$resume2016_EdwardChen
$resume2016_EdwardChen$resume2016_EdwardChen
$resume2016_EdwardChen
ed Chen
 
React native
React nativeReact native
React native
🍉 Renan Araujo
 
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
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
Aniket Srivastava
 
AdamVisserResume
AdamVisserResumeAdamVisserResume
AdamVisserResume
Adam Visser
 
React native - under the bridge - react week NYC
React native - under the bridge - react week NYCReact native - under the bridge - react week NYC
React native - under the bridge - react week NYC
Chen Feldman
 
An Inforgraphic to Learn React Native
An Inforgraphic to Learn React NativeAn Inforgraphic to Learn React Native
An Inforgraphic to Learn React Native
Paddy Lock
 
React Native - CirebonDev
React Native - CirebonDevReact Native - CirebonDev
React Native - CirebonDev
Ayat Maulana
 

Similar to Native modules (20)

Vishnu(java)
Vishnu(java)Vishnu(java)
Vishnu(java)
 
Sniffing the Mobile Context
Sniffing the Mobile ContextSniffing the Mobile Context
Sniffing the Mobile Context
 
Comparing Native and React Native App Development Company.pdf
Comparing Native and React Native App Development Company.pdfComparing Native and React Native App Development Company.pdf
Comparing Native and React Native App Development Company.pdf
 
Yi Yang_Resume
Yi Yang_ResumeYi Yang_Resume
Yi Yang_Resume
 
Cross platform mobile application architecture for enterprise
Cross platform mobile application architecture for enterpriseCross platform mobile application architecture for enterprise
Cross platform mobile application architecture for enterprise
 
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery MobileBuilding Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
 
Java__J2EE_Gaurav_Singh
Java__J2EE_Gaurav_SinghJava__J2EE_Gaurav_Singh
Java__J2EE_Gaurav_Singh
 
Javascript Client & Server Architectures
Javascript Client & Server ArchitecturesJavascript Client & Server Architectures
Javascript Client & Server Architectures
 
Cross-platform mobile that Works - Coobers
Cross-platform mobile that Works - CoobersCross-platform mobile that Works - Coobers
Cross-platform mobile that Works - Coobers
 
Flu3nt highlights
Flu3nt highlightsFlu3nt highlights
Flu3nt highlights
 
Introduction to React Native - Lev Vidrak, Wix
Introduction to React Native - Lev Vidrak, WixIntroduction to React Native - Lev Vidrak, Wix
Introduction to React Native - Lev Vidrak, Wix
 
$Resume2016 edward chen
$Resume2016 edward chen$Resume2016 edward chen
$Resume2016 edward chen
 
$resume2016_EdwardChen
$resume2016_EdwardChen$resume2016_EdwardChen
$resume2016_EdwardChen
 
React native
React nativeReact native
React native
 
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 
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
AdamVisserResume
AdamVisserResumeAdamVisserResume
AdamVisserResume
 
React native - under the bridge - react week NYC
React native - under the bridge - react week NYCReact native - under the bridge - react week NYC
React native - under the bridge - react week NYC
 
An Inforgraphic to Learn React Native
An Inforgraphic to Learn React NativeAn Inforgraphic to Learn React Native
An Inforgraphic to Learn React Native
 
React Native - CirebonDev
React Native - CirebonDevReact Native - CirebonDev
React Native - CirebonDev
 

Recently uploaded

GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Ukraine
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
leebarnesutopia
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's TipsGetting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
ScyllaDB
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
Tobias Schneck
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 

Recently uploaded (20)

GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's TipsGetting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 

Native modules

Editor's Notes

  1. Downside is it prints all the information passing through the bridge We have a solution for this.
  2. if a touch event happens I am going to see the x location of the touch event calculate new opacity , new translation, set state and re-render Data crosses the bridge on every frame Send the data from native to javaScript calculate the new opacity and x traslation for this case