Merge pull request #161 from DeimosPr4/movil

Movil

mobile-ui/.gitignore

@@ -1,6 +1,5 @@
 node_modules/
 .expo/
-dist/
 npm-debug.*
 *.jks
 *.p8
@@ -9,6 +8,6 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
-
+.vscode
-# macOS
 .DS_Store
+

mobile-ui/App.js

@@ -0,0 +1,138 @@
+import React from "react";
+import {
+  Text,
+  Link,
+  HStack,
+  Center,
+  Heading,
+  Switch,
+  useColorMode,
+  NativeBaseProvider,
+  extendTheme,
+  VStack,
+  Box,
+  FormControl,
+  Input,
+  Button,
+  Image
+} from "native-base";
+import NativeBaseIcon from "./components/NativeBaseIcon";
+import { Platform } from "react-native";
+
+// Define the config
+const config = {
+  useSystemColorMode: false,
+  initialColorMode: "dark",
+};
+
+// extend the theme
+export const theme = extendTheme({ config,
+colors: {
+  brown: "#D7A86E"
+} });
+
+//const logo = require('./assets/')
+
+export default function App() {
+  return (
+    <NativeBaseProvider>
+      <Center w="100%">
+        <Box safeArea p="2" py="8" w="90%" maxW="290">
+        {/* <Image source={{
+      uri: logo.default.src
+    }} width={500} height={500}
+    alt="Katoikia logo" size="xl" /> */}
+
+          <Heading
+            size="lg"
+            fontWeight="600"
+            color="coolGray.800"
+            _dark={{
+              color: "warmGray.50",
+            }}
+          >
+            Bienvenido a Katoikia 
+          </Heading>
+          <Heading
+            mt="1"
+            _dark={{
+              color: "warmGray.200",
+            }}
+            color="coolGray.600"
+            fontWeight="medium"
+            size="xs"
+          >
+             Su app de comunidad de confianza
+          </Heading>
+
+          <VStack space={3} mt="5">
+            <FormControl>
+              <FormControl.Label> Correo Electrónico</FormControl.Label>
+              <Input />
+            </FormControl>
+            <FormControl>
+              <FormControl.Label> Contraseña </FormControl.Label>
+              <Input type="password" />
+              <Link
+                _text={{
+                  fontSize: "xs",
+                  fontWeight: "500",
+                  color: "indigo.500",
+                }}
+                alignSelf="flex-end"
+                mt="1"
+              >
+                  Recuperar contraseña
+               
+              </Link>
+            </FormControl>
+            <Button mt="2" colorScheme="primary"
+            >
+              <Text>Continuar</Text>
+            </Button>
+            <HStack mt="6" justifyContent="center">
+              {/* <Text
+                fontSize="sm"
+                color="coolGray.600"
+                _dark={{
+                  color: "warmGray.200",
+                }}
+              >
+                I'm a new user.
+              </Text> */}
+              <Link
+                _text={{
+                  color: "warning.300",
+                  fontWeight: "medium",
+                  fontSize: "sm",
+                }}
+                href="#"
+              >
+                 Regístrese aquí
+              </Link>
+            </HStack>
+          </VStack>
+        </Box>
+      </Center>
+      
+    </NativeBaseProvider>
+  );
+}
+
+// Color Switch Component
+function ToggleDarkMode() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  return (
+    <HStack space={2} alignItems="center">
+      <Text>Dark</Text>
+      <Switch
+        isChecked={colorMode === "light"}
+        onToggle={toggleColorMode}
+        aria-label={
+          colorMode === "light" ? "switch to dark mode" : "switch to light mode"
+        }
+      />
+      <Text>Light</Text>
+    </HStack>
+  );
+}

mobile-ui/App.tsx

@@ -1,20 +0,0 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

mobile-ui/Readme.md

@@ -0,0 +1,9 @@
+# NativeBase Expo Template
+
+The official NativeBase template for [Expo](https://docs.expo.io/)
+
+## Usage
+
+```sh
+expo init my-app --template @native-base/expo-template
+```

mobile-ui/app.json

@@ -1,11 +1,10 @@
 {
   "expo": {
-    "name": "mobile-ui",
+    "name": "my-app",
-    "slug": "mobile-ui",
+    "slug": "my-app",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",

mobile-ui/components/NativeBaseIcon.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Icon } from "native-base";
+import { G, Path } from "react-native-svg";
+const NativeBaseIcon = () => {
+  return (
+    <Icon size="220px" viewBox="0 0 602.339 681.729">
+      <G
+        id="Group_403"
+        data-name="Group 403"
+        transform="translate(14575 1918.542)"
+      >
+        <Path
+          id="Path_1"
+          data-name="Path 1"
+          d="M488.722,0A45.161,45.161,0,0,1,527.83,22.576L675.676,278.584a45.162,45.162,0,0,1,0,45.171L527.83,579.763a45.162,45.162,0,0,1-39.108,22.576H193.008A45.162,45.162,0,0,1,153.9,579.763L6.053,323.755a45.162,45.162,0,0,1,0-45.171L153.9,22.576A45.162,45.162,0,0,1,193.008,0Z"
+          transform="translate(-13972.661 -1918.542) rotate(90)"
+          fill="#356290"
+        />
+        <Path
+          id="Path_252"
+          data-name="Path 252"
+          d="M401.1,0A60.816,60.816,0,0,1,453.77,30.405L567.2,226.844a60.816,60.816,0,0,1,0,60.82L453.77,484.1A60.816,60.816,0,0,1,401.1,514.509H174.241A60.816,60.816,0,0,1,121.575,484.1L8.149,287.665a60.816,60.816,0,0,1,0-60.82L121.575,30.405A60.816,60.816,0,0,1,174.241,0Z"
+          transform="translate(-14016.576 -1865.281) rotate(90)"
+          fill="#1784b2"
+        />
+        <Path
+          id="Path_251"
+          data-name="Path 251"
+          d="M345.81,0a36.573,36.573,0,0,1,31.674,18.288L480.566,196.856a36.573,36.573,0,0,1,0,36.569L377.484,411.993a36.573,36.573,0,0,1-31.674,18.288H139.655a36.572,36.572,0,0,1-31.674-18.288L4.9,233.425a36.573,36.573,0,0,1,0-36.569L107.981,18.288A36.573,36.573,0,0,1,139.655,0Z"
+          transform="translate(-14058.69 -1820.41) rotate(90)"
+          fill="#50bfc3"
+        />
+        <Path
+          id="_x3C__x2F__x3E_"
+          d="M187.066,335.455V297.993l-65.272-21.949,65.272-22.523V216.059L81,259.5v32.521Zm38.726,29.3L286.123,174H256.7l-60.33,190.759Zm72.052-29.3,106.066-43.783V259.267L297.844,216.059V254.44l59.3,23.328-59.3,19.421Z"
+          transform="translate(-14516.286 -1846.988)"
+          fill="#fff"
+        />
+      </G>
+    </Icon>
+  );
+};
+
+export default NativeBaseIcon;

mobile-ui/package.json

@@ -1,7 +1,14 @@
 {
-  "name": "mobile-ui",
+  "name": "my-app",
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
+  "keywords": [
+    "react",
+    "expo",
+    "template",
+    "nativebase"
+  ],
+  "license": "MIT",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -10,20 +17,23 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "~45.0.0",
+    "expo": "^44.0.0",
-    "expo-cli": "^5.4.12",
+    "expo-status-bar": "~1.2.0",
-    "expo-status-bar": "~1.3.0",
+    "native-base": "3.4.0",
-    "react": "17.0.2",
+    "react": "17.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "17.0.1",
-    "react-native": "0.68.2",
+    "react-native": "0.64.3",
-    "react-native-web": "0.17.7",
+    "react-native-safe-area-context": "3.3.2",
-    "sharp-cli": "^2.1.1"
+    "react-native-svg": "12.1.1",
+    "react-native-web": "0.17.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.12.9"
-    "@types/react": "~17.0.21",
-    "@types/react-native": "~0.66.13",
-    "typescript": "~4.3.5"
   },
+  "bugs": {
+    "url": "https://github.com/GeekyAnts/nativebase-templates/issues"
+  },
+  "homepage": "https://github.com/GeekyAnts/nativebase-templates#readme",
+  "author": "Aditya Jamuar",
   "private": true
 }

mobile-ui/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true
-  }
-}

package.json

@@ -24,5 +24,8 @@
       "js-beautify --config .jsbeautifyrc --type 'html' --replace",
       "git add"
     ]
+  },
+  "dependencies": {
+    "@react-navigation/native": "^6.0.11"
   }
 }