Sample Libraries

* first commit

* name change wip

* ios run successful

* add husky

* wip

* clipboard & pressable

* rn-config

* rn-action-view

* rn-contacts to start

* wip

* rn-contacts done

* wip

* razorpay done

* permissions screen

* location wip

* wip

* ios-permissions wip

* rm rn-permissions

* geolocation svc done

* update README

* minor changes

* minor changes

* intial setup android

* fixes after merge

* razorpay now works

* getcontacts wip

* contacts android done

* location & contacts done

* remove unused libs

* remove netinfo

* run prettier

* ios app start changes

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

.babelrc

@@ -1,4 +1,5 @@
 {
+    "presets": ["module:metro-react-native-babel-preset"],
     "plugins": [
         [
             "module-resolver",

.env.sample

@@ -0,0 +1,5 @@
+SOME_ENV_KEY=THis_is_a_text_from_.env_file
+
+RAZORPAY_SANDBOX_KEY=rzp_test_blablabla
+
+RAZORPAY_SANDBOX_SECRET=I_WONT_TELL_YOU

.eslintrc.js

@@ -1,4 +1,21 @@
 module.exports = {
-    root: true,
-    extends: '@react-native-community',
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: ['eslint:recommended', 'plugin:react/recommended'],
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 12,
+        sourceType: 'module',
+    },
+    plugins: ['react'],
+    rules: {
+        indent: ['error', 'tab'],
+        'linebreak-style': ['error', 'unix'],
+        quotes: ['error', 'single'],
+        semi: ['error', 'always'],
+    },
 };

.gitignore

@@ -2,6 +2,12 @@
 #
 .DS_Store
 
+.env.dev
+.env.development
+.env.testing
+.env.production
+.env.staging
+
 # Xcode
 #
 build/
@@ -57,3 +63,7 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+.env
+.env.dev
+.env.prod

README.md

@@ -1,41 +1,47 @@
-# RnTemplate
+# react-native-libs
 
-**"An Ideal app-template to start your next `react-native` project."**
-
-## Features
-
-- Project code properly organized, and using `alias-imports`.
-- Implemented Onboarding-screen.
-- Stack, Tab and Drawer Navigation.
-- Global state management using `mobx-react-lite`.
-- Support for theme and language change.
-- Added custom Google-font (Poppins). 
-- Added relevant links for easier & time-saving app development under the **Developer-Guide** section.
+**"One or more of the used libraries would be a must in your next `react-native` project"**
 
 ## Developer Guide
 
--   To create react-native-app with custom package name, do a project-wide find and replace ```com.awesomeproject → com.mycompany.myapp``` Also in the `android` directory,
-```src/main/java/com/awesomeproject → src/main/java/com/mycompany/myapp```
+-   Read the document of [react-native-config](https://www.npmjs.com/package/react-native-config) to use .env files based upon the shell. For running android app in windows, I used `SET ENVFILE=.env.staging && react-native run-android`.
 
 -   Generate your app Icon using [MakeAppIcon](https://makeappicon.com/).Read More about app icon setup on this [Link](https://aboutreact.com/react-native-change-app-icon/).iOS icons can be generated using `Icon Set Creater` app available on the App Store. Make sure to also provide a round icon with the name `ic_launcher_round.png` in your android folder for various `mipmap-` directories.
-Go to [easyappicon.com](https://easyappicon.com/).
+    Go to [easyappicon.com](https://easyappicon.com/).
 
-- Import this statement at the topmost line of your root as per `react-navigation` docs.
-```import 'react-native-gesture-handler';```
+-   Import this statement at the topmost line of your root as per `react-navigation` docs.
+    `import 'react-native-gesture-handler';`
 
 -   Enable Hermes [link](https://reactnative.dev/docs/hermes)
 
 -   To make sure that the content doesn't overlap, especially in iPhones, use `SafeAreaProvider`. Import this stmt at the top of your app code.
-```import { SafeAreaProvider } from 'react-native-safe-area-context';```
+    `import { SafeAreaProvider } from 'react-native-safe-area-context';`
 
 -   Install [Async Storage](https://react-native-async-storage.github.io/async-storage/). Needs to be manually linked. Go to [this thread](https://stackoverflow.com/questions/61479644/invalid-podfile-file-unable-to-locate-the-executable-node) if `npx pod-install` fails to run.
 
 -   Dependencies for `@react-navigation/stack` -> `react-native-safe-area-context`, `react-native-gesture-handler`. Run `npx pod-install` after installing the dependencies.
 
-- Using `react-native-reanimated` v-1.13.3 as v2 was not working fine.
+-   Using `react-native-reanimated` v-1.13.3 as v2 was not working fine.
+
+-   Manually link `react-native-vector-icons` in ios [link](https://medium.com/@vimniky/how-to-use-vector-icons-in-your-react-native-project-8212ac6a8f06). Check [this link](https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4) to add/remove fonts.
+
+## Main Libraries Used
+
+-   [@react-native-community/clipboard](https://www.npmjs.com/package/@react-native-community/clipboard)
+-   [react-native-config](https://www.npmjs.com/package/react-native-config)
+-   [react-native-contacts](https://www.npmjs.com/package/react-native-contacts)
+-   [react-native-geolocation-service](https://www.npmjs.com/package/react-native-geolocation-service)
+-   [react-native-razorpay](https://www.npmjs.com/package/react-native-razorpay)
+
+# Other Libaries not used here
 
-- Manually link `react-native-vector-icons` in ios [link](https://medium.com/@vimniky/how-to-use-vector-icons-in-your-react-native-project-8212ac6a8f06). Check [this link](https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4) to add/remove fonts. 
+-   [@react-native-community/cameraroll](https://www.npmjs.com/package/@react-native-community/cameraroll)
+-   [react-native-autogrow-textinput](https://www.npmjs.com/package/react-native-autogrow-textinput)
+-   [react-native-calendars](https://www.npmjs.com/package/react-native-calendars)
+-   [react-native-calendar-events](https://www.npmjs.com/package/react-native-calendar-events)
+-   [react-native-camera-kit](https://www.npmjs.com/package/react-native-camera-kit)
+-   [react-native-netinfo](https://www.npmjs.com/package/react-native-netinfo)
 
 # Support Me
 
-If you found this template helpful and saved your valuable time, consider [buying me a coffee](https://www.buymeacoffee.com/nish1896)  
+If you learnt something new and found this project helpful, consider [buying me a coffee](https://www.buymeacoffee.com/nish1896)

android/app/_BUCK

@@ -35,12 +35,12 @@ android_library(
 
 android_build_config(
     name = "build_config",
-    package = "com.nish.rntemplate",
+    package = "com.nish.reactnativelibs",
 )
 
 android_resource(
     name = "res",
-    package = "com.nish.rntemplate",
+    package = "com.nish.reactnativelibs",
     res = "src/main/res",
 )
 

android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
 
 import com.android.build.OutputFile
 
@@ -126,7 +127,7 @@ android {
     compileSdkVersion rootProject.ext.compileSdkVersion
 
     defaultConfig {
-        applicationId "com.nish.rntemplate"
+        applicationId "com.nish.reactnativelibs"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
@@ -184,6 +185,8 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+    implementation project(':react-native-razorpay')
+    implementation project(':react-native-contacts')
 
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'
@@ -215,3 +218,9 @@ task copyDownloadableDepsToLibs(type: Copy) {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+
+project.ext.vectoricons = [
+    iconFontNames: [ 'Ionicons.ttf' ] // Name of the font files you want to copy
+]
+
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

android/app/src/debug/java/com/blankapp/ReactNativeFlipper.java

@@ -4,7 +4,7 @@
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
  */
-package com.nish.rntemplate;
+package com.nish.reactnativelibs;
 
 import android.content.Context;
 import com.facebook.flipper.android.AndroidFlipperClient;

android/app/src/main/AndroidManifest.xml

@@ -1,7 +1,10 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="com.nish.rntemplate">
+  package="com.nish.reactnativelibs">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.READ_CONTACTS" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 
     <application
       android:name=".MainApplication"

android/app/src/main/java/com/nish/rntemplate/MainActivity.java → android/app/src/main/java/com/nish/reactnativelibs/MainActivity.java

@@ -1,4 +1,4 @@
-package com.nish.rntemplate;
+package com.nish.reactnativelibs;
 
 import com.facebook.react.ReactActivity;
 
@@ -10,6 +10,6 @@ public class MainActivity extends ReactActivity {
    */
   @Override
   protected String getMainComponentName() {
-    return "RnTemplate";
+    return "ReactNativeLibs";
   }
 }

android/app/src/main/java/com/nish/rntemplate/MainApplication.java → android/app/src/main/java/com/nish/reactnativelibs/MainApplication.java

@@ -1,4 +1,4 @@
-package com.nish.rntemplate;
+package com.nish.reactnativelibs;
 
 import android.os.Bundle;
 import android.app.Application;
@@ -10,6 +10,9 @@
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;
 
+import com.razorpay.rn.RazorpayPackage;
+import com.rt2zz.reactnativecontacts.ReactNativeContacts;
+
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
 
@@ -27,7 +30,7 @@ protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
           // Packages that cannot be autolinked yet can be added manually here, for example:
-          // packages.add(new MyReactNativePackage());
+          // packages.add(new ReactNativeContacts());
           return packages;
         }
 
@@ -64,7 +67,7 @@ private static void initializeFlipper(
          We use reflection here to pick up the class that initializes Flipper,
         since Flipper library is not available in release mode
         */
-        Class<?> aClass = Class.forName("com.nish.rntemplate.ReactNativeFlipper");
+        Class<?> aClass = Class.forName("com.nish.reactnativelibs.ReactNativeFlipper");
         aClass
             .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
             .invoke(null, context, reactInstanceManager);

android/app/src/main/res/values/strings.xml

@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">RnTemplate</string>
+    <string name="app_name">ReactNativeLibs</string>
 </resources>

android/settings.gradle

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

app.json

@@ -1,4 +1,4 @@
 {
-    "name": "RnTemplate",
-    "displayName": "RnTemplate"
+    "name": "ReactNativeLibs",
+    "displayName": "ReactNativeLibs"
 }

app/assets/i18n/en/common.json

@@ -7,11 +7,9 @@
         "cancel": "CANCEL"
     },
     "DRAWER": {
+        "contacts": "Contacts",
         "home": "Home",
-        "profile": "Profile",
-        "notifications": "Notifications",
-        "settings": "Settings",
-        "help": "Help & Support"
+        "settings": "Settings"
     },
     "HOMESCREEN": {
         "exitMsg": "Close the app?"
@@ -25,7 +23,7 @@
         "connection": "Please Check your Internet Connection",
         "enterPhone": "Enter Phone Number(With Country Code)",
         "enterOTP": "Enter OTP",
-        "getOTP":"Get OTP",
+        "getOTP": "Get OTP",
         "submitOTP": "Submit",
         "ssoGoogle": "Sign in with Google",
         "ssoFacebook": "Sign in with Facebook",

app/assets/i18n/fr/common.json

@@ -7,11 +7,9 @@
         "cancel": "Annuler"
     },
     "DRAWER": {
+        "contacts": "Contacts",
         "home": "Accueil",
-        "profile": "Profil",
-        "notifications": "Notifications",
-        "settings": "Réglages",
-        "help": "Support d'aide"
+        "settings": "Réglages"
     },
     "HOMESCREEN": {
         "exitMsg": "Fermer l'application ?"
@@ -25,7 +23,7 @@
         "connection": "S'il vous plait, vérifiez votre connexion internet",
         "enterPhone": "Entrez téléphone (Avec code de pays)",
         "enterOTP": "Entrez OTP",
-        "getOTP":"Obtenez OTP",
+        "getOTP": "Obtenez OTP",
         "submitOTP": "Soumettre",
         "ssoGoogle": "Connectez Google",
         "ssoFacebook": "Connectez Facebook",
@@ -39,4 +37,4 @@
     "USER": {
         "hiuser": "Salut {{userName}}"
     }
-}
+}

app/assets/i18n/hi/common.json

@@ -7,11 +7,9 @@
         "cancel": "रद्द करें"
     },
     "DRAWER": {
+        "contacts": "संपर्क",
         "home": "होम",
-        "profile": "प्रोफ़ाइल",
-        "notifications": "सूचनाएं",
-        "settings": "सैटिंग",
-        "help": "सहायता और समर्थन"
+        "settings": "सैटिंग"
     },
     "HOMESCREEN": {
         "exitMsg": "ऐप बंद करें?"
@@ -25,7 +23,7 @@
         "connection": "कृपया अपने इंटरनेट कनेक्शन की जाँच करें",
         "enterPhone": "फोन नंबर दर्ज करें (कोड के साथ)",
         "enterOTP": "OTP दर्ज करें",
-        "getOTP":"OTP प्राप्त करें",
+        "getOTP": "OTP प्राप्त करें",
         "submitOTP": "प्रस्तुत",
         "ssoGoogle": "Google से साइन इन करें",
         "ssoFacebook": "Facebook से साइन इन करें",

app/assets/themes/Dark.js

@@ -1,12 +1,12 @@
 export default Dark = {
     dark: true,
     colors: {
-        primary: '#ff5071', /* pinkish-red */
-        background: '#25293e', /* darkbluish black */
-        card: '#008c8c', /* maars-green */
-        text: '#f7f6f3', /* soft-white */
-        border: '#959fa8', /* light-gray */
-        notification: '#8a79af', /* black-currant */ 
-        heading: '#fdd261', /* mango */
+        primary: '#ff5071' /* pinkish-red */,
+        background: '#25293e' /* darkbluish black */,
+        card: '#008c8c' /* maars-green */,
+        text: '#f7f6f3' /* soft-white */,
+        border: '#959fa8' /* light-gray */,
+        notification: '#8a79af' /* black-currant */,
+        heading: '#fdd261' /* mango */,
     },
 };

app/assets/themes/Light.js

@@ -1,12 +1,12 @@
 export default Light = {
     dark: false,
     colors: {
-        primary: '#008cd1', /* sky-blue */
-        background: '#f7f6f3', /* soft-white */
-        card: '#6d9773', /* soft-green */
-        text: '#25293e',  /* soft black */
-        border: '#76777c', /* gray */
-        notification: '#8a79af', /* black-currant */ 
-        heading: '#04437d', /* dark-blue */
+        primary: '#008cd1' /* sky-blue */,
+        background: '#f7f6f3' /* soft-white */,
+        card: '#abcded' /* light sky-blue */,
+        text: '#25293e' /* soft black */,
+        border: '#76777c' /* gray */,
+        notification: '#8a79af' /* black-currant */,
+        heading: '#04437d' /* dark-blue */,
     },
 };