Typescript, iPhone 11 family support, iPhone 12 family support

.eslintrc.js

@@ -1,6 +1,13 @@
 module.exports = {
+  root: true,
+  extends: [
+    "@react-native-community",
+    "airbnb-typescript",
+    "prettier",
+    "prettier/@typescript-eslint",
+    "prettier/react"
+  ],
   parser: "babel-eslint",
-  extends: "airbnb",
   plugins: ["react", "react-native"],
   env: {
     jest: true,
@@ -11,7 +18,7 @@ module.exports = {
     "react/jsx-filename-extension": [
       "error",
       {
-        extensions: [".js", ".jsx"]
+        extensions: [".js", ".jsx", ".tsx", ".ts"]
       }
     ],
     // for post defining style object in react-native

.npmignore

@@ -4,5 +4,5 @@ node_modules
 # Example 
 example
 # Assets
-Assets/Screenshots
-assets/Screenshots
+Assets
+assets

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  singleQuote: false,
+  trailingComma: "all",
+  tabWidth: 2,
+  semi: true,
+};

example/.eslintrc.js

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

example/.gitignore

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

example/.prettierrc.js

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

example/App.js → example/App.tsx

@@ -1,29 +1,26 @@
-import React from "react";
-import { StyleSheet, Dimensions, Text, View } from "react-native";
-import { Card, Container } from "react-native-card-collection";
+import React from 'react';
+import {StyleSheet, Dimensions, Text, View} from 'react-native';
+import {Card, Container} from 'react-native-card-collection';
 import {
   ScreenWidth,
   ScreenHeight,
   isIOS,
   isAndroid,
-  isIPhoneXFamily,
+  isIPhoneNotchFamily,
   hasNotch,
-  isIPhoneX,
-  isIPhoneXr,
-  isIPhoneXs,
   isIPhoneXsMax,
   numberFormat,
   getStatusBarHeight,
-  normalizeText
-} from "@freakycoder/react-native-helpers";
+  normalizeText,
+} from './build/dist/index';
 
-const dim = Dimensions.get("window");
+const dim = Dimensions.get('window');
 
 export default class App extends React.Component {
   renderDeviceInfoContainers() {
     return (
       <View>
-        <Container title="Device OS" subtitle={isIOS ? "iOS" : "Android"} />
+        <Container title="Device OS" subtitle={isIOS ? 'iOS' : 'Android'} />
         <Container title="Screen Height" subtitle={ScreenHeight} />
         <Container title="Screen Width" subtitle={ScreenWidth} />
       </View>
@@ -35,11 +32,13 @@ export default class App extends React.Component {
       <View>
         <Container
           title="hasNotch?"
-          subtitle={hasNotch() ? "iPhone X Family" : "iPhone Family"}
+          subtitle={hasNotch() ? 'iPhone Notch Family' : 'Normal iPhone Family'}
         />
         <Container
           title="isIPhoneXsMax?"
-          subtitle={isIPhoneXsMax(dim) ? "iPhone XsMax" : "NOT iPhone XsMax"}
+          subtitle={
+            isIPhoneXsMax(dim) ? 'YES! iPhone XsMax' : 'NOT iPhone XsMax'
+          }
         />
         <Container
           title="getStatusBarHeight?"
@@ -54,41 +53,41 @@ export default class App extends React.Component {
       <View style={styles.container}>
         <Text style={styles.titleStyle}>React Native Helpers</Text>
         <Card>{this.renderDeviceInfoContainers()}</Card>
-        <View style={{ marginTop: 24 }}>
+        <View style={{marginTop: 24}}>
           <Card headerText="Notch Information">
             {this.renderNotchContainers()}
           </Card>
         </View>
-        <View style={{ marginTop: 24 }}>
+        <View style={{marginTop: 24}}>
           <Card headerText="NumberFormat">
             <Container
               title="Default"
               subtitle={
-                <Text style={{ textAlign: "center" }}>
+                <Text style={{textAlign: 'center'}}>
                   {numberFormat(1093495)}
                 </Text>
               }
             />
             <Container
               title="GBP"
               subtitle={
-                <Text style={{ textAlign: "center" }}>
-                  GBP:{" "}
-                  {numberFormat(1093495, "en", {
-                    style: "currency",
-                    currency: "GBP"
+                <Text style={{textAlign: 'center'}}>
+                  GBP:{' '}
+                  {numberFormat(1093495, 'en', {
+                    style: 'currency',
+                    currency: 'GBP',
                   })}
                 </Text>
               }
             />
             <Container
               title="JPY"
               subtitle={
-                <Text style={{ textAlign: "center" }}>
-                  JPY:{" "}
-                  {numberFormat(50494134, "ja", {
-                    style: "currency",
-                    currency: "JPY"
+                <Text style={{textAlign: 'center'}}>
+                  JPY:{' '}
+                  {numberFormat(50494134, 'ja', {
+                    style: 'currency',
+                    currency: 'JPY',
                   })}
                 </Text>
               }
@@ -103,13 +102,13 @@ export default class App extends React.Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    marginTop: "15%",
-    alignItems: "center",
-    backgroundColor: "#fff"
+    marginTop: '15%',
+    alignItems: 'center',
+    backgroundColor: '#fff',
   },
   titleStyle: {
     fontSize: normalizeText(30),
-    fontWeight: "700",
-    paddingBottom: 36
-  }
+    fontWeight: '700',
+    paddingBottom: 36,
+  },
 });

example/android/app/build.gradle

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