Version 1.0.0 is finally here with separation of header views and new…

… documentation.

README.md

@@ -1,59 +1,87 @@
-<img alt="React Native Bottom Bar" src="https://github.com/WrathChaos/react-native-header-view/blob/master/assets/Screenshots/logo.png" width="1050"/>
+<img alt="React Native Bottom Bar" src="assets/logo.png" width="1050"/>
 
 [![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-button)
 
-[![Fully customizable Header View with multiple design options for React Native.](https://img.shields.io/badge/-Fully%20customizable%20Header%20View%20with%20multiple%20design%20options%20for%20React%20Native.-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-header-view)
+[![Collection of Header Views for React Native](https://img.shields.io/badge/-Collection%20of%20Header%20Views%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-header-view)
 
 [![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-header-view)
 [![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-header-view.svg?style=for-the-badge)](https://www.npmjs.org/package/@freakycoder/react-native-header-view)
 ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
 [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
 
-<p align="center">
-  <img alt="React Native Header View" src="assets/Screenshots/ss3.png" width="49.7%" />
-  <img alt="React Native Header View" src="assets/Screenshots/ss2.png" width="49.7%" />
-</p>
+<table>
+  <tr>
+    <td>
+      <b>Apple Header</b>
+    </td>
+    <td>
+      <b>Gorgeous Header</b>
+    </td>
+  </tr>
+  <tr>
+    <td align="center">
+      <img alt="React Native Apple Header View" src="assets/Screenshots/apple-header-view.png" width="686px"/>
+    </td>
+    <td align="center">
+      <img alt="React Native Gorgeous Header View" src="assets/Screenshots/gorgeous-header-view.png" width="686px" />
+    </td>
+   </tr>
+
+</table>
+
+<table>
+  <tr>
+    <td>
+      <b>Classic Header</b>
+    </td>
+    <td>
+      <b>Modern Header</b>
+    </td>
+  </tr>
+ <tr>
+    <td align="center"> 
+      <img alt="React Native Classic Header View" src="assets/Screenshots/classic-header-view.png" width="686px"  />
+    </td>
+    <td align="center">
+      <img alt="React Native Modern Header View" src="assets/Screenshots/modern-header-view2.png" width="686px"  />
+    </td>
+   </tr>
+</table>
+
+# Finally Version 1.0.0 🥳
+
+Finally this library got the version **1.0.0**. More than **5k downloads** and it is separated by each header view. This library contains the collection of each header view. If you do not need to use them all, you can reach and install header views on its own repository.
 
-<p align="center">
-  <img alt="React Native Header View" src="assets/Screenshots/ss1.png" width="49.7%" />
-</p>
+# Options
 
-<p align="center">
-  <b>Gorgeous Header View</b>
-</p>
-<p align="center">
-  <img alt="React Native Header View" src="assets/Screenshots/gorgeous-header-view.png" width="70%" />
-</p>
+- [GorgeousHeader](https://github.com/WrathChaos/react-native-gorgeous-header)
+- [AppleHeader](https://github.com/WrathChaos/react-native-apple-header)
+- [ModernHeader](https://github.com/WrathChaos/react-native-modern-header)
+- [ClassicHeader](https://github.com/WrathChaos/react-native-classic-header)
 
 ## Installation
 
+<b><i>You can use each Header View separately if you do not want to use the collection.</i></b>
+
 Add the dependency:
 
-### Pure React Native:
+### Pure React Native
 
-```ruby
+```bash
 npm i @freakycoder/react-native-header-view
 ```
 
 ## Peer Dependencies
 
 ##### IMPORTANT! You need install them.
 
+```bash
+"react-native-gorgeous-header": ">= 0.1.0",
+"react-native-classic-header": ">= 0.1.0",
+"react-native-modern-header": ">= 0.1.0",
+"react-native-apple-header": ">= 0.1.0"
 ```
-"react": ">= 16.x",
-"react-native": ">= 0.55.x",
-"react-native-vector-icons": ">= 6.6.0",
-"react-native-dynamic-vector-icons": ">= x.x.x"
-"@freakycoder/react-native-helpers": ">= 0.0.2",
-```
-
-# Options
-
-- GorgeousHeader
-- AppleHeader
-- ModernHeader
-- ClassicHeader
 
 # Usage
 
@@ -81,7 +109,7 @@ import { ModernHeader } from "@freakycoder/react-native-header-view";
 <ModernHeader />;
 ```
 
-#### Advanced Usage
+### Advanced Usage
 
 ```jsx
 import { ModernHeader } from "@freakycoder/react-native-header-view";
@@ -100,7 +128,7 @@ import { ModernHeader } from "@freakycoder/react-native-header-view";
 
 ## Classic Header Usage
 
-#### Basic Usage
+### Basic Usage
 
 ```jsx
 import { ClassicHeader } from "@freakycoder/react-native-header-view";

example/.flowconfig

@@ -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]
@@ -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
@@ -57,7 +56,6 @@ untyped-type-import=warn
 nonstrict-import=warn
 deprecated-type=warn
 unsafe-getters-setters=warn
-inexact-spread=warn
 unnecessary-invariant=warn
 signature-verification-failure=warn
 deprecated-utility=error
@@ -72,4 +70,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.105.0
+^0.122.0

example/App.js

@@ -5,13 +5,7 @@ import {
   SafeAreaView,
   TouchableOpacity,
 } from "react-native";
-import {
-  AppleHeader,
-  ModernHeader,
-  ClassicHeader,
-  GorgeousHeader,
-} from "@freakycoder/react-native-header-view";
-import Icon from "react-native-dynamic-vector-icons";
+import { GorgeousHeader } from "@freakycoder/react-native-header-view";
 
 const App = () => {
   return (

example/android/app/build.gradle

@@ -15,10 +15,12 @@ import com.android.build.OutputFile
  *   // the name of the generated asset file containing your JS bundle
  *   bundleAssetName: "index.android.bundle",
  *
- *   // the entry file for bundle generation
+ *   // the entry file for bundle generation. If none specified and
+ *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
+ *   // default. Can be overridden with ENTRY_FILE environment variable.
  *   entryFile: "index.android.js",
  *
- *   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
+ *   // https://reactnative.dev/docs/performance#enable-the-ram-format
  *   bundleCommand: "ram-bundle",
  *
  *   // whether to bundle JS and assets in debug mode
@@ -76,7 +78,6 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    entryFile: "index.js",
     enableHermes: false,  // clean and rebuild if changing
 ]
 
@@ -156,12 +157,13 @@ android {
         }
         release {
             // Caution! In production, you need to generate your own keystore file.
-            // see https://facebook.github.io/react-native/docs/signed-apk-android.
+            // see https://reactnative.dev/docs/signed-apk-android.
             signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
+
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
@@ -180,8 +182,24 @@ 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'
+        exclude group:'com.squareup.okhttp3', module:'okhttp'
+    }
+
+    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")

example/android/app/src/debug/java/com/example/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.example;
+
+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());
+      }
+    }
+  }
+}

example/android/app/src/main/AndroidManifest.xml

@@ -13,7 +13,8 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+        android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

example/android/app/src/main/java/com/example/MainApplication.java

@@ -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;
@@ -43,23 +44,28 @@ 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);
+        Class<?> aClass = Class.forName("com.example.ReactNativeFlipper");
+        aClass
+            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
+            .invoke(null, context, reactInstanceManager);
       } catch (ClassNotFoundException e) {
         e.printStackTrace();
       } catch (NoSuchMethodException e) {