chore: new and upgraded example with customizable shown

Author: WrathChaos

example/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

example/.editorconfig

@@ -1,77 +1,16 @@
 module.exports = {
   root: true,
-  extends: "@react-native-community",
-  parser: "@typescript-eslint/parser",
-  plugins: ["import", "eslint-plugin-import", "@typescript-eslint"],
-  settings: {
-    "import/resolver": {
-      node: {
-        extensions: [
-          ".js",
-          ".jsx",
-          ".ts",
-          ".tsx",
-          ".d.ts",
-          ".android.js",
-          ".android.jsx",
-          ".android.ts",
-          ".android.tsx",
-          ".ios.js",
-          ".ios.jsx",
-          ".ios.ts",
-          ".ios.tsx",
-          ".web.js",
-          ".web.jsx",
-          ".web.ts",
-          ".web.tsx",
-        ],
+  extends: '@react-native-community',
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        '@typescript-eslint/no-shadow': ['error'],
+        'no-shadow': 'off',
+        'no-undef': 'off',
       },
     },
-  },
-  rules: {
-    quotes: [
-      "error",
-      "double",
-      {
-        avoidEscape: true,
-      },
-    ],
-    "max-len": ["error", 120],
-    "@typescript-eslint/ban-ts-comment": 2,
-    "@typescript-eslint/no-explicit-any": 2,
-    "@typescript-eslint/explicit-module-boundary-types": 0,
-    "react/jsx-filename-extension": ["error", { extensions: [".tsx"] }],
-    "react-native/no-unused-styles": 2,
-    "react-native/split-platform-components": 2,
-    "react-native/no-inline-styles": 0,
-    "react-native/no-color-literals": 0,
-    "react-native/no-raw-text": 0,
-    "import/no-extraneous-dependencies": 2,
-    "import/extensions": ["error", "never", { svg: "always" }],
-    "import/no-named-as-default-member": 2,
-    "import/order": ["error", { "newlines-between": "always" }],
-    "import/no-duplicates": 2,
-    "import/no-useless-path-segments": 2,
-    "import/no-cycle": 2,
-    "import/prefer-default-export": 0,
-    "import/no-anonymous-default-export": 0,
-    "import/named": 0,
-    "@typescript-eslint/no-empty-interface": 0,
-    "import/namespace": 0,
-    "import/default": 0,
-    "import/no-named-as-default": 0,
-    "import/no-unused-modules": 0,
-    "import/no-deprecated": 0,
-    "@typescript-eslint/indent": 0,
-    "react-hooks/rules-of-hooks": 2,
-    "react-hooks/exhaustive-deps": [
-      "error",
-      { additionalHooks: "(useMemoOne)" },
-    ],
-    "jest/no-identical-title": 2,
-    "jest/valid-expect": 2,
-    camelcase: 2,
-    "prefer-destructuring": 2,
-    "no-nested-ternary": 2,
-  },
+  ],
 };

example/.eslintrc.js

@@ -20,6 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+ios/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -28,6 +29,8 @@ build/
 .gradle
 local.properties
 *.iml
+*.hprof
+.cxx/
 
 # node.js
 #
@@ -48,12 +51,14 @@ buck-out/
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
 
 # Bundle artifact
 *.jsbundle
 
-# CocoaPods
+# Ruby / CocoaPods
 /ios/Pods/
+/vendor/bundle/

example/.gitattributes

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

example/.gitignore

@@ -0,0 +1 @@
+2.7.5

example/.prettierrc.js

@@ -1,78 +1,71 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * Generated with the TypeScript template
- * https://github.com/react-native-community/react-native-template-typescript
- *
- * @format
- */
-
-import React from "react";
+import React from 'react';
 import {
-  Alert,
   Text,
   View,
   TouchableOpacity,
   Image,
   Dimensions,
   SafeAreaView,
-} from "react-native";
-import InteractiveTextInput from "react-native-text-input-interactive";
+} from 'react-native';
+import InteractiveTextInput from 'react-native-text-input-interactive';
 
-const { width: ScreenWidth } = Dimensions.get("screen");
+const {width: ScreenWidth} = Dimensions.get('screen');
 
 const App = () => {
   const renderHeader = () => (
-    <View style={{ marginTop: 24 }}>
-      <Text style={{ color: "#2a41cb", fontWeight: "bold", fontSize: 32 }}>
+    <View style={{marginTop: 24}}>
+      <Text style={{color: '#2a41cb', fontWeight: 'bold', fontSize: 32}}>
         Welcome Back 👋
       </Text>
-      <Text style={{ color: "#8e9496", letterSpacing: 1, marginTop: 8 }}>
+      <Text style={{color: '#8e9496', letterSpacing: 1, marginTop: 8}}>
         I am so happy to see you. You can continue to login for manage your
         finance
       </Text>
     </View>
   );
 
   const renderTextInputs = () => (
-    <View style={{ marginTop: 52 }}>
-      <InteractiveTextInput textInputStyle={{ width: ScreenWidth * 0.88 }} />
+    <View style={{marginTop: 52}}>
+      <InteractiveTextInput textInputStyle={{width: ScreenWidth * 0.88}} />
       <View
         style={{
           marginTop: 24,
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
         }}
       >
         <InteractiveTextInput
           placeholder="Password"
           secureTextEntry
           enableIcon
-          textInputStyle={{ width: ScreenWidth * 0.7 }}
-          iconImageSource={require("./assets/visibility-button.png")}
+          textInputStyle={{
+            width: ScreenWidth * 0.7,
+            backgroundColor: '#ccc',
+            fontFamily: 'Staatliches-Regular',
+          }}
+          iconImageSource={require('./assets/visibility-button.png')}
           onIconPress={() => {}}
         />
         <TouchableOpacity
           style={{
             height: 50,
             width: 50,
-            alignItems: "center",
-            justifyContent: "center",
-            borderColor: "#2a41cb",
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderColor: '#2a41cb',
             borderWidth: 1,
             borderRadius: 8,
           }}
         >
           <Image
-            source={require("./assets/fingerprint.png")}
-            style={{ height: 25, width: 25, tintColor: "#2a41cb" }}
+            source={require('./assets/fingerprint.png')}
+            style={{height: 25, width: 25, tintColor: '#2a41cb'}}
           />
         </TouchableOpacity>
       </View>
-      <TouchableOpacity style={{ marginLeft: "auto", marginTop: 16 }}>
-        <Text style={{ color: "#2a41cb", fontWeight: "500" }}>
+      <TouchableOpacity style={{marginLeft: 'auto', marginTop: 16}}>
+        <Text style={{color: '#2a41cb', fontWeight: '500'}}>
           Forgot Password?
         </Text>
       </TouchableOpacity>
@@ -84,29 +77,29 @@ const App = () => {
       style={{
         height: 50,
         width: ScreenWidth * 0.88,
-        backgroundColor: "#2a41cb",
+        backgroundColor: '#2a41cb',
         marginTop: ScreenWidth * 0.5,
         borderRadius: 12,
-        alignItems: "center",
-        justifyContent: "center",
+        alignItems: 'center',
+        justifyContent: 'center',
         shadowRadius: 8,
         shadowOpacity: 0.3,
-        shadowColor: "#2a41cb",
+        shadowColor: '#2a41cb',
         shadowOffset: {
           width: 0,
           height: 5,
         },
       }}
     >
-      <Text style={{ fontWeight: "bold", color: "#fff" }}>Login</Text>
+      <Text style={{fontWeight: 'bold', color: '#fff'}}>Login</Text>
     </TouchableOpacity>
   );
 
   const renderDontHaveAccountButton = () => (
     <TouchableOpacity
-      style={{ marginTop: ScreenWidth * 0.4, alignItems: "center" }}
+      style={{marginTop: ScreenWidth * 0.4, alignItems: 'center'}}
     >
-      <Text style={{ fontWeight: "700" }}>Don't have an account</Text>
+      <Text style={{fontWeight: '700'}}>Don't have an account</Text>
     </TouchableOpacity>
   );
 

example/.ruby-version

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby '2.7.5'
+
+gem 'cocoapods', '~> 1.11', '>= 1.11.2'

example/App.tsx

@@ -0,0 +1 @@
+16