commit
92d1457386
|
@ -1,6 +1,5 @@
|
|||
node_modules/
|
||||
.expo/
|
||||
dist/
|
||||
npm-debug.*
|
||||
*.jks
|
||||
*.p8
|
||||
|
@ -9,6 +8,6 @@ npm-debug.*
|
|||
*.mobileprovision
|
||||
*.orig.*
|
||||
web-build/
|
||||
|
||||
# macOS
|
||||
.vscode
|
||||
.DS_Store
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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',
|
||||
},
|
||||
});
|
|
@ -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
|
||||
```
|
|
@ -1,11 +1,10 @@
|
|||
{
|
||||
"expo": {
|
||||
"name": "mobile-ui",
|
||||
"slug": "mobile-ui",
|
||||
"name": "my-app",
|
||||
"slug": "my-app",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 47 KiB |
|
@ -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;
|
File diff suppressed because it is too large
Load Diff
|
@ -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-cli": "^5.4.12",
|
||||
"expo-status-bar": "~1.3.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-native": "0.68.2",
|
||||
"react-native-web": "0.17.7",
|
||||
"sharp-cli": "^2.1.1"
|
||||
"expo": "^44.0.0",
|
||||
"expo-status-bar": "~1.2.0",
|
||||
"native-base": "3.4.0",
|
||||
"react": "17.0.1",
|
||||
"react-dom": "17.0.1",
|
||||
"react-native": "0.64.3",
|
||||
"react-native-safe-area-context": "3.3.2",
|
||||
"react-native-svg": "12.1.1",
|
||||
"react-native-web": "0.17.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.9",
|
||||
"@types/react": "~17.0.21",
|
||||
"@types/react-native": "~0.66.13",
|
||||
"typescript": "~4.3.5"
|
||||
"@babel/core": "^7.12.9"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/GeekyAnts/nativebase-templates/issues"
|
||||
},
|
||||
"homepage": "https://github.com/GeekyAnts/nativebase-templates#readme",
|
||||
"author": "Aditya Jamuar",
|
||||
"private": true
|
||||
}
|
||||
|
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
}
|
||||
}
|
File diff suppressed because it is too large
Load Diff
|
@ -24,5 +24,8 @@
|
|||
"js-beautify --config .jsbeautifyrc --type 'html' --replace",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/native": "^6.0.11"
|
||||
}
|
||||
}
|
||||
|
|
Binary file not shown.
Loading…
Reference in New Issue