add

app/App.tsx

@@ -1,21 +1,18 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { useState } from 'react';
+import PhoneInput from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
 
-import WelcomePage from './components/welcome';
-
-export default function App() {
+function test() {
+}
+function Example() {
+  // `value` will be the parsed phone number in E.164 format.
+  // Example: "+12133734253".
+  const [value, setValue] = useState()
   return (
-    <View style={styles.container}>
-      <WelcomePage profile = "My profile name" image = "hi"></WelcomePage>
-    </View>
-  );
+    <PhoneInput
+      placeholder="Enter phone number"
+      value={value}
+      onChange = setValue/>
+  )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export default Example;

app/components/sign-in.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import PhoneInput from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
+
+
+function Example() {
+  // `value` will be the parsed phone number in E.164 format.
+  // Example: "+12133734253".
+  const [value, setValue] = useState()
+  return (
+    <PhoneInput
+      placeholder="Enter phone number"
+      value={value}
+      onChange={setValue}/>
+  )
+}
+export default Example;

app/package.json

@@ -12,7 +12,8 @@
     "expo": "~49.0.13",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.5"
+    "react-native": "0.72.5",
+    "react-phone-number-input": "^3.3.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",