MocionesIUPI/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@apollo/client": "^3.7.2",
         "@expo/webpack-config": "^0.17.2",
+        "deprecated-react-native-prop-types": "^2.2.0",
         "expo": "~47.0.6",
         "expo-status-bar": "~1.4.2",
         "graphql": "^15.8.0",
@@ -21,6 +22,8 @@
         "react-native-paper": "^3.12.0",
         "react-native-safe-area-context": "4.4.1",
         "react-native-screens": "~3.18.0",
+        "react-native-smooth-pincode-input": "^1.0.9",
+        "react-native-svg": "13.4.0",
         "react-native-svg": "^13.4.0",
         "react-native-vector-icons": "^9.2.0",
         "react-native-web": "~0.18.9",
@@ -1848,6 +1851,53 @@
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
       "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz",
+      "integrity": "sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q==",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
       "dependencies": {
         "@types/hammerjs": "^2.0.36"
       },
@@ -8900,6 +8950,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/deprecated-react-native-prop-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.2.0.tgz",
+      "integrity": "sha512-SiessglRbgelU8sHCrGRImdlNKfVGSp0n6+K304d0rCdHGU8wladJkPmufxE2AkjN2jy71sgekNd9IvdZp9jZg==",
+      "dependencies": {
+        "@react-native/normalize-color": "*",
+        "invariant": "*",
+        "prop-types": "*"
+      }
+    },
     "node_modules/des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -16863,6 +16923,14 @@
         "react": "18.1.0"
       }
     },
+    "node_modules/react-native-animatable": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz",
+      "integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "node_modules/react-native-codegen": {
       "version": "0.70.6",
       "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.70.6.tgz",
@@ -16918,6 +16986,251 @@
         "react-native-vector-icons": "*"
       }
     },
+    "node_modules/react-native-safe-area-context": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz",
+      "integrity": "sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-safe-area-view": {
+      "version": "0.14.9",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz",
+      "integrity": "sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==",
+      "dependencies": {
+        "hoist-non-react-statics": "^2.3.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-safe-area-view/node_modules/hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+    },
+    "node_modules/react-native-screens": {
+      "version": "3.18.2",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.18.2.tgz",
+      "integrity": "sha512-ANUEuvMUlsYJ1QKukEhzhfrvOUO9BVH9Nzg+6eWxpn3cfD/O83yPBOF8Mx6x5H/2+sMy+VS5x/chWOOo/U7QJw==",
+      "dependencies": {
+        "react-freeze": "^1.0.0",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-smooth-pincode-input": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/react-native-smooth-pincode-input/-/react-native-smooth-pincode-input-1.0.9.tgz",
+      "integrity": "sha512-4V4tyUGJaze55FHuJW/gYVOD3fc4Pd7cTIrv7liTRIXR49y09C2O3XqJUdgNR+UwTgLrTt/8L2lvEuEVUk3kig==",
+      "dependencies": {
+        "prop-types": "^15.5.10",
+        "react-native-animatable": "^1.3.0"
+      },
+      "peerDependencies": {
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-svg": {
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.4.0.tgz",
+      "integrity": "sha512-B3TwK+H0+JuRhYPzF21AgqMt4fjhCwDZ9QUtwNstT5XcslJBXC0FoTkdZo8IEb1Sv4suSqhZwlAY6lwOv3tHag==",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-svg/node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/react-native-svg/node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/react-native-svg/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/react-native-svg/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/react-native-svg/node_modules/domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/react-native-svg/node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/react-native-svg/node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
+    "node_modules/react-native-svg/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-native-vector-icons": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",
+      "integrity": "sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-iphone-x-helper": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
+      "peerDependencies": {
+        "react-native": ">=0.42.0"
+      }
+    },
+    "node_modules/react-native-paper": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-3.12.0.tgz",
+      "integrity": "sha512-c5GfDkITfrutoVB4+pE/kL2gH7sHuxD9eAs8+cY1q4PjuYW8geV1Hst14HQstSrYkksXN9StI0wryyb21BDfrw==",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.5",
+        "color": "^3.1.2",
+        "react-native-safe-area-view": "^0.14.9"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.13.4.tgz",

MocionesIUPI/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@apollo/client": "^3.7.2",
     "@expo/webpack-config": "^0.17.2",
+    "deprecated-react-native-prop-types": "^2.2.0",
     "expo": "~47.0.6",
     "expo-status-bar": "~1.4.2",
     "graphql": "^15.8.0",
@@ -22,6 +23,7 @@
     "react-native-paper": "^3.12.0",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0",
+    "react-native-smooth-pincode-input": "^1.0.9",
     "react-native-svg": "^13.4.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-web": "~0.18.9",

MocionesIUPI/routes/homeStack.js

@@ -3,6 +3,9 @@ import { createAppContainer } from 'react-navigation';
 import React from "react";
 
 import HomeScreen from '../screens/HomeScreen';
+import PincodeScreen from '../screens/PincodeScreen';
+import testscreen from '../screens/testscreen';
+
 import MocionScreen from '../screens/MocionScreen';
 import Header from '../shared/header';
 
@@ -18,11 +21,18 @@ const screens = {
 
     Mocion: {
         screen: MocionScreen,
+    },
+
+    Pinpage: {
+        screen: PincodeScreen,
+    },
         navigationOptions: {
             headerTitle: () => <Header />
-        }
+        },
 
 
+    test: {
+        screen: testscreen,
     }
 }
 

MocionesIUPI/screens/HomeScreen.js

@@ -28,7 +28,7 @@ export default App = ({ navigation }) => {
     }
 
     const pressHandler = () => {
-        navigation.navigate('Mocion');
+        navigation.navigate('Pinpage')
     }
     
     useEffect(() => {
@@ -38,7 +38,10 @@ export default App = ({ navigation }) => {
     return (
         <View style = {globalStyles.container}>
             <Text style = {globalStyles.tittleText}>Home Screen</Text>
-            <Button title="go to pin page" onPress={pressHandler}/>
+            <Button title='Ir a pagina de pin' onPress={pressHandler} />
         </View>
+        
+        
+
     )
 }

MocionesIUPI/screens/PincodeScreen.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { StyleSheet, View, Text, Button } from 'react-native';
+import { globalStyles } from "../styles/global";
+import SmoothPinCodeInput from 'react-native-smooth-pincode-input';
+
+const pin = 123456;
+
+//comentario
+
+export default class App extends React.Component {
+    
+    pressHandler = () => {
+    {/*Dentro del parentesis va el path al screen para redirigir*/}
+      this.props.navigation.navigate('test')
+    }
+
+    state = {
+      code: '',
+      pincode: false,
+    };
+    pinInput = React.createRef();
+  
+    _checkCode = (code) => {
+      if (code != pin) {
+        this.pinInput.current.shake()
+          .then(() => this.setState({ code: '' }));
+      } else {
+        this.setState({ pincode: true});
+      }
+    }
+  
+    render() {
+      const { code } = this.state;
+      const { pincode } = this.state;
+      return (
+        <View style={globalStyles.container}>
+          {/* Pin container */}
+          <View style={globalStyles.section}>
+            <Text style={globalStyles.titleText}>Entra el Pin de la mocion</Text>
+            <SmoothPinCodeInput
+              ref={this.pinInput}
+              value={code}
+              codeLength={6}
+              onTextChange={code => this.setState({ code })}
+              onFulfill={this._checkCode}
+              onBackspace={() => console.log('No more back.')}
+              />
+          </View>
+          
+          <View style={globalStyles.container}>
+            { pincode && <Button title='Ir a mocion' onPress={this.pressHandler} />}
+          </View>
+
+        </View>
+      );
+    }
+  }
+
+
+  

MocionesIUPI/screens/testscreen.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { StyleSheet, View, Text, Button } from 'react-native';
+import { globalStyles } from "../styles/global";
+
+export default function testscreen() {
+    return (
+        <View style = {globalStyles.container}>
+            <Text style = {globalStyles.tittleText}>This is a test for pin button</Text>
+        </View>
+    )
+}