Skip to content

Commit 2df96ed

Browse files
kuraydevkuraydev
committed
customImageComponent prop is here with finally version 1.0.0
1 parent 9a37cc7 commit 2df96ed

35 files changed

Lines changed: 3793 additions & 3255 deletions

‎README.md‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
1111
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
1212

13-
1413
<p align="center">
1514
<img alt="React Native Animated Radio Button" src="assets/Screenshots/example.gif" height="700" />
1615
<img alt="React Native Gradient Header" src="assets/Screenshots/example.png" height="700" />
@@ -20,7 +19,7 @@
2019

2120
Add the dependency:
2221

23-
```ruby
22+
```bash
2423
npm i react-native-animated-radio-button
2524
```
2625

@@ -29,24 +28,22 @@ npm i react-native-animated-radio-button
2928
###### IMPORTANT! You need install them
3029

3130
```js
32-
"react": ">= 16.x.x",
33-
"react-native": ">= 0.55.x",
3431
"react-native-animatable": ">= 1.3.3"
3532
```
3633

3734
# Usage
3835

3936
## Import
4037

41-
```js
38+
```jsx
4239
import RadioButton from "react-native-animated-radio-button";
4340
```
4441

45-
## Usage
42+
## Fundamental Usage
4643

4744
You can check the example out 😏
4845

49-
```js
46+
```jsx
5047
<RadioButton
5148
size={50}
5249
isSelected
@@ -57,21 +54,22 @@ You can check the example out 😏
5754

5855
# Configuration - Props
5956

60-
| Property | Type | Default | Description |
61-
| ----------------------------- | :------: | :----------: | -------------------------------------------------------------------------------------------------------------------------------------- |
62-
| size | number | 16 | change the size of the radio button |
63-
| isSelected | boolean | false | set the selectable of the radio button |
64-
| isBounceable | boolean | true | enable or disable the bounceable effect |
65-
| innerColor | color | dodgerblue | change the radio button's inner circle color |
66-
| outerColor | color | dodgerblue | change the radio button's outer circle color |
67-
| onPress | function | () | set your own function when onPress is triggered |
68-
| disableBuiltinStateManagement | bool | false | disable the builtin state management to let your state management for the radio button |
69-
| 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** |
70-
| horizontal | bool | true | make the radio button's text horizontal or vertical |
71-
| fontSize | number | 16 | change the font size |
72-
| textColor | color | innerColor | change the text's color |
73-
| text | string | Radio Button | set your own text for each radio button |
74-
| disableText | bool | false | disable the text and only radio button works |
57+
| Property | Type | Default | Description |
58+
| ----------------------------- | :-------: | :----------: | -------------------------------------------------------------------------------------------------------------------------------------- |
59+
| size | number | 16 | change the size of the radio button |
60+
| isSelected | boolean | false | set the selectable of the radio button |
61+
| isBounceable | boolean | true | enable or disable the bounceable effect |
62+
| innerColor | color | dodgerblue | change the radio button's inner circle color |
63+
| outerColor | color | dodgerblue | change the radio button's outer circle color |
64+
| onPress | function | () | set your own function when onPress is triggered |
65+
| disableBuiltinStateManagement | bool | false | disable the builtin state management to let your state management for the radio button |
66+
| 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** |
67+
| horizontal | bool | true | make the radio button's text horizontal or vertical |
68+
| fontSize | number | 16 | change the font size |
69+
| textColor | color | innerColor | change the text's color |
70+
| text | string | Radio Button | set your own text for each radio button |
71+
| disableText | bool | false | disable the text and only radio button works |
72+
| customImageComponent | component | default | set your own custom component instead of default Image one |
7573

7674
## Credits
7775

@@ -83,6 +81,7 @@ The library itself also has a bouncy animation when onPress is triggered.
8381

8482
- [x] ~~LICENSE~~
8583
- [x] ~~Horizontal & Vertical text component as optional~~
84+
- [ ] Typescript Challenge!
8685
- [ ] Write an article about the lib on Medium
8786

8887
## Author

‎example/.eslintrc.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
module.exports = {
22
root: true,
33
extends: '@react-native-community',
4+
parser: '@typescript-eslint/parser',
5+
plugins: ['@typescript-eslint'],
46
};

‎example/.flowconfig‎

Lines changed: 0 additions & 75 deletions
This file was deleted.

‎example/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ build/
2929
local.properties
3030
*.iml
3131

32+
# Visual Studio Code
33+
#
34+
.vscode/
35+
3236
# node.js
3337
#
3438
node_modules/

‎example/.prettierrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
bracketSpacing: false,
3+
jsxBracketSameLine: true,
4+
singleQuote: true,
5+
trailingComma: 'all',
6+
};

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import React from "react";
2-
import { View, StatusBar, SafeAreaView } from "react-native";
2+
import {
3+
View,
4+
StatusBar,
5+
ImageBackground,
6+
Text,
7+
SafeAreaView,
8+
} from "react-native";
39
import RadioButton from "react-native-animated-radio-button";
410

511
const App = () => {
@@ -30,7 +36,6 @@ const App = () => {
3036
isBounceable={false}
3137
animation={"bounceIn"}
3238
onPress={() => console.log("RadioButton is pressed")}
33-
disableText={true}
3439
/>
3540
</View>
3641
<View style={{ marginTop: 16 }}>
@@ -42,7 +47,19 @@ const App = () => {
4247
outerColor="#6a29d9"
4348
animation={"bounceIn"}
4449
onPress={() => console.log("RadioButton is pressed")}
45-
disableImage={true}
50+
customImageComponent={
51+
<ImageBackground
52+
source={require("./assets/party.png")}
53+
style={{
54+
height: 50,
55+
width: 50,
56+
alignItems: "center",
57+
justifyContent: "center",
58+
}}
59+
>
60+
<Text>Hello</Text>
61+
</ImageBackground>
62+
}
4663
/>
4764
</View>
4865
</SafeAreaView>

example/__tests__/App-test.js renamed to example/__tests__/App-test.tsx

File renamed without changes.

example/android/app/BUCK renamed to example/android/app/_BUCK

File renamed without changes.

‎example/android/app/build.gradle‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ import com.android.build.OutputFile
1515
* // the name of the generated asset file containing your JS bundle
1616
* bundleAssetName: "index.android.bundle",
1717
*
18-
* // the entry file for bundle generation
18+
* // the entry file for bundle generation. If none specified and
19+
* // "index.android.js" exists, it will be used. Otherwise "index.js" is
20+
* // default. Can be overridden with ENTRY_FILE environment variable.
1921
* entryFile: "index.android.js",
2022
*
21-
* // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
23+
* // https://reactnative.dev/docs/performance#enable-the-ram-format
2224
* bundleCommand: "ram-bundle",
2325
*
2426
* // whether to bundle JS and assets in debug mode
@@ -76,7 +78,6 @@ import com.android.build.OutputFile
7678
*/
7779

7880
project.ext.react = [
79-
entryFile: "index.js",
8081
enableHermes: false, // clean and rebuild if changing
8182
]
8283

@@ -156,12 +157,13 @@ android {
156157
}
157158
release {
158159
// Caution! In production, you need to generate your own keystore file.
159-
// see https://facebook.github.io/react-native/docs/signed-apk-android.
160+
// see https://reactnative.dev/docs/signed-apk-android.
160161
signingConfig signingConfigs.debug
161162
minifyEnabled enableProguardInReleaseBuilds
162163
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
163164
}
164165
}
166+
165167
// applicationVariants are e.g. debug, release
166168
applicationVariants.all { variant ->
167169
variant.outputs.each { output ->
@@ -180,8 +182,24 @@ android {
180182

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

188+
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
189+
190+
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
191+
exclude group:'com.facebook.fbjni'
192+
}
193+
194+
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
195+
exclude group:'com.facebook.flipper'
196+
exclude group:'com.squareup.okhttp3', module:'okhttp'
197+
}
198+
199+
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
200+
exclude group:'com.facebook.flipper'
201+
}
202+
185203
if (enableHermes) {
186204
def hermesPath = "../../node_modules/hermes-engine/android/";
187205
debugImplementation files(hermesPath + "hermes-debug.aar")

‎example/android/app/src/debug/java/com/example/ReactNativeFlipper.java‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* <p>This source code is licensed under the MIT license found in the LICENSE file in the root
5+
* directory of this source tree.
6+
*/
7+
package com.example;
8+
9+
import android.content.Context;
10+
import com.facebook.flipper.android.AndroidFlipperClient;
11+
import com.facebook.flipper.android.utils.FlipperUtils;
12+
import com.facebook.flipper.core.FlipperClient;
13+
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
14+
import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
15+
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
16+
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
17+
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
18+
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
19+
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
20+
import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
21+
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
22+
import com.facebook.react.ReactInstanceManager;
23+
import com.facebook.react.bridge.ReactContext;
24+
import com.facebook.react.modules.network.NetworkingModule;
25+
import okhttp3.OkHttpClient;
26+
27+
public class ReactNativeFlipper {
28+
public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
29+
if (FlipperUtils.shouldEnableFlipper(context)) {
30+
final FlipperClient client = AndroidFlipperClient.getInstance(context);
31+
32+
client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
33+
client.addPlugin(new ReactFlipperPlugin());
34+
client.addPlugin(new DatabasesFlipperPlugin(context));
35+
client.addPlugin(new SharedPreferencesFlipperPlugin(context));
36+
client.addPlugin(CrashReporterPlugin.getInstance());
37+
38+
NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39+
NetworkingModule.setCustomClientBuilder(
40+
new NetworkingModule.CustomClientBuilder() {
41+
@Override
42+
public void apply(OkHttpClient.Builder builder) {
43+
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44+
}
45+
});
46+
client.addPlugin(networkFlipperPlugin);
47+
client.start();
48+
49+
// Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
50+
// Hence we run if after all native modules have been initialized
51+
ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
52+
if (reactContext == null) {
53+
reactInstanceManager.addReactInstanceEventListener(
54+
new ReactInstanceManager.ReactInstanceEventListener() {
55+
@Override
56+
public void onReactContextInitialized(ReactContext reactContext) {
57+
reactInstanceManager.removeReactInstanceEventListener(this);
58+
reactContext.runOnNativeModulesQueueThread(
59+
new Runnable() {
60+
@Override
61+
public void run() {
62+
client.addPlugin(new FrescoFlipperPlugin());
63+
}
64+
});
65+
}
66+
});
67+
} else {
68+
client.addPlugin(new FrescoFlipperPlugin());
69+
}
70+
}
71+
}
72+
}

0 commit comments

Comments
 (0)