Merge pull request #40 from naveenvignesh5/typescript

Typescript

Author: naveenvignesh5

.gitignore

@@ -59,3 +59,9 @@ typings/
 
 # next.js build output
 .next
+
+# lock files
+package-lock.json
+
+# generated files
+dist

.npmignore

@@ -1,2 +1,2 @@
 ScreenShots/*
-Example
+Example/*

Example/.buckconfig

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

Example/.bundle/config

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: '@react-native',
 };

Example/.eslintrc.js

@@ -20,6 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+ios/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -29,32 +30,37 @@ build/
 local.properties
 *.iml
 *.hprof
+.cxx/
+*.keystore
+!debug.keystore
 
 # node.js
 #
 node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-!debug.keystore
-
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
 # screenshots whenever they are needed.
 # 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/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage

Example/.flowconfig

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

Example/.gitignore

@@ -1 +1 @@
-{}
+{}

Example/.prettierrc.js

@@ -1,27 +1,39 @@
-import React, {Component} from 'react';
-import {StyleSheet, Text, View, Button, Alert, TextInput} from 'react-native';
+import React, { useRef, useState } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Button,
+  Alert,
+  TextInput,
+  SafeAreaView,
+  ScrollView,
+} from 'react-native';
 
 import OTPTextView from 'react-native-otp-textinput';
 
 const styles = StyleSheet.create({
-  container: {
+  safeAreaView: {
     flex: 1,
+  },
+  container: {
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     padding: 5,
+    paddingVertical: 20,
   },
   welcome: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
   },
   instructions: {
-    fontSize: 22,
+    fontSize: 18,
     fontWeight: '500',
     textAlign: 'center',
     color: '#333333',
-    marginBottom: 20,
+    marginBottom: 10,
   },
   textInputContainer: {
     marginBottom: 20,
@@ -35,6 +47,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around',
     marginBottom: 20,
     width: '60%',
+    gap: 20,
   },
   textInput: {
     height: 40,
@@ -47,94 +60,80 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     textAlign: 'center',
   },
-  buttonStyle: {
-    marginHorizontal: 20,
-  },
 });
 
-export default class App extends Component {
-  state = {
-    otpInput: '',
-    inputText: '',
-  };
+const App: React.FC = () => {
+  const [otpInput, setOtpInput] = useState<string>("");
 
-  alertText = () => {
-    const {otpInput = ''} = this.state;
-    if (otpInput) {
-      Alert.alert(otpInput);
-    }
-  };
+  const input = useRef<OTPTextView>(null);
 
-  clear = () => {
-    this.input1.clear();
-  };
+  const clear = () => input.current?.clear();
 
-  updateOtpText = () => {
-    // will automatically trigger handleOnTextChange callback passed
-    this.input1.setValue(this.state.inputText);
-  };
+  const updateOtpText = () => input.current?.setValue(otpInput);
 
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.instructions}>react-native-otp-textinput</Text>
+  const showTextAlert = () => otpInput && Alert.alert(otpInput);
+
+  return (
+    <SafeAreaView style={styles.safeAreaView}>
+      <ScrollView contentContainerStyle={styles.container}>
         <OTPTextView
-          ref={e => (this.input1 = e)}
+          ref={input}
           containerStyle={styles.textInputContainer}
-          handleTextChange={text => this.setState({otpInput: text})}
+          handleTextChange={setOtpInput}
           inputCount={4}
           keyboardType="numeric"
         />
         <TextInput
           maxLength={4}
-          onChangeText={e => this.setState({inputText: e})}
+          onChangeText={setOtpInput}
           style={styles.textInput}
         />
         <View style={styles.buttonWrapper}>
-          <Button title="Clear" onPress={this.clear} />
+          <Button title="Clear" onPress={clear} />
           <Button
-            style={styles.buttonStyle}
             title="Update"
-            onPress={this.updateOtpText}
+            onPress={updateOtpText}
           />
           <Button
-            style={styles.buttonStyle}
             title="Submit"
-            onPress={this.alertText}
+            onPress={showTextAlert}
           />
         </View>
         <Text style={styles.instructions}>Customizations</Text>
         <OTPTextView
-          handleTextChange={e => {}}
+          handleTextChange={() => { }}
           containerStyle={styles.textInputContainer}
           textInputStyle={styles.roundedTextInput}
           inputCount={5}
           inputCellLength={2}
         />
         <OTPTextView
-          handleTextChange={e => {}}
+          handleTextChange={() => { }}
           containerStyle={styles.textInputContainer}
           textInputStyle={styles.roundedTextInput}
           defaultValue="1234"
         />
         <OTPTextView
-          handleTextChange={e => {}}
+          handleTextChange={() => { }}
           containerStyle={styles.textInputContainer}
-          textInputStyle={[styles.roundedTextInput, {borderRadius: 100}]}
+          // textInputStyle={[styles.roundedTextInput, { borderRadius: 100 }]}
           tintColor="#000"
         />
+        <TextInput />
         <OTPTextView
-          handleTextChange={e => {}}
+          handleTextChange={() => { }}
           containerStyle={styles.textInputContainer}
           tintColor={['#FF0000', '#FFFF00', '#00FF00', '#0000FF']}
         />
         <OTPTextView
-          handleTextChange={e => {}}
+          handleTextChange={() => { }}
           containerStyle={styles.textInputContainer}
           tintColor="#000"
           offTintColor={['#FF0000', '#FFFF00', '#00FF00', '#0000FF']}
         />
-      </View>
-    );
-  }
+      </ScrollView>
+    </SafeAreaView>
+  )
 }
+
+export default App;