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

Move plugin docs to plugin folders

Browse Source 
Summary: Moved plugin documentation and related assets to plugin folders, fixed links and configured redirects where required. Now these docs are used for both showing docs in Flipper and generating Flipper docs website.

Reviewed By: passy

Differential Revision: D29465567

fbshipit-source-id: 3ec4240b215b0d5baea5154f64266a9ba7ead3a5
This commit is contained in:
Anton Nikolaev
2021-06-29 17:39:37 -07:00
committed by Facebook GitHub Bot
parent 4ad7a70ee3
commit 039d3a4a08
24 changed files with 47 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/features/crash-reporter-plugin.mdx
View File

@@ -1,14 +0,0 @@
---
id: crash-reporter-plugin
title: Crash Reporter
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Crash Reporter](../setup/crash-reporter-plugin.mdx)
The Crash Reporter Plugin shows a notification in Flipper whenever an app crashes. You can click on the notification to see crash information like stacktrace and other metadata. For Android, you can click the "Open in Logs" button to jump to the row in the Logs plugin with the crash information.
<img alt="UI" src={useBaseUrl("img/crashreporterplugin.png")} />
<img alt="Notification" src={useBaseUrl("img/crashreporterpluginnotification.png")} />

20
docs/features/databases-plugin.mdx
View File

@@ -1,20 +0,0 @@
---
id: databases-plugin
title: Databases
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Databases plugin](../setup/databases-plugin.mdx)
The Databases plugin provides developers with read-write access to their databases:
- browse your tables' data
- see your tables' structure
- execute queries
- mark queries as favorites
- see logs of past executed queries
<img alt="Databases Plugin 1" src={useBaseUrl("img/databases-plugin-1.png")} />
<img alt="Databases Plugin 2" src={useBaseUrl("img/databases-plugin-2.png")} />
Note: this plugin is only available for Android.

33
docs/features/images-plugin.mdx
View File

@@ -1,33 +0,0 @@
---
id: images-plugin
title: Images
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the images plugin](../setup/images-plugin.mdx)
The images plugin allows you to inspect what images were fetched, where they are
coming from and selectively clear caches. Currently, the plugin supports
[Fresco](https://github.com/facebook/fresco/) as backend.
<img alt="Images plugin" src={useBaseUrl("img/images-plugin.png")} />
## Cache Inspector
Images are grouped by the different caching layers they are stored in. The current
fill rate of the cache is shown and you can choose to selectively clear caches.
## Attribution
Images can be annotated with attributes that can help to determine the context in
which an image was loaded and displayed. You can use that information to filter
by a particular surface or only inspect images that are in the critical path
of your application, for instance during cold start.
## Leak Tracking
Dealing with large resources can require special APIs to be used that circumvent
usual garbage collection. The plugin allows tracking `CloseableReference`s for
Fresco on Android that weren't properly closed, which can help you improve
the performance of your app.

2
docs/features/index.mdx
View File

@@ -4,7 +4,7 @@ title: Features
---
import useBaseUrl from '@docusaurus/useBaseUrl';
Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin), [Layout Inspector](layout-plugin) and [Network Inspector](plugins/network) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. Each plugin needs to be enabled individually.
Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](plugins/device-logs), [Layout Inspector](plugins/inspector) and [Network Inspector](plugins/network) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. Each plugin needs to be enabled individually.
<img alt="Plugins" src={useBaseUrl('img/plugins.png')} />

36
docs/features/layout-plugin.mdx
View File

@@ -1,36 +0,0 @@
---
id: layout-plugin
title: Layout Inspector
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Layout Inspector](../setup/layout-plugin.mdx)
The Layout Inspector in Flipper is useful for a ton of different debugging scenarios. First of all, you can inspect what views the hierarchy is made up of as well as what properties each view has. This is incredibly useful when debugging issues with your product.
The Layout tab supports [Litho](https://fblitho.com) and [ComponentKit](https://componentkit.org) components as well. We integrate with these frameworks to present components in the hierarchy just as if they were native views. We show you all the layout properties, props, and state of the components. The layout inspector is further extensible to support other UI frameworks.
If you hover over a view or component in Flipper we will highlight the corresponding item in your app. This is perfect for debugging the bounds of your views and making sure you have the correct visual padding.
<img alt="Layout plugin" src={useBaseUrl("img/layout.png")} />
## Quick edits
The Layout Inspector not only allows you to view the hierarchy and inspect each item's properties, but it also allows you to edit things such as layout attributes, background colors, props, and state. Most things actually. This allows you to quickly tweak paddings, margins, and colors until you are happy with them, all without re-compiling. This can save you many hours implementing a new design.
## Target mode
Enable target mode by clicking on the crosshairs icon. Now, you can touch any view on the device and Layout Inspector will jump to the correct position within your layout hierarchy.
Tip: Target mode also works with Talkback running.
## Accessibility mode (Android-only)
Enable accessibility mode by clicking on the accessibility icon. This shows the accessibility view hierarchy next to the normal hierarchy. In the hierarchy, the currently accessibility-focused view is highlighted in green and any accessibility-focusable elements have a green icon next to their name. The hierarchy's context menu also allows you to focus accessibility services on certain elements. When selecting an element in one hierarchy, the corresponding element in the other will also be highlighted. The hierarchies expand and collapse in sync, and searching through the main hierarchy works in accessibility mode as well.
When accessibility mode is enabled, the sidebar will show special properties that are used by accessibility services to determine their functionality. This includes things like content-description, clickable, focusable, and long-clickable among others.
### Talkback
The accessibility mode sidebar also includes a panel with properties derived specifically to show Talkback's interpretation of a view (with logic ported over from Google's Talkback source). While generally accurate, this is not guaranteed to be accurate for all situations. It is always better to turn Talkback on for verification.

14
docs/features/leak-canary-plugin.mdx
View File

@@ -1,14 +0,0 @@
---
id: leak-canary-plugin
title: LeakCanary
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ See setup instructions for [LeakCanary 1](../setup/leak-canary-plugin.mdx) or [LeakCanary 2](../setup/leak-canary-2-plugin.mdx)
The LeakCanary plugin provides developers with Flipper support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library.
Leaks detected by LeakCanary will appear automatically in Flipper. Each leak will display a hierarchy of objects, beginning from the garbage collector root and ending at the leaked class.
Selecting any object in this list will display contents of the object's various fields.
Note: this plugin is only available for Android.

19
docs/features/logs-plugin.mdx
View File

@@ -1,19 +0,0 @@
---
id: logs-plugin
title: Logs
---
import useBaseUrl from '@docusaurus/useBaseUrl';
The Logs plugin shows device logs without any additional setup. This is a device plugin, meaning that it is not tied to any specific app and there is no additional setup needed to see the logs.
<img alt="Logs plugin" src={useBaseUrl("img/logs.png")} />
## Filtering
The search bar can be used to search for logs and filter for certain types. From the context menu on the table headers you can show more infos like timestamp, PID or TID. Click on a tag, PID or TID in the table to filter only for logs with the same value.
## Expression watcher
The expression watcher in the sidebar can be used to watch for certain logs to happen and count how often they occur. An expression can be a simple string, or a regular expression which is matched against the logs.
When the notify checkbox is enabled, Flipper will send notifications once the log is happening. This lets you know when the watcher triggered, even if Flipper is in the background.

15
docs/features/navigation-plugin.mdx
View File

@@ -1,15 +0,0 @@
---
id: navigation-plugin
title: Navigation
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Navigation Plugin](../setup/navigation-plugin.mdx)
The Navigation Plugin allows users to quickly navigate to deep links within their mobile applications to help speed up the development cycle. The plugin is designed to integrate easily within your existing navigation framework or as a stand alone tool. Users can bookmark deep links and jump to them via the button in the tool bar.
<img alt="Navigation Plugin Button" src={useBaseUrl("img/navigation-plugin-1.png")} />
Navigation events within the app can also be logged to Flipper. This allows the user to view past navigation events and jump straight to them, or export the navigation events for reporting.
<img alt="Navigation Plugin UI" src={useBaseUrl("img/navigation-plugin-2.png")} />

9
docs/features/sandbox-plugin.mdx
View File

@@ -1,9 +0,0 @@
---
id: sandbox-plugin
title: Sandbox
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Sandbox plugin](../setup/sandbox-plugin.mdx)
The sandbox plugin allows developers to test changes in their apps by pointing them to a sandbox environment. It provides a simple UI to set and modify the URL to a development host that acts as a sandbox directly on the desktop, which prevents you from entering potentially long and complicated URL inside your app.

13
docs/features/shared-preferences-plugin.mdx
View File

@@ -1,13 +0,0 @@
---
id: shared-preferences-plugin
title: Shared Preferences
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Shared Preferences plugin](../setup/shared-preferences-plugin.mdx)
Easily inspect and modify the data contained within your app's shared preferences.
<img alt="Shared Preferences Plugin" src={useBaseUrl("img/shared-preferences.png")} />
All changes to the given shared preference file will automatically appear in Flipper. You may also edit the values in Flipper and have them synced to your device. This can be done by clicking on the value of the specific key you wish to edit, editing the value and then pressing enter.

25
docs/setup/crash-reporter-plugin.mdx
View File

@@ -1,25 +0,0 @@
---
id: crash-reporter-plugin
title: Crash Reporter Setup
sidebar_label: Crash Reporter
---
import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';
You do not have to instantiate it in your app in order to use its basic functionality mentioned <Link to={useBaseUrl("/docs/features/crash-reporter-plugin")}>here</Link>. You can also use crash reporter plugin to send the notifications for the exception which you suppress in your Android application. You could even use it to send the notifications when the [Litho Error Boundary](https://fblitho.com/docs/error-boundaries) is triggered. In order to send your custom notification you will have to follow the following steps.
## Android
Instantiate and add the plugin in `FlipperClient`.
```java
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
client.addPlugin(CrashReporterPlugin.getInstance());
```
Use the following API to trigger your custom crash notification.
```java
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
CrashReporterPlugin.getInstance().sendExceptionMessage(Thread.currentThread(), error);
```

63
docs/setup/databases-plugin.mdx
View File

@@ -1,63 +0,0 @@
---
id: databases-plugin
title: Databases Plugin Setup
sidebar_label: Databases
---
To use the databases plugin, you need to add the plugin to your Flipper client instance. The plugin is currently only available for Android.
## Android
Instantiate and add the plugin in `FlipperClient`.
```java
import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
client.addPlugin(new DatabasesFlipperPlugin(context));
```
By default it will list all sqlite databases returned by the context. If you are storing a sqlite database somewhere else, you can specify a `File` to it:
```java
client.addPlugin(new DatabasesFlipperPlugin(new SqliteDatabaseDriver(context, new SqliteDatabaseProvider() {
@Override
public List<File> getDatabaseFiles() {
List<File> databaseFiles = new ArrayList<>();
for (String databaseName : context.databaseList()) {
databaseFiles.add(context.getDatabasePath(databaseName));
}
databaseFiles.add("...path_to_your_db...")
return databaseFiles;
}
})));
```
If you use a different type of database other than sqlite, you can implement a driver to be able to access it via Flipper.
```java
client.addPlugin(new DatabasesFlipperPlugin(new DatabaseDriver(context) {
@Override
public List getDatabases() {
return null;
}
@Override
public List<String> getTableNames(DatabaseDescriptor databaseDescriptor) {
return null;
}
@Override
public DatabaseGetTableDataResponse getTableData(DatabaseDescriptor databaseDescriptor, String table, String order, boolean reverse, int start, int count) {
return null;
}
@Override
public DatabaseGetTableStructureResponse getTableStructure(DatabaseDescriptor databaseDescriptor, String table) {
return null;
}
@Override
public DatabaseExecuteSqlResponse executeSQL(DatabaseDescriptor databaseDescriptor, String query) {
return null;
}
}));
```

99
docs/setup/images-plugin.mdx
View File

@@ -1,99 +0,0 @@
---
id: images-plugin
title: Images Setup
sidebar_label: Images
---
Currently, the images plugin only supports [Fresco](https://frescolib.org/) for Android as backend, but just like the network plugin, support for other image loading libraries
could easily be added. Send us a PR!
## Fresco and Android
The Fresco images plugin is shipped as a separate Maven artifact:
```groovy
dependencies {
debugImplementation 'com.facebook.flipper:flipper-fresco-plugin:0.30.1'
}
```
After including the plugin in your dependencies, you can add it to the
client:
```java
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
client.addPlugin(new FrescoFlipperPlugin());
```
The `FrescoFlipperPlugin` constructor offers a whole lot of configuration options which
can be useful if you have an advanced setup of Fresco in your application:
```java
FrescoFlipperPlugin(
DebugImageTracker imageTracker,
PlatformBitmapFactory bitmapFactory,
@Nullable FlipperObjectHelper flipperObjectHelper,
DebugMemoryManager memoryManager,
FlipperPerfLogger perfLogger,
@Nullable FrescoFlipperDebugPrefHelper debugPrefHelper,
@Nullable CloseableReferenceLeakTracker closeableReferenceLeakTracker) { ... }
```
### Leak Tracking
The Flipper plugin can help you track down `CloseableReferences` who have not had
`close()` called on them. This can have a negative impact on the performance of
your application.
To enable this functionality, you need to create a `CloseableReferenceLeakTracker`
and set it in both your `ImagePipelineConfig` for Fresco and the `FrescoPluginPlugin`
on creation.
```java
import com.facebook.imagepipeline.debug.FlipperCloseableReferenceLeakTracker;
// ...
FlipperCloseableReferenceLeakTracker leakTracker = new FlipperCloseableReferenceLeakTracker();
new ImagePipelineConfig.Builder()
// ...
.setCloseableReferenceLeakTracker(leakTracker)
.build();
client.addPlugin(new FrescoFlipperPlugin(
new FlipperImageTracker(),
Fresco.getImagePipelineFactory().getPlatformBitmapFactory(),
null,
new NoOpDebugMemoryManager(),
new NoOpFlipperPerfLogger(),
null,
leakTracker));
```
### Attribution
In order to annotate images with the context they are used in, you have to set a
caller context when loading the image. This can be any object, so for the simplest
case, a String will suffice.
```java
String callerContext = "my_feature";
// For DraweeViews:
draweeView.setImageURI(uri, callerContext);
// For prefetching:
ImagePipeline imagePipeline = Fresco.getImagePipeline();
imagePipeline.prefetchToDiskCache(imageRequest, callerContext);
// For manually fetching an image:
DataSource<CloseableReference<CloseableImage>>
dataSource = imagePipeline.fetchDecodedImage(imageRequest, callerContext);
```
If a caller context is supplied, the image will be properly attributed in the
Flipper image plugin.

152
docs/setup/layout-plugin.mdx
View File

@@ -1,152 +0,0 @@
---
id: layout-plugin
title: Layout Inspector Setup
sidebar_label: Layout Inspector
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
To use the layout inspector plugin, you need to add the plugin to your Flipper client instance.
## Android
### Standard Android View Only
```java
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults();
client.addPlugin(new InspectorFlipperPlugin(mApplicationContext, descriptorMapping));
```
### With Litho Support
Litho support is provided via an optional plugin.
You also need to compile in the `litho-annotations` package, as Flipper reflects
on them at runtime. So ensure to not just include them as `compileOnly` in your
gradle configuration:
```groovy
dependencies {
debugImplementation 'com.facebook.flipper:flipper-litho-plugin:0.95.0'
debugImplementation 'com.facebook.litho:litho-annotations:0.19.0'
// ...
}
```
If you want to enable Litho support in the layout inspector, you need to augment
the descriptor with Litho-specific settings and add some addition dependencies.
```java
import com.facebook.litho.config.ComponentsConfiguration;
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.flipper.plugins.litho.LithoFlipperDescriptors;
// Instead of hard-coding this setting, it's a good practice to tie
// this to a BuildConfig flag, that you only enable for debug builds
// of your application.
ComponentsConfiguration.isDebugModeEnabled = true;
final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults();
// This adds Litho capabilities to the layout inspector.
LithoFlipperDescriptors.add(descriptorMapping);
client.addPlugin(new InspectorFlipperPlugin(mApplicationContext, descriptorMapping));
```
### Blocking fullscreen views (Android only)
The issue is that if you have some view that occupies big part of the screen but draws nothing and its Z-position is higher than your main content, then selecting view/component through Layout Inspector doesn't work as you intended, as it will always hit that transparent view and you need to manually navigate to the view you need which is time-consuming and should not be necessary.
Add the following tag to your view to skip it from Flipper's view picker. The view will still be shown in the layout hierarchy, but it will not be selected while using the view picker.
```java
view.setTag(R.id.flipper_skip_view_traversal, true);
```
### Blocking empty view groups (Android only)
If you have a ViewGroup that only occasionally has visible children, you may find it helpful to block its traversal when it is empty or has no visible children. For example, you might have a FragmentContainerView that currently has no visible fragment.
Add the following tag to your view group to skip it from Flipper's view picker only when it has zero children, or none of its children are currently visible. The views will still be shown in the layout hierarchy, but they will not be selected while using the view picker.
```java
viewGroup.setTag(R.id.flipper_skip_empty_view_group_traversal, true);
```
## iOS
### Standard UIView Only
To debug layout using Flipper, add the following pod:
```ruby
pod 'FlipperKit/FlipperKitLayoutPlugin', '~>' + flipperkit_version
```
Once you have added the pod, initialise the plugin and add it to the `FlipperClient` as follows.
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objc
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
[client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]];
```
</TabItem>
<TabItem value="swift">
```swift
import FlipperKit
let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
```
</TabItem>
</Tabs>
### With ComponentKit Support
If you want to enable [ComponentKit support](https://github.com/facebook/componentkit) in the layout inspector, you need to add `FlipperKit/FlipperKitLayoutComponentKitSupport` to your Podfile.
```ruby
pod 'FlipperKit/FlipperKitLayoutComponentKitSupport', '~>' + flipperkit_version
```
Once you have added the pod you will then need to augment the descriptor with Componentkit-specific settings as shown below.
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objc
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>
SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
[FlipperKitLayoutComponentKitSupport setUpWithDescriptorMapper: layoutDescriptorMapper];
[client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application
withDescriptorMapper: layoutDescriptorMapper]];
```
</TabItem>
<TabItem value="swift">
```swift
import FlipperKit
let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
```
</TabItem>
</Tabs>

49
docs/setup/leak-canary-2-plugin.mdx
View File

@@ -1,49 +0,0 @@
---
id: leak-canary-2-plugin
title: LeakCanary 2 Setup
sidebar_label: LeakCanary 2
---
Ensure that you already have an explicit dependency in your application's
`build.gradle` including the plugin dependency, e.g.
```groovy
dependencies {
debugImplementation 'com.facebook.flipper:flipper-leakcanary2-plugin:0.95.0'
debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.6'
}
```
Update your the `onCreate` method in you `Application` to add the LeakCanary2 plugin to Flipper and the Flipper listener to LeakCanary
```kt
import com.facebook.flipper.plugins.leakcanary2.FlipperLeakListener
import com.facebook.flipper.plugins.leakcanary2.LeakCanary2FlipperPlugin
...
override fun onCreate() {
super.onCreate()
setupFlipper()
/*
set the flipper listener in leak canary config
*/
LeakCanary.config = LeakCanary.config.copy(
onHeapAnalyzedListener = FlipperLeakListener()
)
SoLoader.init(this, false)
if (BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(this)) {
val client = AndroidFlipperClient.getInstance(this)
/*
add leak canary plugin to flipper
*/
client.addPlugin(LeakCanary2FlipperPlugin())
client.start()
}
}
```
That's it!

39
docs/setup/leak-canary-plugin.mdx
View File

@@ -1,39 +0,0 @@
---
id: leak-canary-plugin
title: LeakCanary Setup
sidebar_label: LeakCanary
---
Ensure that you already have an explicit dependency in your application's
`build.gradle` including the plugin dependency, e.g.
```groovy
dependencies {
debugImplementation 'com.facebook.flipper:flipper-leakcanary-plugin:0.95.0'
debugImplementation 'com.squareup.leakcanary:leakcanary-android:1.6.1'
releaseImplementation 'com.squareup.leakcanary:leakcanary-android-no-op:1.6.1'
}
```
First, add the plugin to your Flipper client instance:
```java
import com.facebook.flipper.plugins.leakcanary.LeakCanaryFlipperPlugin;
client.addPlugin(new LeakCanaryFlipperPlugin());
```
Next, build a custom RefWatcher using RecordLeakService: (see [LeakCanary docs](https://github.com/square/leakcanary/wiki/Customizing-LeakCanary#uploading-to-a-server) for more information on RefWatcher)
```java
import com.facebook.flipper.plugins.leakcanary.RecordLeakService;
RefWatcher refWatcher = LeakCanary.refWatcher(this)
.listenerServiceClass(RecordLeakService.class)
.buildAndInstall();
```
Then, add the `RecordLeakService` in your debug variant AndroidManifest.xml.
```xml
<service android:name="com.facebook.flipper.plugins.leakcanary.RecordLeakService" />
```

88
docs/setup/navigation-plugin.mdx
View File

@@ -1,88 +0,0 @@
---
id: navigation-plugin
title: Navigation Plugin Setup
sidebar_label: Navigation
---
import FbNavigationPluginSetup from '../fb/Navigation-Plugin.mdx';
<FbInternalOnly>
## Adding the plugin using Buck
<FbNavigationPluginSetup />
## Adding the plugin to non-buck-based apps
</FbInternalOnly>
### Android
First, add the plugin to your Flipper client instance:
```java
import com.facebook.flipper.android.AndroidFlipperClient;
import com.facebook.flipper.plugins.navigation.NavigationFlipperPlugin;
final FlipperClient client = AndroidFlipperClient.getInstance(this);
client.addPlugin(NavigationFlipperPlugin.getInstance());
```
Navigation events in the app can then be recorded by calling `sendNavigationEvent` method of the `NavigationFlipperPlugin` instance from anywhere in the app. This allows for the Navigation Plugin to be integrated into existing navigation frameworks.
#### Using Android Deep Links
The Navigation Plugin can be used with built in [deep links for Android](https://developer.android.com/training/app-links/deep-linking).
To deep link to an activity, edit the AndroidManifest.xml and add the intent filter for the given activity.
```xml
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="flipper" android:host="deep_link_activity" />
</intent-filter>
```
This will allow the user to jump to `flipper://deep_link_activity` within Flipper.
To log that navigation event in flipper, we can send the navigation event in the Activity's `onCreate` method.
```java
public class DeepLinkActivity extends AppCompatActivity {
@Override
protected void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
NavigationFlipperPlugin.getInstance().sendNavigationEvent("flipper://deep_link_activity/");
...
```
#### Third Party Solutions
The Navigation Plugin can easily be integrated into a third party navigation framework.
##### AirBnB Deep Link Dispatch
[Deep Link Dispatch](https://github.com/airbnb/DeepLinkDispatch) will work out of the box with Flipper for navigating to links, including support for url parameters. To add logging, simply add a BroadcastReceiver to your app that is called on any incoming deep links.
```java
public class DeepLinkReceiver extends BroadcastReceiver {
private static final String TAG = "DeepLinkReceiver";
@Override public void onReceive(Context context, Intent intent) {
String deepLinkUri = intent.getStringExtra(DeepLinkHandler.EXTRA_URI);
if (intent.getBooleanExtra(DeepLinkHandler.EXTRA_SUCCESSFUL, false)) {
NavigationFlipperPlugin.getInstance().sendNavigationEvent(deepLinkUri);
}
}
}
public class DeepLinkApplication extends Application {
@Override public void onCreate() {
super.onCreate();
IntentFilter intentFilter = new IntentFilter(DeepLinkHandler.ACTION);
LocalBroadcastManager.getInstance(this).registerReceiver(new DeepLinkReceiver(), intentFilter);
}
}
```
### iOS
iOS support is coming soon.

37
docs/setup/protobuf-retrofit-plugin.mdx
View File

@@ -1,37 +0,0 @@
---
id: protobuf-retrofit-plugin
title: Protobut + Retrofit Setup
sidebar_label: Protobut + Retrofit
---
## Gradle Dependencies
Ensure that you already have an explicit dependency in your application's
`build.gradle` including the plugin dependency, e.g.
```groovy
dependencies {
implementation "com.squareup.retrofit2:retrofit:2.9.0"
implementation "com.squareup.retrofit2:converter-protobuf:2.9.0"
// update version below to match latest Flipper client app
debugImplementation "com.facebook.flipper:flipper:0.84.0"
debugImplementation "com.facebook.flipper:flipper-network-plugin:0.84.0"
debugImplementation "com.facebook.flipper:flipper-retrofit2-protobuf-plugin:0.84.0"
}
```
## Network Plugin Requirement
Ensure that `NetworkFlipperPlugin` is added as shown in the [Network setup guide](https://fbflipper.com/docs/setup/network-plugin#android)
## Sending Retrofit Service
Suppose you have a Retrofit service interface `PersonService` which has Protobuf body or return types. At the time you create your implementation, call the plugin with your `baseUrl` and service class:
```
import com.facebook.flipper.plugins.retrofit2protobuf.SendProtobufToFlipperFromRetrofit
...
val personService = retrofit.create(PersonService::class.java)
SendProtobufToFlipperFromRetrofit(baseUrl, PersonService::class.java)
```

17
docs/setup/sandbox-plugin.mdx
View File

@@ -1,17 +0,0 @@
---
id: sandbox-plugin
title: Sandbox Setup
sidebar_label: Sandbox
---
To use the sandbox plugin, you need to add the plugin to your Flipper client instance. Currently the plugin is only supported on Android.
## Android
```java
import com.facebook.flipper.plugins.sandbox.SandboxFlipperPlugin;
import com.facebook.flipper.plugins.sandbox.SandboxFlipperPluginStrategy;
final SandboxFlipperPluginStrategy strategy = getStrategy(); // Your strategy goes here
client.addPlugin(new SandboxFlipperPlugin(strategy));
```

50
docs/setup/shared-preferences-plugin.mdx
View File

@@ -1,50 +0,0 @@
---
id: shared-preferences-plugin
title: Shared Preferences Setup
sidebar_label: Shared Preferences
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
This plugin is available for both Android and iOS.
## Android
```java
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
client.addPlugin(
new SharedPreferencesFlipperPlugin(context, "my_shared_preference_file"));
```
## iOS
If you want to use the Shared Preferences plugin, you need to add `FlipperKit/FlipperKitUserDefaultsPlugin` to your Podfile.
```ruby
pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version
```
Initialize the plugin in the following way:
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios">
```objectivec
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
[client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:@"your_suitename"]];
```
</TabItem>
<TabItem value="swift">
```swift
import FlipperKit
client?.add(FKUserDefaultsPlugin.init(suiteName: "your_suitename"))
```
</TabItem>
</Tabs>