customImageComponent prop is here with finally version 1.0.0

Author: WrathChaos

README.md

@@ -10,7 +10,6 @@
 [![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 Animated Radio Button" src="assets/Screenshots/example.gif" height="700" />
 <img alt="React Native Gradient Header" src="assets/Screenshots/example.png" height="700" />
@@ -20,7 +19,7 @@
 
 Add the dependency:
 
-```ruby
+```bash
 npm i react-native-animated-radio-button
 ```
 
@@ -29,24 +28,22 @@ npm i react-native-animated-radio-button
 ###### IMPORTANT! You need install them
 
 ```js
-"react": ">= 16.x.x",
-"react-native": ">= 0.55.x",
 "react-native-animatable": ">= 1.3.3"
 ```
 
 # Usage
 
 ## Import
 
-```js
+```jsx
 import RadioButton from "react-native-animated-radio-button";
 ```
 
-## Usage
+## Fundamental Usage
 
 You can check the example out 😏
 
-```js
+```jsx
 <RadioButton
   size={50}
   isSelected
@@ -57,21 +54,22 @@ You can check the example out 😏
 
 # Configuration - Props
 
-| Property                      |   Type   |   Default    | Description                                                                                                                            |
-| ----------------------------- | :------: | :----------: | -------------------------------------------------------------------------------------------------------------------------------------- |
-| size                          |  number  |      16      | change the size of the radio button                                                                                                    |
-| isSelected                    | boolean  |    false     | set the selectable of the radio button                                                                                                 |
-| isBounceable                  | boolean  |     true     | enable or disable the bounceable effect                                                                                                |
-| innerColor                    |  color   |  dodgerblue  | change the radio button's inner circle color                                                                                           |
-| outerColor                    |  color   |  dodgerblue  | change the radio button's outer circle color                                                                                           |
-| onPress                       | function |      ()      | set your own function when onPress is triggered                                                                                        |
-| disableBuiltinStateManagement |   bool   |    false     | disable the builtin state management to let your state management for the radio button                                                 |
-| active                        |   bool   |    false     | you can use this prop to set the radio button is active or not, this **ONLY works** when **built-in** state management is **disabled** |
-| horizontal                    |   bool   |     true     | make the radio button's text horizontal or vertical                                                                                    |
-| fontSize                      |  number  |      16      | change the font size                                                                                                                   |
-| textColor                     |  color   |  innerColor  | change the text's color                                                                                                                |
-| text                          |  string  | Radio Button | set your own text for each radio button                                                                                                |
-| disableText                   |   bool   |    false     | disable the text and only radio button works                                                                                           |
+| Property                      |   Type    |   Default    | Description                                                                                                                            |
+| ----------------------------- | :-------: | :----------: | -------------------------------------------------------------------------------------------------------------------------------------- |
+| size                          |  number   |      16      | change the size of the radio button                                                                                                    |
+| isSelected                    |  boolean  |    false     | set the selectable of the radio button                                                                                                 |
+| isBounceable                  |  boolean  |     true     | enable or disable the bounceable effect                                                                                                |
+| innerColor                    |   color   |  dodgerblue  | change the radio button's inner circle color                                                                                           |
+| outerColor                    |   color   |  dodgerblue  | change the radio button's outer circle color                                                                                           |
+| onPress                       | function  |      ()      | set your own function when onPress is triggered                                                                                        |
+| disableBuiltinStateManagement |   bool    |    false     | disable the builtin state management to let your state management for the radio button                                                 |
+| active                        |   bool    |    false     | you can use this prop to set the radio button is active or not, this **ONLY works** when **built-in** state management is **disabled** |
+| horizontal                    |   bool    |     true     | make the radio button's text horizontal or vertical                                                                                    |
+| fontSize                      |  number   |      16      | change the font size                                                                                                                   |
+| textColor                     |   color   |  innerColor  | change the text's color                                                                                                                |
+| text                          |  string   | Radio Button | set your own text for each radio button                                                                                                |
+| disableText                   |   bool    |    false     | disable the text and only radio button works                                                                                           |
+| customImageComponent          | component |   default    | set your own custom component instead of default Image one                                                                             |
 
 ## Credits
 
@@ -83,6 +81,7 @@ The library itself also has a bouncy animation when onPress is triggered.
 
 - [x] ~~LICENSE~~
 - [x] ~~Horizontal & Vertical text component as optional~~
+- [ ] Typescript Challenge!
 - [ ] Write an article about the lib on Medium
 
 ## Author

example/.eslintrc.js

@@ -1,4 +1,6 @@
 module.exports = {
   root: true,
   extends: '@react-native-community',
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
 };

example/.flowconfig

@@ -29,6 +29,10 @@ build/
 local.properties
 *.iml
 
+# Visual Studio Code
+#
+.vscode/
+
 # node.js
 #
 node_modules/

example/.gitignore

@@ -0,0 +1,6 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

example/.prettierrc.js

@@ -1,5 +1,11 @@
 import React from "react";
-import { View, StatusBar, SafeAreaView } from "react-native";
+import {
+  View,
+  StatusBar,
+  ImageBackground,
+  Text,
+  SafeAreaView,
+} from "react-native";
 import RadioButton from "react-native-animated-radio-button";
 
 const App = () => {
@@ -30,7 +36,6 @@ const App = () => {
             isBounceable={false}
             animation={"bounceIn"}
             onPress={() => console.log("RadioButton is pressed")}
-            disableText={true}
           />
         </View>
         <View style={{ marginTop: 16 }}>
@@ -42,7 +47,19 @@ const App = () => {
             outerColor="#6a29d9"
             animation={"bounceIn"}
             onPress={() => console.log("RadioButton is pressed")}
-            disableImage={true}
+            customImageComponent={
+              <ImageBackground
+                source={require("./assets/party.png")}
+                style={{
+                  height: 50,
+                  width: 50,
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Text>Hello</Text>
+              </ImageBackground>
+            }
           />
         </View>
       </SafeAreaView>

example/App.js renamed to example/App.tsx

@@ -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/__tests__/App-test.js renamed to example/__tests__/App-test.tsx

@@ -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/BUCK renamed to example/android/app/_BUCK

@@ -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" />