jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate website to Docusaurus 2

Browse Source 
Summary:
Docusaurus 2 is quite a lot more powerful than docu 1 it turns out.
This should convert the website fully.

* [done] Go through migration guide https://v2.docusaurus.io/docs/migrating-from-v1-to-v2
* [done] Convert landing page html
* [done] Convert all images to img tags
* [done] Convert all .md files to .mdx
* [done] Make sure ui-doc generation and including still works
* [done] Scan every page visually for sanity check
* [done] Make sure footer still works
* [done] Make sure search still works
* [done] Change all links/ to links/index
* [done] Change all links.md to links
* [done] Add some custom css to make the navbar look like the old one and darken the footer.

Reviewed By: passy

Differential Revision: D21158717

fbshipit-source-id: 5f45b711b1b6fd5ece4c5c15c55635c7ebbfb568
This commit is contained in:
John Knox
2020-04-27 04:01:24 -07:00
committed by Facebook GitHub Bot
parent 297ca61c49
commit 5f1a0548f5
101 changed files with 5110 additions and 2159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/tutorial/react-native.mdx Normal file
View File

@@ -0,0 +1,52 @@
---
id: react-native
title: Building a React Native Plugin
---
<div class="warning">
This tutorial requires React Native 0.62 or higher.
</div>
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 creating develop 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](../extending/create-plugin.md#background-plugins), 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).
The `onConnect` callback receive a `connection` which can be used to communicate with the backend:
```javascript
import {addPlugin} from "react-native-flipper"
addPlugin({
getId() {
return 'ReactNativeExamplePlugin';
},
onConnect(connection) {
mammmals.forEach(({ title, pictureUrl }, index) => {
connection.send('newRow', {
id: index,
title,
url: pictureUrl
})
})
},
onDisconnect() {
}
})
```
You might 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](create-plugin) 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/master/react-native/ReactNativeFlipperExample/FlipperTicTacToe.js)
* The Flipper Desktop plugin implementation: [rn-tic-tac-toe/index.tsx](https://github.com/facebook/flipper/blob/master/desktop/plugins/rn-tic-tac-toe/index.tsx)