Now that we have seen a bit of the internals of React Native and how to manipulate the root container, our next step is to expose native functionality to our JavaScript code. A good case to learn this with is adding persistence to our app.

React Native has some built-in persistence mechanisms, but we will take it a step further by storing our app's data in the macOS keychain, to ensure that no other app can access it.

This and the following lessons will be the most detailed in the course, and a lot of the functionality we will add into our app will pivot on this knowledge, so pay attention!

About the React Native bridge#

We've briefly mentioned the React Native bridge before, but it's now time to expand on this. The bridge allows our JavaScript code to communicate with native code. We will create our very own private API to call native functionality from our JavaScript. React Native provides certain macros that auto-generate code and will create JavaScript-callable bindings.

Adding keychain framework#

We will start by adding a native dependency to write data to the macOS keychain. We will modify our project's Podfile, by adding Keychain Access as a dependency to allow us to write and read from the keychain. A quick look at the README should give you an idea of how to use its API.

target 'buildingApps-macOS' do

  platform :macos, '10.13'

  use_native_modules!

  use_react_native!(

    :path => '../node_modules/react-native-macos',

    # To use Hermes, install the `hermes-engine-darwin` npm package, e.g.:

    #   $ yarn add 'hermes-engine-darwin@~0.5.3'

    #

    # Then enable this option:

    #   :hermes_enabled => true

  )

  # Pods specifically for macOS target

  pod 'KeychainAccess'

end

Add the pod 'KeychainAccess' line, then in your terminal run yarn macos:install and you will see CocoaPods installing our new native dependency.

Creating the bridging code#

We will create a new Obj-C file (in XCode, file explorer -> right click -> new file). Give it the same name as our project, with a "native" suffix .m to make it clear it is our own native code module we are running, e.g. buildingAppsNative.m. Add the following content:

#import "React/RCTBridgeModule.h"