Added docs for open source Navigation Plugin
Summary: Added docs for the Navigation Plugin. I've added instructions on how to use the plugin with vanilla Android, or how to integrate it with a third party solution. Reviewed By: danielbuechele Differential Revision: D16856614 fbshipit-source-id: e99cb94318820bd926f50bd4ba205fb11396a9d8
This commit is contained in:
committed by
Facebook Github Bot
parent
8f6740bb01
commit
6b93cd15c2
BIN
docs/assets/navigation-plugin-1.png
Normal file
BIN
docs/assets/navigation-plugin-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 467 KiB |
BIN
docs/assets/navigation-plugin-2.png
Normal file
BIN
docs/assets/navigation-plugin-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
14
docs/features/navigation-plugin.md
Normal file
14
docs/features/navigation-plugin.md
Normal file
@@ -0,0 +1,14 @@
|
||||
---
|
||||
id: navigation-plugin
|
||||
title: Navigation
|
||||
---
|
||||
|
||||
→ [See setup instructions for the Navigation Plugin](setup/navigation-plugin.md)
|
||||
|
||||
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.
|
||||
|
||||

|
||||
|
||||
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.
|
||||
|
||||

|
||||
76
docs/setup/navigation-plugin.md
Normal file
76
docs/setup/navigation-plugin.md
Normal file
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: navigation-plugin
|
||||
title: Navigation Plugin Setup
|
||||
sidebar_label: Navigation
|
||||
---
|
||||
|
||||
## 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.
|
||||
@@ -81,6 +81,9 @@
|
||||
"features/logs-plugin": {
|
||||
"title": "Logs"
|
||||
},
|
||||
"features/navigation-plugin": {
|
||||
"title": "Navigation"
|
||||
},
|
||||
"features/network-plugin": {
|
||||
"title": "Network"
|
||||
},
|
||||
@@ -116,6 +119,10 @@
|
||||
"title": "LeakCanary Setup",
|
||||
"sidebar_label": "LeakCanary"
|
||||
},
|
||||
"setup/navigation-plugin": {
|
||||
"title": "Navigation Plugin Setup",
|
||||
"sidebar_label": "Navigation"
|
||||
},
|
||||
"setup/network-plugin": {
|
||||
"title": "Network Setup",
|
||||
"sidebar_label": "Network"
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
"features/index",
|
||||
"features/logs-plugin",
|
||||
"features/layout-plugin",
|
||||
"features/navigation-plugin",
|
||||
"features/network-plugin",
|
||||
"features/databases-plugin",
|
||||
"features/images-plugin",
|
||||
@@ -15,12 +16,10 @@
|
||||
]
|
||||
},
|
||||
"setup": {
|
||||
"Using Flipper": [
|
||||
"getting-started",
|
||||
"troubleshooting"
|
||||
],
|
||||
"Using Flipper": ["getting-started", "troubleshooting"],
|
||||
"Plugin Setup": [
|
||||
"setup/layout-plugin",
|
||||
"setup/navigation-plugin",
|
||||
"setup/network-plugin",
|
||||
"setup/databases-plugin",
|
||||
"setup/images-plugin",
|
||||
@@ -58,9 +57,6 @@
|
||||
"extending/establishing-a-connection",
|
||||
"extending/supporting-layout"
|
||||
],
|
||||
"Internals": [
|
||||
"extending/arch",
|
||||
"extending/layout-inspector"
|
||||
]
|
||||
"Internals": ["extending/arch", "extending/layout-inspector"]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user