From 4b05532fae21d42d01e422889b83c35accc77425 Mon Sep 17 00:00:00 2001 From: Kevin Strider Date: Tue, 17 May 2022 01:34:11 -0700 Subject: [PATCH] react-native.mdx (Creating Plugins - Building an React Native Plugin) Summary: Restyle of page, including changes to spelling, grammar, links, and structure (where relevant). Reviewed By: nikoant Differential Revision: D36410352 fbshipit-source-id: 9a05b24811adedea2a5e97e6865e3fd42aadb344 --- docs/tutorial/react-native.mdx | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/docs/tutorial/react-native.mdx b/docs/tutorial/react-native.mdx index 461277942..98793c37e 100644 --- a/docs/tutorial/react-native.mdx +++ b/docs/tutorial/react-native.mdx @@ -5,21 +5,15 @@ title: Building a React Native Plugin import useBaseUrl from '@docusaurus/useBaseUrl'; import Link from '@docusaurus/Link'; -
+:::caution +This section of the tutorial requires React Native 0.62 or higher. +::: -This tutorial requires React Native 0.62 or higher. +Once you've connected Flipper to a React Native application, writing your own Flipper plugin can be done without reaching into the native world. -
+To expose Flipper to the JavaScript world, the React Native module `react-native-flipper` needs to be installed in the hosting application by running `yarn add react-native-flipper` and `cd ios && pod install`. If you are developing a plugin that is distributed as NPM package, make sure to add this to the installation instruction of your package as well! -Once you have connected Flipper to a React Native application, -writing your own Flipper plugin can be done without reaching into the native world. - -To expose Flipper to the JavaScript world, the React Native Native Module `react-native-flipper` needs to be installed in the hosting application by running `yarn add react-native-flipper` and `cd ios && pod install`. If you are developing a plugin that is distributed as NPM package, make sure to add this to the installation instruction of your package as well! - -Registering a new plugin is done by importing `addPlugin` from `"react-native-flipper"` and providing it an object that at least implements the method `getId` (the plugin id that should be used in the desktop plugin as well to make the connection) and two event handlers for the `onConnect` and `onDisconnect` events. - -These `onConnect` and `onDisconnect` events are triggered every time the plugin becomes (in)active in the Flipper desktop application. -If the plugin is a background plugin, these events are triggered typically only once (they might be triggered never, if the Desktop user didn't enable the plugin, or multiple times if they enabled or disabled the plugin a few times). +Registering a new plugin is done by importing `addPlugin` from `react-native-flipper` and providing it an object that at least implements the method `getId` (the plugin id that should be used in the desktop plugin as well to make the connection) and two event handlers for the `onConnect` and `onDisconnect` events. The `onConnect` and `onDisconnect` events are triggered every time the plugin becomes (in)active in the Flipper desktop application. If the plugin is a background plugin, the events are triggered typically only once (they might be triggered never, if the Desktop user didn't enable the plugin, or multiple times if they enabled or disabled the plugin a few times). The `onConnect` callback receive a `connection` which can be used to communicate with the backend: @@ -44,11 +38,11 @@ addPlugin({ }) ``` -You might want to store the connection somewhere to be able to send more events as long as `onDisconnect` event hasn't been fired. +You may want to store the connection somewhere to be able to send more events as long as `onDisconnect` event hasn't been fired. The `connection` object can also be used to listen to messages coming from the Desktop plugin. See Client Plugin API for details. An example plugin to play a little Tic-Tac-Toe between the Flipper Desktop and a React Native app can be found inside this repository as well (run `yarn && yarn android` in `react-native/ReactNativeFlipperExample` to start the test project): - * The React Native JavaScript based plugin implementation: [FlipperTicTacToe.js](https://github.com/facebook/flipper/tree/main/react-native/ReactNativeFlipperExample/FlipperTicTacToe.js) - * The Flipper Desktop plugin implementation: [rn-tic-tac-toe/index.tsx](https://github.com/facebook/flipper/blob/main/desktop/plugins/public/rn-tic-tac-toe/index.tsx) + * The React Native JavaScript based plugin implementation - [FlipperTicTacToe.js](https://github.com/facebook/flipper/tree/main/react-native/ReactNativeFlipperExample/FlipperTicTacToe.js) + * The Flipper Desktop plugin implementation - [rn-tic-tac-toe/index.tsx](https://github.com/facebook/flipper/blob/main/desktop/plugins/public/rn-tic-tac-toe/index.tsx)