Upgrade example to RN 0.61.5 (#11)

Upgrade example to RN 0.61.5

Author: Naturalclar

README.md

@@ -7,17 +7,26 @@
 
 `$ npm install @react-native-community/progress-bar-android --save`
 
+or
+
+`$ yarn add @react-native-community/progress-bar-android`
+
 ## Example setup
 ![](https://user-images.githubusercontent.com/25158423/57262658-0d4c5b00-703b-11e9-9e0d-bdf7cb8f942a.gif)
 
 ### Android
 1. Install dependencies
-2. Start the server
-3. Build the application
-```
-npm install
-npm run start
-npm run build:android
+1. Install dependencies for example folder
+1. Start the metro bundler
+1. Build the application
+
+```sh
+yarn install
+cd example
+# inside example
+yarn install
+yarn start
+yarn android
 ```
 
 ### Mostly automatic installation
@@ -51,11 +60,19 @@ npm run build:android
 
 
 ## Usage
-```javascript
-import RNCAndroidprogressbar from '@react-native-community/progress-bar-android';
+```jsx
+import { View } from 'react-native'
+import { ProgressBar } from '@react-native-community/progress-bar-android';
+
+
+export const Example = () => {
+	return (
+		<View>
+			<ProgressBar styleAttr="Horizontal" />
+		</View>
+	)
+}
 
-// TODO: What to do with the module?
-RNCAndroidprogressbar;
 ```
 
 [lean-core-badge]: https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg?style=flat-square

example/ProgressBarAndroidExample.android.js

@@ -10,15 +10,15 @@
 
 'use strict';
 
-var ProgressBar = require('../js/RNCProgressBarAndroid.android');
-var React = require('react');
-var createReactClass = require('create-react-class');
-var RNTesterBlock = require('./RNTesterBlock');
-var RNTesterPage = require('./RNTesterPage');
+import {ProgressBar} from '@react-native-community/progress-bar-android';
+import React from 'react';
+import createReactClass from 'create-react-class';
+import RNTesterBlock from './RNTesterBlock';
+import RNTesterPage from './RNTesterPage';
 
-var TimerMixin = require('react-timer-mixin');
+import TimerMixin from 'react-timer-mixin';
 
-var MovingBar = createReactClass({
+const MovingBar = createReactClass({
   displayName: 'MovingBar',
   mixins: [TimerMixin],
 

example/RNTesterBlock.js

@@ -10,10 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, View} = ReactNative;
+import React from 'react';
+import PropTypes from 'prop-types';
+import {StyleSheet, Text, View} from 'react-native';
 
 class RNTesterBlock extends React.Component<
   {
@@ -95,4 +94,4 @@ var styles = StyleSheet.create({
   },
 });
 
-module.exports = RNTesterBlock;
+export default RNTesterBlock;

example/RNTesterPage.js

@@ -10,12 +10,11 @@
 
 'use strict';
 
-var PropTypes = require('prop-types');
-var React = require('react');
-var ReactNative = require('react-native');
-var {ScrollView, StyleSheet, View} = ReactNative;
+import React from 'react';
+import PropTypes from 'prop-types';
+import {ScrollView, StyleSheet, View} from 'react-native';
 
-var RNTesterTitle = require('./RNTesterTitle');
+import RNTesterTitle from './RNTesterTitle';
 
 class RNTesterPage extends React.Component<{
   noScroll?: boolean,
@@ -74,4 +73,4 @@ var styles = StyleSheet.create({
   },
 });
 
-module.exports = RNTesterPage;
+export default RNTesterPage;

example/RNTesterTitle.js

@@ -10,9 +10,8 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, View} = ReactNative;
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
 
 class RNTesterTitle extends React.Component<$FlowFixMeProps> {
   render() {
@@ -41,4 +40,4 @@ var styles = StyleSheet.create({
   },
 });
 
-module.exports = RNTesterTitle;
+export default RNTesterTitle;

example/android/app/.classpath

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <classpath>
-	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-12/"/>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/"/>
 	<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
 	<classpathentry kind="output" path="bin/default"/>
 </classpath>

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

@@ -9,7 +9,7 @@ import com.android.build.OutputFile
  * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
  * bundle directly from the development server. Below you can see all the possible configurations
  * and their defaults. If you decide to add a configuration block, make sure to add it before the
- * `apply from: "../../../node_modules/react-native/react.gradle"` line.
+ * `apply from: "../../node_modules/react-native/react.gradle"` line.
  *
  * project.ext.react = [
  *   // the name of the generated asset file containing your JS bundle
@@ -18,6 +18,9 @@ import com.android.build.OutputFile
  *   // the entry file for bundle generation
  *   entryFile: "index.android.js",
  *
+ *   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
+ *   bundleCommand: "ram-bundle",
+ *
  *   // whether to bundle JS and assets in debug mode
  *   bundleInDebug: false,
  *
@@ -73,10 +76,11 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    entryFile: "index.js"
+    entryFile: "index.js",
+    enableHermes: false,  // clean and rebuild if changing
 ]
 
-apply from: "../../../node_modules/react-native/react.gradle"
+apply from: "../../node_modules/react-native/react.gradle"
 
 /**
  * Set this to true to create two separate APKs instead of one:
@@ -93,6 +97,28 @@ def enableSeparateBuildPerCPUArchitecture = false
  */
 def enableProguardInReleaseBuilds = false
 
+/**
+ * The preferred build flavor of JavaScriptCore.
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US.  Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+/**
+ * Whether to enable the Hermes VM.
+ *
+ * This should be set on project.ext.react and mirrored here.  If it is not set
+ * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
+ * and the benefits of using Hermes will therefore be sharply reduced.
+ */
+def enableHermes = project.ext.react.get("enableHermes", false);
+
 android {
     compileSdkVersion rootProject.ext.compileSdkVersion
 
@@ -116,8 +142,22 @@ android {
             include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
         }
     }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
     buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
         release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://facebook.github.io/react-native/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
@@ -126,21 +166,29 @@ android {
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
-            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
-            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
+            // https://developer.android.com/studio/build/configure-apk-splits.html
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
                         versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
             }
+
         }
     }
 }
 
 dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
-    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation "com.facebook.react:react-native:+"  // From node_modules
+
+    if (enableHermes) {
+        def hermesPath = "../../node_modules/hermes-engine/android/";
+        debugImplementation files(hermesPath + "hermes-debug.aar")
+        releaseImplementation files(hermesPath + "hermes-release.aar")
+    } else {
+        implementation jscFlavor
+    }
 }
 
 // Run this once to be able to run the application with BUCK
@@ -149,3 +197,5 @@ task copyDownloadableDepsToLibs(type: Copy) {
     from configurations.compile
     into 'libs'
 }
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

example/android/app/build.gradle

@@ -8,10 +8,3 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}

example/android/app/proguard-rules.pro

@@ -4,12 +4,12 @@
 
 public class MainActivity extends ReactActivity {
 
-    /**
-     * Returns the name of the main component registered from JavaScript.
-     * This is used to schedule rendering of the component.
-     */
-    @Override
-    protected String getMainComponentName() {
-        return "AndroidProgressBarExample";
-    }
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  @Override
+  protected String getMainComponentName() {
+    return "AndroidProgressBarExample";
+  }
 }