Skip to content

Commit

Permalink
Feature: Add flipper debugger tool (#134)
Browse files Browse the repository at this point in the history
* Add all the dependencies to latest packages

* Changes as per 0.61 to 0.62 update

* Add flipper support in android
  • Loading branch information
muhsin-k committed Apr 23, 2020
1 parent a972b0b commit 2f0f86d
Show file tree
Hide file tree
Showing 11 changed files with 786 additions and 516 deletions.
7 changes: 3 additions & 4 deletions .flowconfig
Expand Up @@ -21,7 +21,7 @@ node_modules/warning/.*
[include]

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/interface.js
node_modules/react-native/flow/

[options]
Expand All @@ -36,9 +36,8 @@ module.file_ext=.ios.js

munge_underscores=true

module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation'
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
Expand Down Expand Up @@ -72,4 +71,4 @@ untyped-import
untyped-type-import

[version]
^0.105.0
^0.113.0
2 changes: 2 additions & 0 deletions .gitattributes
@@ -1 +1,3 @@
*.pbxproj -text
# specific for windows script files
*.bat text eol=crlf
27 changes: 26 additions & 1 deletion android/app/build.gradle
Expand Up @@ -76,7 +76,6 @@ import com.android.build.OutputFile
*/

project.ext.react = [
entryFile: "index.js",
enableHermes: false, // clean and rebuild if changing
]

Expand Down Expand Up @@ -179,6 +178,14 @@ android {
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
packagingOptions {
pickFirst "lib/armeabi-v7a/libc++_shared.so"
pickFirst "lib/arm64-v8a/libc++_shared.so"
pickFirst "lib/x86/libc++_shared.so"
pickFirst "lib/x86_64/libc++_shared.so"
}


// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
Expand All @@ -197,8 +204,26 @@ android {

dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+" // From node_modules

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"


debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
exclude group:'com.facebook.fbjni'
}

debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.flipper'
}

debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.flipper'
}



if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
Expand Down
72 changes: 72 additions & 0 deletions android/app/src/debug/java/com/chatwoot/ReactNativeFlipper.java
@@ -0,0 +1,72 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* <p>This source code is licensed under the MIT license found in the LICENSE file in the root
* directory of this source tree.
*/
package com.chatwoot;

import android.content.Context;
import com.facebook.flipper.android.AndroidFlipperClient;
import com.facebook.flipper.android.utils.FlipperUtils;
import com.facebook.flipper.core.FlipperClient;
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.modules.network.NetworkingModule;
import okhttp3.OkHttpClient;

public class ReactNativeFlipper {
public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
if (FlipperUtils.shouldEnableFlipper(context)) {
final FlipperClient client = AndroidFlipperClient.getInstance(context);

client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
client.addPlugin(new ReactFlipperPlugin());
client.addPlugin(new DatabasesFlipperPlugin(context));
client.addPlugin(new SharedPreferencesFlipperPlugin(context));
client.addPlugin(CrashReporterPlugin.getInstance());

NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
NetworkingModule.setCustomClientBuilder(
new NetworkingModule.CustomClientBuilder() {
@Override
public void apply(OkHttpClient.Builder builder) {
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
});
client.addPlugin(networkFlipperPlugin);
client.start();

// Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
// Hence we run if after all native modules have been initialized
ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
if (reactContext == null) {
reactInstanceManager.addReactInstanceEventListener(
new ReactInstanceManager.ReactInstanceEventListener() {
@Override
public void onReactContextInitialized(ReactContext reactContext) {
reactInstanceManager.removeReactInstanceEventListener(this);
reactContext.runOnNativeModulesQueueThread(
new Runnable() {
@Override
public void run() {
client.addPlugin(new FrescoFlipperPlugin());
}
});
}
});
} else {
client.addPlugin(new FrescoFlipperPlugin());
}
}
}
}
3 changes: 2 additions & 1 deletion android/app/src/main/AndroidManifest.xml
Expand Up @@ -3,13 +3,14 @@
<uses-permission android:name="android.permission.INTERNET" />

<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme">
<activity android:name=".MainActivity" android:label="@string/app_name" android:screenOrientation="portrait" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize">
<activity android:name=".MainActivity" android:label="@string/app_name" android:screenOrientation="portrait" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
<activity android:name="com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity" android:exported="true"/>
</application>

</manifest>
59 changes: 32 additions & 27 deletions android/app/src/main/java/com/chatwoot/MainApplication.java
Expand Up @@ -4,6 +4,7 @@
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
Expand All @@ -12,27 +13,27 @@

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for
// example:
// packages.add(new MyReactNativePackage());
return packages;
}

@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
protected String getJSMainModuleName() {
return "index";
}
};

@Override
public ReactNativeHost getReactNativeHost() {
Expand All @@ -43,23 +44,27 @@ public ReactNativeHost getReactNativeHost() {
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this); // Remove this line if you don't want Flipper enabled
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
}

/**
* Loads Flipper in React Native templates.
* Loads Flipper in React Native templates. Call this in the onCreate method
* with something like initializeFlipper(this,
* getReactNativeHost().getReactInstanceManager());
*
* @param context
* @param reactInstanceManager
*/
private static void initializeFlipper(Context context) {
private static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
if (BuildConfig.DEBUG) {
try {
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
* We use reflection here to pick up the class that initializes Flipper, since
* Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName("com.chatwoot.ReactNativeFlipper");
aClass.getMethod("initializeFlipper", Context.class, ReactInstanceManager.class).invoke(null, context,
reactInstanceManager);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
Expand Down
4 changes: 2 additions & 2 deletions android/build.gradle
Expand Up @@ -12,7 +12,7 @@ buildscript {
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:3.4.2")
classpath("com.android.tools.build:gradle:3.5.2")

// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
Expand All @@ -33,6 +33,6 @@ allprojects {

google()
jcenter()
maven { url 'https://jitpack.io' }
maven { url 'https://www.jitpack.io' }
}
}
2 changes: 1 addition & 1 deletion android/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
8 changes: 4 additions & 4 deletions android/gradlew
Expand Up @@ -7,7 +7,7 @@
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
# https://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
Expand Down Expand Up @@ -125,8 +125,8 @@ if $darwin; then
GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
fi

# For Cygwin, switch paths to Windows format before running java
if $cygwin ; then
# For Cygwin or MSYS, switch paths to Windows format before running java
if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
APP_HOME=`cygpath --path --mixed "$APP_HOME"`
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
JAVACMD=`cygpath --unix "$JAVACMD"`
Expand Down Expand Up @@ -185,4 +185,4 @@ if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
cd "$(dirname "$0")"
fi

exec "$JAVACMD" "$@"
exec "$JAVACMD" "$@"
32 changes: 16 additions & 16 deletions package.json
Expand Up @@ -16,12 +16,12 @@
"dependencies": {
"@eva-design/eva": "^1.4.0",
"@kesha-antonov/react-native-action-cable": "^1.0.5",
"@react-native-community/async-storage": "^1.8.1",
"@react-native-community/masked-view": "^0.1.7",
"@react-native-community/netinfo": "^5.6.2",
"@react-navigation/bottom-tabs": "^5.2.4",
"@react-navigation/native": "^5.1.3",
"@react-navigation/stack": "^5.2.8",
"@react-native-community/async-storage": "^1.9.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/netinfo": "^5.8.0",
"@react-navigation/bottom-tabs": "^5.2.7",
"@react-navigation/native": "^5.1.6",
"@react-navigation/stack": "^5.2.13",
"@ui-kitten/components": "4.4.1",
"@ui-kitten/eva-icons": "^4.4.1",
"@ui-kitten/metro-config": "^4.4.1",
Expand All @@ -36,11 +36,11 @@
"react-native-background-color": "^0.0.8",
"react-native-gesture-handler": "^1.6.1",
"react-native-image-pan-zoom": "^2.1.11",
"react-native-reanimated": "^1.7.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.4.0",
"react-native-screens": "^2.5.0",
"react-native-snackbar": "^2.2.0",
"react-native-svg": "^12.0.3",
"react-native-svg": "^12.1.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
Expand All @@ -52,15 +52,15 @@
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/runtime": "^7.9.2",
"@react-native-community/eslint-config": "^1.0.0",
"babel-jest": "^25.2.3",
"@react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^25.4.0",
"eslint": "^6.8.0",
"eslint-plugin-prettier": "^3.1.2",
"husky": "^4.2.3",
"jest": "^25.2.3",
"lint-staged": "^10.0.9",
"eslint-plugin-prettier": "^3.1.3",
"husky": "^4.2.5",
"jest": "^25.4.0",
"lint-staged": "^10.1.7",
"metro-react-native-babel-preset": "^0.59.0",
"prettier": "^2.0.2",
"prettier": "^2.0.5",
"react-test-renderer": "16.13.1"
},
"husky": {
Expand Down

0 comments on commit 2f0f86d

Please sign in to comment.