perf: improve ios perf, refactor code, update readme for Expo

Author: maitrungduc1410

README.md

@@ -43,23 +43,26 @@ With npm:
 With yarn:
 `$ yarn add react-native-loader-kit`
 
-## Extra setup step for iOS
+## For iOS
 Run the following command to setup for iOS:
 ```
 npx pod-install ios
 ```
+## For Expo
+You need to run `prebuild` in order for native code takes effect:
+```
+npx expo prebuild
+```
 # Usage
 ```js
 import LoaderKit from 'react-native-loader-kit'
 
 <LoaderKit
   style={{ width: 50, height: 50 }}
   name={'BallPulse'} // Optional: see list of animations below
-  size={50} // Required on iOS
   color={'red'} // Optional: color can be: 'red', 'green',... or '#ddd', '#ffffff',...
 />
 ```
-> Note: size is required for iOS and should equal to `width` and `height`
 # List animations
 As shown in the demo above, animations are as follows: 
 ## Default animations (both Android and iOS)

android/build.gradle

@@ -3,11 +3,10 @@ buildscript {
         repositories {
             google()
             mavenCentral()
-            jcenter()
         }
 
         dependencies {
-            classpath 'com.android.tools.build:gradle:3.5.3'
+            classpath 'com.android.tools.build:gradle:3.5.4'
         }
     }
 }
@@ -19,10 +18,10 @@ def safeExtGet(prop, fallback) {
 }
 
 android {
-    compileSdkVersion safeExtGet('LoaderKit_compileSdkVersion', 29)
+    compileSdkVersion safeExtGet('LoaderKit_compileSdkVersion', 30)
     defaultConfig {
         minSdkVersion safeExtGet('LoaderKit_minSdkVersion', 16)
-        targetSdkVersion safeExtGet('LoaderKit_targetSdkVersion', 29)
+        targetSdkVersion safeExtGet('LoaderKit_targetSdkVersion', 30)
         versionCode 1
         versionName "1.0"
 
@@ -50,7 +49,6 @@ repositories {
     }
     google()
     mavenCentral()
-    jcenter()
 }
 
 dependencies {

android/src/main/java/com/reactnativeloaderkit/LoaderKitViewManager.java

@@ -26,10 +26,10 @@ public AVLoadingIndicatorView createViewInstance(ThemedReactContext context) {
 
   @ReactProp(name = "name")
   public void setName(AVLoadingIndicatorView view, String name) {
-    view.setIndicator(name + "Indicator");
+    view.setIndicator(name != null ? name + "Indicator" : "BallPulseIndicator");
   }
 
-  @ReactProp(name = "color")
+  @ReactProp(name = "color", defaultInt = Color.WHITE)
   public void setColor(AVLoadingIndicatorView view, int color) {
     view.setIndicatorColor(color);
   }

example/src/App.tsx

@@ -7,20 +7,15 @@ import {
   SafeAreaView,
   Dimensions,
 } from 'react-native';
-import LoaderKit from 'react-native-loader-kit';
-import animations from '../../src/animations';
+import LoaderKit, { animations } from 'react-native-loader-kit';
 
 const { height } = Dimensions.get('window');
 
 const App = () => {
   const renderLoaders = animations.map((item, index) => (
     <View style={{ margin: 10 }} key={index}>
       <Text style={{ color: 'white', textAlign: 'center' }}>{index + 1}</Text>
-      <LoaderKit
-        style={{ width: 50, height: 50, marginTop: 3 }}
-        name={item}
-        size={50}
-      />
+      <LoaderKit style={{ width: 50, height: 50, marginTop: 3 }} name={item} />
     </View>
   ));
 

ios/LoaderKitViewManager.m

@@ -2,8 +2,6 @@
 
 @interface RCT_EXTERN_MODULE(LoaderKitViewManager, RCTViewManager)
 
-RCT_EXPORT_VIEW_PROPERTY(size, NSNumber)
-
 RCT_EXPORT_VIEW_PROPERTY(name, NSString)
 
 RCT_EXPORT_VIEW_PROPERTY(color, NSNumber)

ios/LoaderKitViewManager.swift

@@ -49,69 +49,43 @@ class LoaderKitView : UIView {
         "CircleStrokeSpin": NVActivityIndicatorType.circleStrokeSpin,
     ]
 
-    var loader: NVActivityIndicatorView!
-    var currentSize = 48.0
+    private var loader = NVActivityIndicatorView(frame: .zero, type: NVActivityIndicatorView.DEFAULT_TYPE)
 
     override init(frame: CGRect) {
         super.init(frame: frame)
 
-        let frameObj = CGRect(x: 0, y: 0, width: 200, height: 200)
-        self.loader = NVActivityIndicatorView(frame: frameObj, type: NVActivityIndicatorView.DEFAULT_TYPE)
-        self.addSubview(self.loader)
-        self.loader.startAnimating()
+        addSubview(loader)
+        
+        loader.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            loader.leadingAnchor.constraint(equalTo: leadingAnchor),
+            loader.trailingAnchor.constraint(equalTo: trailingAnchor),
+            loader.topAnchor.constraint(equalTo: topAnchor),
+            loader.bottomAnchor.constraint(equalTo: bottomAnchor),
+        ])
+        
+        loader.startAnimating()
     }
 
     required init?(coder aDecoder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
 
-    @objc
-    var size: NSNumber? {
-        set {
-            if newValue != nil {
-                self.loader.stopAnimating()
-                let frameObj = CGRect(x: 0, y: 0, width: newValue!.doubleValue, height: newValue!.doubleValue)
-                self.loader.frame = frameObj
-                self.loader.startAnimating()
-                
-                self.currentSize = newValue!.doubleValue
-            }
-        }
-        get {
-            return nil;
-        }
-    }
-    
     @objc
     var name: NSString? {
-        set {
-            if newValue != nil && animations[newValue! as String] != nil {
-                self.loader.stopAnimating()
-                let frameObj = CGRect(x: 0, y: 0, width: self.currentSize, height: self.currentSize)
-                self.loader.frame = frameObj
-                self.loader.type = animations[newValue! as String]!
-                self.loader.startAnimating()
-                
-            }
-        }
-        get {
-            return nil;
+        didSet {
+            loader.stopAnimating()
+            loader.type = (name != nil ? animations[name! as String] : animations["BallPulse"])!
+            loader.startAnimating()
         }
     }
 
     @objc
     var color: NSNumber? {
-        set {
-            if newValue != nil {
-                self.loader.stopAnimating()
-                let frameObj = CGRect(x: 0, y: 0, width: self.currentSize, height: self.currentSize)
-                self.loader.frame = frameObj
-                self.loader.color = RCTConvert.uiColor(newValue)
-                self.loader.startAnimating()
-            }
-        }
-        get {
-            return nil;
+        didSet {
+            loader.stopAnimating()
+            loader.color = color != nil ? RCTConvert.uiColor(color) : .white
+            loader.startAnimating()
         }
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-loader-kit",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "✳️Purely native loader indicators for React Native✳️",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/index.tsx

@@ -2,8 +2,8 @@ import {
   requireNativeComponent,
   UIManager,
   Platform,
-  ViewStyle,
   processColor,
+  ViewProps,
 } from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -15,19 +15,17 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo managed workflow\n';
 
-type BaseProps = {
+interface BaseProps extends ViewProps {
   name?: string;
-  size?: number;
-  style: ViewStyle;
-};
+}
 
-type LoaderKitProps = {
+interface LoaderKitProps extends BaseProps {
   color?: string;
-} & BaseProps;
+}
 
-type LoaderKitNativeProps = {
+interface LoaderKitNativeProps extends BaseProps {
   color?: number;
-} & BaseProps;
+}
 
 const ComponentName = 'LoaderKitView';
 const LoaderKitNative =
@@ -40,11 +38,11 @@ const LoaderKit = (props: LoaderKitProps) => {
 LoaderKit.propTypes = {
   name: PropTypes.oneOf(animations),
   color: PropTypes.string,
-  size: Platform.OS === 'ios' ? PropTypes.number.isRequired : PropTypes.number,
 };
 
 export default UIManager.getViewManagerConfig(ComponentName) != null
   ? LoaderKit
   : () => {
       throw new Error(LINKING_ERROR);
     };
+export { animations };