Photo by Zan on Unsplash

Integration of Native Android Fragments (and Views) into React Native

Content

  • Intro
  • Creating MyXXXPackage class
  • Creating native view component (and from XML files)
  • Rendering native view component in React Native
  • Committing fragments to the views
  • Rendering fragment's placeholder
  • Finding the ID of the view in React Native
  • Sending the command to commit fragment from the React Native to a native component
  • Receiving commands in Android
  • Adding measure layout method
  • Event types
  • Registering events for Native component
  • Sending received data from component to JS
  • Handling data from android in React Native

So, Where to start?

React Native Package — creating MyXXXPackage class

  • createViewManagers is responsible for UI components
  • createNativeModels is responsible for handling native code (without UI)

Native Module Integration Example

  • We are extending ReactContexBaseJavaModule
  • We need to implement the getName method (that’s how our package will be named in JS side)
  • We are using ReactMethod annotation to tell RN bridge, which methods it should register and expose on the JS side.
  • We have quite enough options on how to send the result back to JS side callbacks, promises or event emitting.

Native (UI) Components — Native Views

Intro

For take-away

Creating Native Component in Android (and from XML files)

Rendering Native View in React Native

Native (UI) Components — Native Fragments

Intro

  • Fragments are just another part of UI in Android (but with slightly different lifecycle).
  • We can add them to Views, or "make them visible for the user" by executing transactional operations and calling commit() method.
  • These transactional operations are executed with Fragments Manager.
Example of adding Fragments to tie View (in fact, we are replacing displayed view with a fragment)
  • android.app.fragment uses FragmentManager
  • android.support.fragment or androidx.fragment.app.fragment uses SupportFragmentManager

Implementation — Changes in the MainActivity.java

Committing Fragments to the Views

Rendering fragment placeholder

Find the ID of the view in React Native

Sending the instruction for committing Fragment

Supporting commands in Android

Add measure layout method if needed

Sending Data to React Native from Native Component

Event Types

  • DirectEvents available to RN bridge through getExportedCustomDirectEventTypeConstants method
  • BubblingEvents available RN bridge through getExportedCustomBubblingEventTypeConstants method
getBubblingEventTypeConstants()
getDirectEventTypeConstants()

Sending data from Native Component To React Native

Handling data from Android in React Native

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stefan Majiros

Stefan Majiros

43 Followers

Senior React Native Developer @stefan-majiros.com (Mobile MVP Dev Agency). Working w/ AWS Amplify and Firebase. Open to remote dev projects w/ my own clients!