feat: Add Android support for progress-view (#58)

Co-authored-by: Alpha <[email protected]>

.flowconfig

@@ -3,6 +3,12 @@
 .*/*[.]android.js
 .*/*[.]windows.js
 
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore polyfills
+node_modules/react-native/Libraries/polyfills/.*
+
 ; These should not be required directly
 ; require from fbjs/lib instead: require('fbjs/lib/warning')
 .*/node_modules/warning/.*
@@ -19,8 +25,8 @@
 .*/node_modules/.*
 
 [libs]
-interface.js
-flow/
+node_modules/react-native/interface.js
+node_modules/react-native/flow/
 
 [options]
 emoji=true
@@ -36,19 +42,15 @@ 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='^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'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
-suppress_type=$FlowFixMeEmpty
 
-experimental.well_formed_exports=true
-experimental.types_first=true
-experimental.abstract_locations=true
+sharedmemory.heap_size=4000000000
 
 [lints]
 sketchy-null-number=warn
@@ -60,8 +62,6 @@ deprecated-type=warn
 unsafe-getters-setters=warn
 unnecessary-invariant=warn
 signature-verification-failure=warn
-deprecated-utility=error
-unsafe-addition=error
 
 [strict]
 deprecated-type
@@ -73,4 +73,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.127.0
+^0.137.0

.github/workflows/ci.yml

@@ -6,7 +6,7 @@ jobs:
     runs-on: ubuntu-18.04
     strategy:
       matrix:
-        node-version: [10]
+        node-version: [12]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-18.04
     strategy:
       matrix:
-        node-version: [10]
+        node-version: [12]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
@@ -48,7 +48,7 @@ jobs:
     runs-on: ubuntu-18.04
     strategy:
       matrix:
-        node-version: [10]
+        node-version: [12]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
@@ -69,7 +69,7 @@ jobs:
     runs-on: ubuntu-18.04
     strategy:
       matrix:
-        node-version: [10]
+        node-version: [12]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
@@ -90,7 +90,7 @@ jobs:
     runs-on: macos-latest
     strategy:
       matrix:
-        node-version: [10]
+        node-version: [12]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1

android/build.gradle

@@ -12,12 +12,12 @@ buildscript {
 apply plugin: 'com.android.library'
 
 android {
-    compileSdkVersion 28
-    buildToolsVersion "28.0.3"
+    compileSdkVersion 30
+    buildToolsVersion "29.0.3"
 
     defaultConfig {
-        minSdkVersion 16
-        targetSdkVersion 28
+        minSdkVersion 21
+        targetSdkVersion 30
         versionCode 1
         versionName "1.0"
     }

android/src/main/java/com/reactnativecommunity/progressview/RNCProgressViewManager.java

@@ -0,0 +1,53 @@
+package com.reactnativecommunity.progressview;
+
+import android.content.res.ColorStateList;
+import android.widget.ProgressBar;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+public class RNCProgressViewManager extends SimpleViewManager<ProgressBar> {
+    private static final int MAX_PROGRESS_VALUE = 1000;
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "RNCProgressView";
+    }
+
+    @NonNull
+    @Override
+    protected ProgressBar createViewInstance(@NonNull ThemedReactContext reactContext) {
+        ProgressBar bar = new ProgressBar(
+                reactContext,
+                null,
+                android.R.attr.progressBarStyleHorizontal
+        );
+        bar.setMax(MAX_PROGRESS_VALUE);
+        return bar;
+    }
+
+    @ReactProp(name = "progress")
+    public void setProgress(ProgressBar bar, double progress) {
+        bar.setProgress((int) (MAX_PROGRESS_VALUE * progress));
+    }
+
+    @ReactProp(name = "progressTintColor", customType = "Color")
+    public void setProgressTintColor(ProgressBar bar, int color) {
+        bar.setIndeterminateTintList(ColorStateList.valueOf(color));
+        bar.setProgressTintList(ColorStateList.valueOf(color));
+    }
+
+    @ReactProp(name = "trackTintColor", customType = "Color")
+    public void setTrackTintColor(ProgressBar bar, int color) {
+        bar.setProgressBackgroundTintList(ColorStateList.valueOf(color));
+    }
+
+    @ReactProp(name = "isIndeterminate")
+    public void setIsIndeterminate(ProgressBar bar, boolean isIndeterminate) {
+        bar.setIndeterminate(isIndeterminate);
+    }
+}

android/src/main/java/com/reactnativecommunity/progressview/RNCProgressViewPackage.java

@@ -1,28 +1,25 @@
-
 package com.reactnativecommunity.progressview;
 
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
+import androidx.annotation.NonNull;
 
 import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.uimanager.ViewManager;
-import com.facebook.react.bridge.JavaScriptModule;
+
+import java.util.Collections;
+import java.util.List;
+
 public class RNCProgressViewPackage implements ReactPackage {
+    @NonNull
     @Override
-    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
-      return Arrays.<NativeModule>asList(new RNCProgressViewModule(reactContext));
-    }
-
-    // Deprecated from RN 0.47
-    public List<Class<? extends JavaScriptModule>> createJSModules() {
-      return Collections.emptyList();
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+        return Collections.emptyList();
     }
 
+    @NonNull
     @Override
-    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-      return Collections.emptyList();
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+        return Collections.<ViewManager>singletonList(new RNCProgressViewManager());
     }
-}
+}

example/App.js

@@ -33,7 +33,7 @@ export class App extends React.Component<Props, State> {
   /* $FlowFixMe(>=0.85.0 site=react_native_fb) This comment suppresses an error
    * found when Flow v0.85 was deployed. To see the error, delete this comment
    * and run Flow. */
-  getProgress = offset => {
+  getProgress = (offset) => {
     const progress = this.state.progress + offset;
     return Math.sin(progress % Math.PI) % 1;
   };

example/android/app/build.gradle

@@ -190,6 +190,7 @@ dependencies {
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
+
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'
     }
@@ -210,7 +211,6 @@ dependencies {
     } else {
         implementation jscFlavor
     }
-
     // used for example
     implementation project(':progressview')
 }

example/android/settings.gradle

@@ -1,3 +1,6 @@
 rootProject.name = 'example'
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
+
+include ':progressview'
+project(':progressview').projectDir = new File(rootProject.projectDir, '../../android')

js/ProgressView.android.js

@@ -9,35 +9,19 @@
 'use strict';
 
 import * as React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
+import {requireNativeComponent} from 'react-native';
 
-class DummyProgressViewIOS extends React.Component {
-  render() {
-    return (
-      <View style={[styles.dummy, this.props.style]}>
-        <Text style={styles.text}>
-          ProgressViewIOS is not supported on this platform!
-        </Text>
-      </View>
-    );
-  }
-}
+const RNCProgressView = requireNativeComponent('RNCProgressView');
 
-const styles = StyleSheet.create({
-  dummy: {
-    width: 120,
-    height: 20,
-    backgroundColor: '#ffbcbc',
-    borderWidth: 1,
-    borderColor: 'red',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    color: '#333333',
-    margin: 5,
-    fontSize: 10,
-  },
-});
+export default function ProgressView(props) {
+  const nativeProps = {
+    testID: props.testID,
+    progress: props.progress,
+    progressTintColor: props.progressTintColor,
+    trackTintColor: props.trackTintColor,
+    isIndeterminate: props.isIndeterminate,
+    style: [{height: 20}, props.style],
+  };
 
-export default DummyProgressViewIOS;
+  return <RNCProgressView {...nativeProps} />;
+}

js/ProgressView.ios.js

@@ -15,7 +15,7 @@ import {StyleSheet} from 'react-native';
 import RNCProgressViewNativeComponent from './RNCProgressViewNativeComponent';
 
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
-import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 
 type Props = $ReadOnly<{|

js/ProgressView.macos.js

@@ -15,7 +15,7 @@ import {StyleSheet} from 'react-native';
 
 import RNCProgressViewNativeComponent from './RNCProgressViewNativeComponent';
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
-import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 
 type Props = $ReadOnly<{|

js/RNCProgressViewNativeComponent.js

@@ -13,7 +13,7 @@ import {requireNativeComponent} from 'react-native';
 
 import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
-import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 
 type NativeProps = $ReadOnly<{|

metro.config.js

@@ -5,7 +5,7 @@
  * @format
  */
 
- module.exports = {
+module.exports = {
   transformer: {
     getTransformOptions: async () => ({
       transform: {

package.json

@@ -59,7 +59,7 @@
     "babel-jest": "^26.6.3",
     "babel-plugin-module-resolver": "^3.2.0",
     "eslint": "^7.14.0",
-    "flow-bin": "^0.127.0",
+    "flow-bin": "0.137.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.64.0",
     "react": "17.0.1",

tsconfig.json

@@ -6,6 +6,7 @@
     "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
     /* Strict Type-Checking Options */
     "strict": true /* Enable all strict type-checking options. */,
+    "skipLibCheck": true,
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
   }
 }

yarn.lock

@@ -5387,10 +5387,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@^0.127.0:
-  version "0.127.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.127.0.tgz#0614cff4c1b783beef1feeb7108d536e09d77632"
-  integrity sha512-ywvCCdV4NJWzrqjFrMU5tAiVGyBiXjsJQ1+/kj8thXyX15V17x8BFvNwoAH97NrUU8T1HzmFBjLzWc0l2319qg==
+flow-bin@0.137.0:
+  version "0.137.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.137.0.tgz#322a15b3744195af1e02bf1fec0a716296aee7d5"
+  integrity sha512-ytwUn68fPKK/VWVpCxJ4KNeNIjCC/uX0Ll6Z1E98sOXfMknB000WtgQjKYDdO6tOR8mvXBE0adzjgCrChVympw==
 
 flow-parser@0.*:
   version "0.149.0"