feat: comprehensive demo

gtomitsuka · Apr 14, 2023 · 4ed3307 · 4ed3307
1 parent da73d3f
commit 4ed3307
Showing 1 changed file with 24 additions and 18 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,28 +1,32 @@
 import * as React from 'react';
 
-import { Button, StyleSheet, View } from 'react-native';
-import { CountryPickerView } from 'rn-phone-number-input';
-import { useState } from 'react';
-import { countryTable } from '../../src/countries';
+import { StyleSheet, View } from 'react-native';
+import {
+  CountryPickerModal,
+  CountryAwarePhoneInput,
+  usePhoneNumberInput,
+} from 'rn-phone-number-input';
 
 export default function App() {
-  const [hidden, setHidden] = useState(false);
-  const [country, setCountry] = useState('+1');
+  const inputManager = usePhoneNumberInput({
+    darkMode: true,
+    // defaultCountry: 'GB', // defaults to US
+  });
 
   return (
     <View style={styles.container}>
-      <Button
-        title={countryTable[country]?.emoji + ' ' + country}
-        onPress={() => setHidden((_hidden) => !_hidden)}
+      <CountryAwarePhoneInput
+        manager={inputManager}
+        onEndEditing={() => {
+          console.log('Finished inputting number');
+          // check if number is valid
+          console.log('Is Valid: ' + inputManager.isValid());
+          // output number in e.164 format (e.g., +12133734253)
+          console.log(inputManager.getNumber);
+        }}
       />
-      <View style={styles.box}>
-        <CountryPickerView
-          darkMode={false}
-          hidden={hidden}
-          setHidden={setHidden}
-          setCountry={setCountry}
-        />
-      </View>
+      {/* CountryPickerModal must be at root level of screen! */}
+      <CountryPickerModal manager={inputManager} />
     </View>
   );
 }
@@ -31,7 +35,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'flex-end',
+    justifyContent: 'center',
+    // for dark mode
+    backgroundColor: '#131314',
   },
   box: {
     marginTop: 'auto',