Compare commits

..

9 Commits

Author SHA1 Message Date
Maria Sanchez 8f8c1fb5ab fix template ui 2022-07-28 20:04:51 -06:00
Maria Sanchez eb9940f970 fix merge conflict 2022-07-27 16:02:49 -06:00
Eduardo Quiros c606dfe81a
Merge pull request #129 from DeimosPr4/127-fix-ci
127 fix ci
2022-07-25 01:59:46 -06:00
Eduardo Quiros cc6ea6da2f
"step can't have both the 'uses' and 'run' keys" 2022-07-24 23:53:30 -06:00
Eduardo Quiros 4a595d6f44
add 'dev' branch to branch lists for workflows 2022-07-24 23:04:37 -06:00
Eduardo Quiros c4096300fc
rename node js workflow for github 2022-07-24 23:01:15 -06:00
Eduardo Quiros 5277da52a8
Merge pull request #128 from DeimosPr4/126-agregar-formateo-en-forma-de-un-pre-commit-hook
agregar formateo en forma de un pre commit hook
2022-07-24 22:44:33 -06:00
Maria Sanchez d23abccaa3 merge fix issues 2022-07-18 14:55:05 -06:00
Maria Sanchez b1feb236b5 mobile template modify 2022-07-18 14:54:08 -06:00
76 changed files with 4039 additions and 24 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@ -5,30 +5,27 @@ name: Node.js CI
on:
push:
branches: ['master']
branches: ['master', 'dev']
pull_request:
branches: ['master']
branches: ['master', 'dev']
jobs:
build:
build-api:
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./mobile-ui
strategy:
matrix:
node-version: [14.x, 16.x, 18.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v3
run: cd ./mobile-ui
- name: checkout
uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Test
run: |
cd ./api-gateway
npm ci
npm run build --if-present
npm test

123
mobile-ui/App.js Normal file
View File

@ -0,0 +1,123 @@
import React, {useState} from "react";
import { Image } from "react-native";
import AppLoading from "expo-app-loading";
import { useFonts } from '@use-expo/font';
import { Asset } from "expo-asset";
import { Block, GalioProvider } from "galio-framework";
import { NavigationContainer } from "@react-navigation/native";
// Before rendering any navigation stack
import { enableScreens } from "react-native-screens";
enableScreens();
import Screens from "./navigation/Screens";
import { Images, articles, argonTheme } from "./constants";
// cache app images
const assetImages = [
Images.Onboarding,
Images.LogoOnboarding,
Images.Logo,
Images.Pro,
Images.ArgonLogo,
Images.iOSLogo,
Images.androidLogo
];
// cache product images
articles.map(article => assetImages.push(article.image));
function cacheImages(images) {
return images.map(image => {
if (typeof image === "string") {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
}
export default props => {
const [isLoadingComplete, setLoading] = useState(false);
let [fontsLoaded] = useFonts({
'ArgonExtra': require('./assets/font/argon.ttf'),
});
function _loadResourcesAsync() {
return Promise.all([...cacheImages(assetImages)]);
}
function _handleLoadingError(error) {
// In this case, you might want to report the error to your error
// reporting service, for example Sentry
console.warn(error);
};
function _handleFinishLoading() {
setLoading(true);
};
if(!fontsLoaded && !isLoadingComplete) {
return (
<AppLoading
startAsync={_loadResourcesAsync}
onError={_handleLoadingError}
onFinish={_handleFinishLoading}
/>
);
} else if(fontsLoaded) {
return (
<NavigationContainer>
<GalioProvider theme={argonTheme}>
<Block flex>
<Screens />
</Block>
</GalioProvider>
</NavigationContainer>
);
} else {
return null
}
}
// export default class App extends React.Component {
// state = {
// isLoadingComplete: false
// };
// render() {
// if (!this.state.isLoadingComplete) {
// return (
// <AppLoading
// startAsync={this._loadResourcesAsync}
// onError={this._handleLoadingError}
// onFinish={this._handleFinishLoading}
// />
// );
// } else {
// return (
// <NavigationContainer>
// <GalioProvider theme={argonTheme}>
// <Block flex>
// <Screens />
// </Block>
// </GalioProvider>
// </NavigationContainer>
// );
// }
// }
// _loadResourcesAsync = async () => {
// return Promise.all([...cacheImages(assetImages)]);
// };
// _handleLoadingError = error => {
// // In this case, you might want to report the error to your error
// // reporting service, for example Sentry
// console.warn(error);
// };
// _handleFinishLoading = () => {
// this.setState({ isLoadingComplete: true });
// };
// }

View File

@ -1,9 +1,14 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
//import { NavigationContainer } from "@react-navigation/native";
import { Button } from './components';
export default function App() {
return (
<View style={styles.container}>
<Button>testing</Button>
<Text>Open up App.tsx to start working on your app!</Text>
<StatusBar style="auto" />
</View>

View File

@ -1,14 +1,18 @@
{
"expo": {
"name": "mobile-ui",
"slug": "mobile-ui",
"version": "1.0.0",
"name": "Argon FREE React Native",
"slug": "argon-free-react-native",
"privacy": "public",
"platforms": [
"ios",
"android"
],
"version": "1.7.1",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"resizeMode": "cover",
"backgroundColor": "#ffffff"
},
"updates": {
@ -20,14 +24,6 @@
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
"description": "Argon React Native, based on Argon Design System. Coded by Creative Tim"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
mobile-ui/assets/font/argon.ttf Executable file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 66 KiB

BIN
mobile-ui/assets/imgs/android.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 271 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 778 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
mobile-ui/assets/imgs/ios.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M20,0H4C2.3,0,1,1.3,1,3v20c0,0.6,0.4,1,1,1h20c0.6,0,1-0.4,1-1V3C23,1.3,21.7,0,20,0z M12,16 c-3.3,0-6-2.7-6-6c0-0.6,0.4-1,1-1s1,0.4,1,1c0,2.2,1.8,4,4,4s4-1.8,4-4c0-0.6,0.4-1,1-1s1,0.4,1,1C18,13.3,15.3,16,12,16z M20,4H4 C3.4,4,3,3.6,3,3s0.4-1,1-1h16c0.6,0,1,0.4,1,1S20.6,4,20,4z"/></g></svg>

After

Width:  |  Height:  |  Size: 497 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><path d="M1,10.5A1.5,1.5,0,0,0,2.5,12h7A1.5,1.5,0,0,0,11,10.5V7H1Z" fill="#444444"/> <path d="M9.838,4,8.171.665a.75.75,0,0,0-1.342.67L8.162,4H3.838L5.171,1.335A.75.75,0,0,0,3.829.665L2.162,4H0V6H12V4Z" fill="#444444" data-color="color-2"/></g></svg>

After

Width:  |  Height:  |  Size: 434 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path d="M20,10V8A8,8,0,0,0,4,8v2a4.441,4.441,0,0,1-1.547,3.193A4.183,4.183,0,0,0,1,16c0,2.5,4.112,4,11,4s11-1.5,11-4a4.183,4.183,0,0,0-1.453-2.807A4.441,4.441,0,0,1,20,10Z" fill="#444444"/> <path data-color="color-2" d="M9.145,21.9a2.992,2.992,0,0,0,5.71,0c-.894.066-1.844.1-2.855.1S10.039,21.968,9.145,21.9Z" fill="#444444"/></g></svg>

After

Width:  |  Height:  |  Size: 521 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><rect data-color="color-2" x="4" y="10" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="10" y="10" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="4" y="15" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="10" y="15" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="16" y="10" width="4" height="3" fill="#444444"/> <path d="M23,3H18V1a1,1,0,0,0-2,0V3H8V1A1,1,0,0,0,6,1V3H1A1,1,0,0,0,0,4V22a1,1,0,0,0,1,1H23a1,1,0,0,0,1-1V4A1,1,0,0,0,23,3ZM22,21H2V7H22Z" fill="#444444"/></g></svg>

After

Width:  |  Height:  |  Size: 742 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path data-color="color-2" fill="#444444" d="M13,11h10.949C23.466,5.181,18.819,0.534,13,0.051V11z"/> <path fill="#444444" d="M12.414,13l-8.155,8.155C6.351,22.926,9.051,24,12,24c6.279,0,11.438-4.851,11.949-11H12.414z"/> <path fill="#444444" d="M11,11.586V0.051C4.851,0.562,0,5.721,0,12c0,2.949,1.074,5.649,2.845,7.741L11,11.586z"/></g></svg>

After

Width:  |  Height:  |  Size: 524 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M18.768,1.36C18.578,1.132,18.297,1,18,1H6C5.703,1,5.422,1.132,5.232,1.36l-5,6 c-0.294,0.353-0.31,0.861-0.039,1.231l11,15C11.382,23.848,11.682,24,12,24s0.618-0.152,0.807-0.409l11-15 c0.271-0.371,0.256-0.878-0.039-1.231L18.768,1.36z M19,9H5V7h14V9z"/></g></svg>

After

Width:  |  Height:  |  Size: 467 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path d="M8,15A7,7,0,0,1,3.333,2.783l1.334,1.49a5,5,0,1,0,6.666,0l1.333-1.49A7,7,0,0,1,8,15Z" fill="#444444"/> <rect x="7" width="2" height="7" fill="#444444" data-color="color-2"/></g></svg>

After

Width:  |  Height:  |  Size: 375 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M16,3.6L15.2,2C8.3,4,4.8,8.4,4.8,8.4L1.6,6L0,7.6L4.8,14C8.5,7.1,16,3.6,16,3.6z"/></g></svg>

After

Width:  |  Height:  |  Size: 299 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><rect x="22" y="11" fill="#444444" width="2" height="6"/> <path data-color="color-2" fill="#444444" d="M13.241,15.73C12.847,15.91,12.43,16,12,16s-0.847-0.09-1.24-0.269L4,12.658V18 c0,2.626,4.024,4,8,4s8-1.374,8-4v-5.341L13.241,15.73z"/> <path fill="#444444" d="M23.414,7.09l-11-5c-0.263-0.119-0.564-0.119-0.827,0l-11,5C0.229,7.252,0,7.607,0,8s0.229,0.748,0.586,0.91 l11,5C11.718,13.97,11.859,14,12,14s0.282-0.03,0.414-0.09l11-5C23.771,8.748,24,8.393,24,8S23.771,7.252,23.414,7.09z"/></g></svg>

After

Width:  |  Height:  |  Size: 677 B

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g class="nc-icon-wrapper" fill="#444444">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 276 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><polygon fill="#444444" points="17,1.382 13,3.382 13,22.618 17,20.618 "/> <polygon data-color="color-2" fill="#444444" points="11,3.382 7,1.382 7,20.618 11,22.618 "/> <path fill="#444444" d="M5,1.434L0.485,4.143C0.185,4.323,0,4.648,0,5v19l5-3.234V1.434z"/> <path data-color="color-2" fill="#444444" d="M23.515,4.143L19,1.434v19.332L24,24V5C24,4.648,23.815,4.323,23.515,4.143z"/></g></svg>

After

Width:  |  Height:  |  Size: 572 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><path d="M11,9H1a1,1,0,0,0,0,2H11a1,1,0,0,0,0-2Z" fill="#444444"/> <path d="M11,1H1A1,1,0,0,0,1,3H11a1,1,0,0,0,0-2Z" fill="#444444"/> <path d="M11,5H1A1,1,0,0,0,1,7H11a1,1,0,0,0,0-2Z" fill="#444444" data-color="color-2"/></g></svg>

After

Width:  |  Height:  |  Size: 415 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="6 5.882 2.148 2.03 0.074 4.104 6 10.03 11.926 4.104 9.852 2.03 6 5.882" fill="#444444"/></g></svg>

After

Width:  |  Height:  |  Size: 299 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="7.92 0 1.92 6 7.92 12 10.02 9.9 6.12 6 10.02 2.1 7.92 0" fill="#444444"></polygon></g></svg>

After

Width:  |  Height:  |  Size: 293 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="1.98 2.1 5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1" fill="#444444"/></g></svg>

After

Width:  |  Height:  |  Size: 285 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M8,2c0.6,0,1.1,0.2,1.5,0.7l0.7,0.7l1.5-1.3L11,1.3C10.2,0.5,9.1,0,8,0C5.8,0,4,1.8,4,4v1.5 C2.8,6.6,2,8.2,2,10c0,3.3,2.7,6,6,6s6-2.7,6-6s-2.7-6-6-6C7.3,4,6.6,4.1,6,4.4V4C6,2.9,6.9,2,8,2z M8,7c1.1,0,2,0.9,2,2 c0,0.7-0.4,1.4-1,1.7V13H7v-2.3c-0.6-0.3-1-1-1-1.7C6,7.9,6.9,7,8,7z"/></g></svg>

After

Width:  |  Height:  |  Size: 493 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M20.4,6.1c-1.1-0.5-2.2-0.8-3.4-0.8c-1.6,0-3,0.5-4.3,0.9c-0.8,0.3-1.6,0.5-2.2,0.5c-0.4,0-0.6-0.1-0.7-0.3 c0-0.1,0.1-0.6,0.2-0.9c0.3-0.9,0.6-2-0.2-3.1c-0.5-0.6-1.3-1-2.2-1c-0.9,0-1.7,0.3-2.5,0.8C1.9,4.4,0,8.1,0,12c0,6.6,5.4,12,12,12 c5.3,0,10.1-3.6,11.6-8.8C23.7,14.6,25.1,8.4,20.4,6.1z M3,12c0-1.1,0.9-2,2-2s2,0.9,2,2s-0.9,2-2,2S3,13.1,3,12z M7.5,19 c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S8.6,19,7.5,19z M13,21c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S14.1,21,13,21z M17,15 c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S18.7,15,17,15z"/></g></svg>

After

Width:  |  Height:  |  Size: 741 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path data-color="color-2" fill="#444444" d="M10,8H8v2H6V8H4V6h2V4h2v2h2V8z"/> <path fill="#444444" d="M7,14c-3.86,0-7-3.14-7-7s3.14-7,7-7s7,3.14,7,7S10.86,14,7,14z M7,2C4.243,2,2,4.243,2,7s2.243,5,5,5 s5-2.243,5-5S9.757,2,7,2z"/> <path data-color="color-2" fill="#444444" d="M15.707,14.293L13.314,11.9c-0.411,0.529-0.885,1.003-1.414,1.414l2.393,2.393 C14.488,15.902,14.744,16,15,16s0.512-0.098,0.707-0.293C16.098,15.316,16.098,14.684,15.707,14.293z"/> </g></svg>

After

Width:  |  Height:  |  Size: 647 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M13.9,0.5C13.7,0.2,13.4,0,13,0H3C2.6,0,2.3,0.2,2.1,0.5C0,4.5,0,4.7,0,5c0,1.1,0.9,2,2,2v8c0,0.6,0.4,1,1,1 h10c0.6,0,1-0.4,1-1V7c1.1,0,2-0.9,2-2C16,4.7,16,4.5,13.9,0.5z M10,14v-4H6v4H4V6.7C4.3,6.9,4.6,7,5,7c0.6,0,1.1-0.3,1.5-0.7 C6.9,6.7,7.4,7,8,7s1.1-0.3,1.5-0.7C9.9,6.7,10.4,7,11,7c0.4,0,0.7-0.1,1-0.3V14H10z"></path></g></svg>

After

Width:  |  Height:  |  Size: 535 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path d="M23.58.424A1,1,0,0,0,22.819.13C8.791.862,3.609,13.358,3.559,13.484a1,1,0,0,0,.22,1.08l5.657,5.657a1,1,0,0,0,1.085.218c.125-.051,12.554-5.291,13.348-19.253A1,1,0,0,0,23.58.424Zm-8.166,10.99a2,2,0,1,1,0-2.828A2,2,0,0,1,15.414,11.414Z" fill="#444444"/> <path data-color="color-2" d="M1.113,18.844a2.844,2.844,0,1,1,4.022,4.022C4.024,23.977,0,24,0,24S0,19.954,1.113,18.844Z" fill="#444444"/> <path id="color-2" d="M10.357,2.341A8.911,8.911,0,0,0,2.522,4.825a9.084,9.084,0,0,0-1.384,1.8,1,1,0,0,0,.155,1.215l1.989,1.99A26.623,26.623,0,0,1,10.357,2.341Z" fill="#444444"/> <path id="color-3" d="M21.659,13.643a8.911,8.911,0,0,1-2.484,7.835,9.084,9.084,0,0,1-1.8,1.384,1,1,0,0,1-1.215-.155l-1.99-1.989A26.623,26.623,0,0,0,21.659,13.643Z" fill="#444444"/></g></svg>

After

Width:  |  Height:  |  Size: 949 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0z M8,10c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2 s2,0.9,2,2C10,9.1,9.1,10,8,10z M8,2c0.9,0,1.8,0.2,2.6,0.6L9.044,4.156c-0.761-0.207-1.327-0.207-2.089,0L5.4,2.6 C6.2,2.2,7.1,2,8,2z M2,8c0-0.9,0.2-1.8,0.6-2.6l1.556,1.556c-0.207,0.761-0.207,1.327,0,2.089L2.6,10.6C2.2,9.8,2,8.9,2,8z M8,14 c-0.9,0-1.8-0.2-2.6-0.6l1.556-1.556c0.761,0.207,1.327,0.207,2.089,0L10.6,13.4C9.8,13.8,8.9,14,8,14z M13.4,10.6l-1.556-1.556 c0.207-0.761,0.207-1.327,0-2.089L13.4,5.4C13.8,6.2,14,7.1,14,8C14,8.9,13.8,9.8,13.4,10.6z"/></g></svg>

After

Width:  |  Height:  |  Size: 776 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M6.5,11h11c3,0,5.5-2.5,5.5-5.5S20.5,0,17.5,0h-11C3.5,0,1,2.5,1,5.5S3.5,11,6.5,11z M6.5,2 C8.4,2,10,3.6,10,5.5S8.4,9,6.5,9S3,7.4,3,5.5S4.6,2,6.5,2z"></path> <path data-color="color-2" fill="#444444" d="M17.5,13h-11c-3,0-5.5,2.5-5.5,5.5S3.5,24,6.5,24h11c3,0,5.5-2.5,5.5-5.5S20.5,13,17.5,13z M17.5,22c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S19.4,22,17.5,22z"></path></g></svg>

After

Width:  |  Height:  |  Size: 596 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M11,12H1c-0.553,0-1-0.447-1-1V1c0-0.552,0.447-1,1-1h10c0.553,0,1,0.448,1,1v10C12,11.553,11.553,12,11,12z "></path> <path data-color="color-2" fill="#444444" d="M15,16H4v-2h10V4h2v11C16,15.553,15.553,16,15,16z"></path></g></svg>

After

Width:  |  Height:  |  Size: 435 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 298 KiB

View File

@ -0,0 +1,57 @@
import React from "react";
import { StyleSheet } from "react-native";
import PropTypes from 'prop-types';
import { Button } from "galio-framework";
import argonTheme from "../constants/Theme";
class ArButton extends React.Component {
render() {
const { small, shadowless, children, color, style, ...props } = this.props;
const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];
const buttonStyles = [
small && styles.smallButton,
color && { backgroundColor: colorStyle },
!shadowless && styles.shadow,
{...style}
];
return (
<Button
style={buttonStyles}
shadowless
textStyle={{ fontSize: 12, fontWeight: '700' }}
{...props}
>
{children}
</Button>
);
}
}
ArButton.propTypes = {
small: PropTypes.bool,
shadowless: PropTypes.bool,
color: PropTypes.oneOfType([
PropTypes.string,
PropTypes.oneOf(['default', 'primary', 'secondary', 'info', 'error', 'success', 'warning'])
])
}
const styles = StyleSheet.create({
smallButton: {
width: 75,
height: 28
},
shadow: {
shadowColor: 'black',
shadowOffset: { width: 0, height: 4 },
shadowRadius: 4,
shadowOpacity: 0.1,
elevation: 2,
},
});
export default ArButton;

View File

@ -0,0 +1,98 @@
import React from 'react';
import { withNavigation } from '@react-navigation/native';
import PropTypes from 'prop-types';
import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
import { Block, Text, theme } from 'galio-framework';
import { argonTheme } from '../constants';
class Card extends React.Component {
render() {
const { navigation, item, horizontal, full, style, ctaColor, imageStyle } = this.props;
const imageStyles = [
full ? styles.fullImage : styles.horizontalImage,
imageStyle
];
const cardContainer = [styles.card, styles.shadow, style];
const imgContainer = [styles.imageContainer,
horizontal ? styles.horizontalStyles : styles.verticalStyles,
styles.shadow
];
return (
<Block row={horizontal} card flex style={cardContainer}>
<TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
<Block flex style={imgContainer}>
<Image source={{uri: item.image}} style={imageStyles} />
</Block>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
<Block flex space="between" style={styles.cardDescription}>
<Text size={14} style={styles.cardTitle}>{item.title}</Text>
<Text size={12} muted={!ctaColor} color={ctaColor || argonTheme.COLORS.ACTIVE} bold>{item.cta}</Text>
</Block>
</TouchableWithoutFeedback>
</Block>
);
}
}
Card.propTypes = {
item: PropTypes.object,
horizontal: PropTypes.bool,
full: PropTypes.bool,
ctaColor: PropTypes.string,
imageStyle: PropTypes.any,
}
const styles = StyleSheet.create({
card: {
backgroundColor: theme.COLORS.WHITE,
marginVertical: theme.SIZES.BASE,
borderWidth: 0,
minHeight: 114,
marginBottom: 16
},
cardTitle: {
flex: 1,
flexWrap: 'wrap',
paddingBottom: 6
},
cardDescription: {
padding: theme.SIZES.BASE / 2
},
imageContainer: {
borderRadius: 3,
elevation: 1,
overflow: 'hidden',
},
image: {
// borderRadius: 3,
},
horizontalImage: {
height: 122,
width: 'auto',
},
horizontalStyles: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
verticalStyles: {
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0
},
fullImage: {
height: 215
},
shadow: {
shadowColor: theme.COLORS.BLACK,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 4,
shadowOpacity: 0.1,
elevation: 2,
},
});
export default withNavigation(Card);

View File

@ -0,0 +1,130 @@
import React from "react";
import { StyleSheet, TouchableOpacity, Linking } from "react-native";
import { Block, Text, theme } from "galio-framework";
import Icon from "./Icon";
import argonTheme from "../constants/Theme";
class DrawerItem extends React.Component {
renderIcon = () => {
const { title, focused } = this.props;
switch (title) {
case "Home":
return (
<Icon
name="shop"
family="ArgonExtra"
size={14}
color={focused ? "white" : argonTheme.COLORS.PRIMARY}
/>
);
case "Elements":
return (
<Icon
name="map-big"
family="ArgonExtra"
size={14}
color={focused ? "white" : argonTheme.COLORS.ERROR}
/>
);
case "Articles":
return (
<Icon
name="spaceship"
family="ArgonExtra"
size={14}
color={focused ? "white" : argonTheme.COLORS.PRIMARY}
/>
);
case "Profile":
return (
<Icon
name="chart-pie-35"
family="ArgonExtra"
size={14}
color={focused ? "white" : argonTheme.COLORS.WARNING}
/>
);
case "Account":
return (
<Icon
name="calendar-date"
family="ArgonExtra"
size={14}
color={focused ? "white" : argonTheme.COLORS.INFO}
/>
);
case "Getting Started":
return (<Icon
name="spaceship"
family="ArgonExtra"
size={14}
color={focused ? "white" : "rgba(0,0,0,0.5)"}
/>);
case "Log out":
return <Icon />;
default:
return null;
}
};
render() {
const { focused, title, navigation } = this.props;
const containerStyles = [
styles.defaultStyle,
focused ? [styles.activeStyle, styles.shadow] : null
];
return (
<TouchableOpacity
style={{ height: 60 }}
onPress={() =>
title == "Getting Started"
? Linking.openURL(
"https://demos.creative-tim.com/argon-pro-react-native/docs/"
).catch(err => console.error("An error occurred", err))
: navigation.navigate(title)
}
>
<Block flex row style={containerStyles}>
<Block middle flex={0.1} style={{ marginRight: 5 }}>
{this.renderIcon()}
</Block>
<Block row center flex={0.9}>
<Text
size={15}
bold={focused ? true : false}
color={focused ? "white" : "rgba(0,0,0,0.5)"}
>
{title}
</Text>
</Block>
</Block>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
defaultStyle: {
paddingVertical: 16,
paddingHorizontal: 16
},
activeStyle: {
backgroundColor: argonTheme.COLORS.ACTIVE,
borderRadius: 4
},
shadow: {
shadowColor: theme.COLORS.BLACK,
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 8,
shadowOpacity: 0.1
}
});
export default DrawerItem;

View File

@ -0,0 +1,281 @@
import React from 'react';
import { withNavigation } from '@react-navigation/native';
import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
import { Button, Block, NavBar, Text, theme } from 'galio-framework';
import Icon from './Icon';
import Input from './Input';
import Tabs from './Tabs';
import argonTheme from '../constants/Theme';
const { height, width } = Dimensions.get('window');
const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812 || height === 896 || width === 896);
const BellButton = ({isWhite, style, navigation}) => (
<TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
<Icon
family="ArgonExtra"
size={16}
name="bell"
color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
/>
<Block middle style={styles.notify} />
</TouchableOpacity>
);
const BasketButton = ({isWhite, style, navigation}) => (
<TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
<Icon
family="ArgonExtra"
size={16}
name="basket"
color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
/>
</TouchableOpacity>
);
const SearchButton = ({isWhite, style, navigation}) => (
<TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
<Icon
size={16}
family="Galio"
name="search-zoom-in"
color={theme.COLORS[isWhite ? 'WHITE' : 'ICON']}
/>
</TouchableOpacity>
);
class Header extends React.Component {
handleLeftPress = () => {
const { back, navigation } = this.props;
return (back ? navigation.goBack() : navigation.openDrawer());
}
renderRight = () => {
const { white, title, navigation } = this.props;
if (title === 'Title') {
return [
<BellButton key='chat-title' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-title' navigation={navigation} isWhite={white} />
]
}
switch (title) {
case 'Home':
return ([
<BellButton key='chat-home' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-home' navigation={navigation} isWhite={white} />
]);
case 'Deals':
return ([
<BellButton key='chat-categories' navigation={navigation} />,
<BasketButton key='basket-categories' navigation={navigation} />
]);
case 'Categories':
return ([
<BellButton key='chat-categories' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-categories' navigation={navigation} isWhite={white} />
]);
case 'Category':
return ([
<BellButton key='chat-deals' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
]);
case 'Profile':
return ([
<BellButton key='chat-profile' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
]);
case 'Product':
return ([
<SearchButton key='search-product' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-product' navigation={navigation} isWhite={white} />
]);
case 'Search':
return ([
<BellButton key='chat-search' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-search' navigation={navigation} isWhite={white} />
]);
case 'Settings':
return ([
<BellButton key='chat-search' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-search' navigation={navigation} isWhite={white} />
]);
default:
break;
}
}
renderSearch = () => {
const { navigation } = this.props;
return (
<Input
right
color="black"
style={styles.search}
placeholder="What are you looking for?"
placeholderTextColor={'#8898AA'}
onFocus={() => navigation.navigate('Pro')}
iconContent={<Icon size={16} color={theme.COLORS.MUTED} name="search-zoom-in" family="ArgonExtra" />}
/>
);
}
renderOptions = () => {
const { navigation, optionLeft, optionRight } = this.props;
return (
<Block row style={styles.options}>
<Button shadowless style={[styles.tab, styles.divider]} onPress={() => navigation.navigate('Pro')}>
<Block row middle>
<Icon name="diamond" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON} />
<Text size={16} style={styles.tabTitle}>{optionLeft || 'Beauty'}</Text>
</Block>
</Button>
<Button shadowless style={styles.tab} onPress={() => navigation.navigate('Pro')}>
<Block row middle>
<Icon size={16} name="bag-17" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON}/>
<Text size={16} style={styles.tabTitle}>{optionRight || 'Fashion'}</Text>
</Block>
</Button>
</Block>
);
}
renderTabs = () => {
const { tabs, tabIndex, navigation } = this.props;
const defaultTab = tabs && tabs[0] && tabs[0].id;
if (!tabs) return null;
return (
<Tabs
data={tabs || []}
initialIndex={tabIndex || defaultTab}
onChange={id => navigation.setParams({ tabId: id })} />
)
}
renderHeader = () => {
const { search, options, tabs } = this.props;
if (search || tabs || options) {
return (
<Block center>
{search ? this.renderSearch() : null}
{options ? this.renderOptions() : null}
{tabs ? this.renderTabs() : null}
</Block>
);
}
}
render() {
const { back, title, white, transparent, bgColor, iconColor, titleColor, navigation, ...props } = this.props;
const noShadow = ['Search', 'Categories', 'Deals', 'Pro', 'Profile'].includes(title);
const headerStyles = [
!noShadow ? styles.shadow : null,
transparent ? { backgroundColor: 'rgba(0,0,0,0)' } : null,
];
const navbarStyles = [
styles.navbar,
bgColor && { backgroundColor: bgColor }
];
return (
<Block style={headerStyles}>
<NavBar
back={false}
title={title}
style={navbarStyles}
transparent={transparent}
right={this.renderRight()}
rightStyle={{ alignItems: 'center' }}
left={
<Icon
name={back ? 'chevron-left' : "menu"} family="entypo"
size={20} onPress={this.handleLeftPress}
color={iconColor || (white ? argonTheme.COLORS.WHITE : argonTheme.COLORS.ICON)}
style={{ marginTop: 2 }}
/>
}
leftStyle={{ paddingVertical: 12, flex: 0.2 }}
titleStyle={[
styles.title,
{ color: argonTheme.COLORS[white ? 'WHITE' : 'HEADER'] },
titleColor && { color: titleColor }
]}
{...props}
/>
{this.renderHeader()}
</Block>
);
}
}
const styles = StyleSheet.create({
button: {
padding: 12,
position: 'relative',
},
title: {
width: '100%',
fontSize: 16,
fontWeight: 'bold',
},
navbar: {
paddingVertical: 0,
paddingBottom: theme.SIZES.BASE * 1.5,
paddingTop: iPhoneX ? theme.SIZES.BASE * 4 : theme.SIZES.BASE,
zIndex: 5,
},
shadow: {
backgroundColor: theme.COLORS.WHITE,
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.2,
elevation: 3,
},
notify: {
backgroundColor: argonTheme.COLORS.LABEL,
borderRadius: 4,
height: theme.SIZES.BASE / 2,
width: theme.SIZES.BASE / 2,
position: 'absolute',
top: 9,
right: 12,
},
header: {
backgroundColor: theme.COLORS.WHITE,
},
divider: {
borderRightWidth: 0.3,
borderRightColor: theme.COLORS.ICON,
},
search: {
height: 48,
width: width - 32,
marginHorizontal: 16,
borderWidth: 1,
borderRadius: 3,
borderColor: argonTheme.COLORS.BORDER
},
options: {
marginBottom: 24,
marginTop: 10,
elevation: 4,
},
tab: {
backgroundColor: theme.COLORS.TRANSPARENT,
width: width * 0.35,
borderRadius: 0,
borderWidth: 0,
height: 24,
elevation: 0,
},
tabTitle: {
lineHeight: 19,
fontWeight: '400',
color: argonTheme.COLORS.HEADER
},
});
export default withNavigation(Header);

View File

@ -0,0 +1,34 @@
import React from 'react';
import * as Font from 'expo-font';
import { createIconSetFromIcoMoon } from '@expo/vector-icons';
import { Icon } from 'galio-framework';
import argonConfig from '../assets/config/argon.json';
const ArgonExtra = require('../assets/font/argon.ttf');
const IconArgonExtra = createIconSetFromIcoMoon(argonConfig, 'ArgonExtra');
class IconExtra extends React.Component {
state = {
fontLoaded: false,
}
async componentDidMount() {
await Font.loadAsync({ ArgonExtra: ArgonExtra });
this.setState({ fontLoaded: true });
}
render() {
const { name, family, ...rest } = this.props;
if (name && family && this.state.fontLoaded) {
if (family === 'ArgonExtra') {
return <IconArgonExtra name={name} family={family} {...rest} />;
}
return <Icon name={name} family={family} {...rest} />;
}
return null;
}
}
export default IconExtra;

View File

@ -0,0 +1,76 @@
import React from "react";
import { StyleSheet } from "react-native";
import PropTypes from 'prop-types';
import { Input } from "galio-framework";
import Icon from './Icon';
import { argonTheme } from "../constants";
class ArInput extends React.Component {
render() {
const { shadowless, success, error } = this.props;
const inputStyles = [
styles.input,
!shadowless && styles.shadow,
success && styles.success,
error && styles.error,
{...this.props.style}
];
return (
<Input
placeholder="write something here"
placeholderTextColor={argonTheme.COLORS.MUTED}
style={inputStyles}
color={argonTheme.COLORS.HEADER}
iconContent={
<Icon
size={14}
color={argonTheme.COLORS.ICON}
name="link"
family="AntDesign"
/>
}
{...this.props}
/>
);
}
}
ArInput.defaultProps = {
shadowless: false,
success: false,
error: false
};
ArInput.propTypes = {
shadowless: PropTypes.bool,
success: PropTypes.bool,
error: PropTypes.bool
}
const styles = StyleSheet.create({
input: {
borderRadius: 4,
borderColor: argonTheme.COLORS.BORDER,
height: 44,
backgroundColor: '#FFFFFF'
},
success: {
borderColor: argonTheme.COLORS.INPUT_SUCCESS,
},
error: {
borderColor: argonTheme.COLORS.INPUT_ERROR,
},
shadow: {
shadowColor: argonTheme.COLORS.BLACK,
shadowOffset: { width: 0, height: 1 },
shadowRadius: 2,
shadowOpacity: 0.05,
elevation: 2,
}
});
export default ArInput;

View File

@ -0,0 +1,85 @@
import React from 'react';
import { StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import ModalDropdown from 'react-native-material-dropdown';
import { Block, Text } from 'galio-framework';
import Icon from './Icon';
import { argonTheme } from '../constants';
class DropDown extends React.Component {
state = {
value: 1,
}
handleOnSelect = (index, value) => {
const { onSelect } = this.props;
this.setState({ value: value });
onSelect && onSelect(index, value);
}
render() {
const { onSelect, iconName, iconFamily, iconSize, iconColor, color, textStyle, style, ...props } = this.props;
const modalStyles = [
styles.qty,
color && { backgroundColor: color },
style
];
const textStyles = [
styles.text,
textStyle
];
return (
<ModalDropdown
style={modalStyles}
onSelect={this.handleOnSelect}
dropdownStyle={styles.dropdown}
dropdownTextStyle={{paddingLeft:16, fontSize:12}}
{...props}>
<Block flex row middle space="between">
<Text size={12} style={textStyles}>{this.state.value}</Text>
<Icon name={iconName || "nav-down"} family={iconFamily || "ArgonExtra"} size={iconSize || 10} color={iconColor || argonTheme.COLORS.WHITE} />
</Block>
</ModalDropdown>
)
}
}
DropDown.propTypes = {
onSelect: PropTypes.func,
iconName: PropTypes.string,
iconFamily: PropTypes.string,
iconSize: PropTypes.number,
color: PropTypes.string,
textStyle: PropTypes.any,
};
const styles = StyleSheet.create({
qty: {
width: 100,
backgroundColor: argonTheme.COLORS.DEFAULT,
paddingHorizontal: 16,
paddingTop: 10,
paddingBottom:9.5,
borderRadius: 4,
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 4,
shadowOpacity: 1,
},
text: {
color: argonTheme.COLORS.WHITE,
fontWeight: '600'
},
dropdown: {
marginTop: 8,
marginLeft: -16,
width: 100,
},
});
export default DropDown;

View File

@ -0,0 +1,24 @@
import React from 'react';
import { Switch, Platform } from 'react-native';
import argonTheme from '../constants/Theme';
class MkSwitch extends React.Component {
render() {
const { value, ...props } = this.props;
const thumbColor = Platform.OS === 'ios' ? null :
Platform.OS === 'android' && value ? argonTheme.COLORS.SWITCH_ON : argonTheme.COLORS.SWITCH_OFF;
return (
<Switch
value={value}
thumbColor={thumbColor}
ios_backgroundColor={argonTheme.COLORS.SWITCH_OFF}
trackColor={{ false: argonTheme.COLORS.SWITCH_ON, true: argonTheme.COLORS.SWITCH_ON }}
{...props}
/>
);
}
}
export default MkSwitch;

View File

@ -0,0 +1,159 @@
import React from 'react';
import { StyleSheet, Dimensions, FlatList, Animated } from 'react-native';
import { Block, theme } from 'galio-framework';
const { width } = Dimensions.get('screen');
import argonTheme from '../constants/Theme';
const defaultMenu = [
{ id: 'popular', title: 'Popular', },
{ id: 'beauty', title: 'Beauty', },
{ id: 'cars', title: 'Cars', },
{ id: 'motocycles', title: 'Motocycles', },
];
export default class Tabs extends React.Component {
static defaultProps = {
data: defaultMenu,
initialIndex: null,
}
state = {
active: null,
}
componentDidMount() {
const { initialIndex } = this.props;
initialIndex && this.selectMenu(initialIndex);
}
animatedValue = new Animated.Value(1);
animate() {
this.animatedValue.setValue(0);
Animated.timing(this.animatedValue, {
toValue: 1,
duration: 300,
useNativeDriver: false, // color not supported
}).start()
}
menuRef = React.createRef();
onScrollToIndexFailed = () => {
this.menuRef.current.scrollToIndex({
index: 0,
viewPosition: 0.5
});
}
selectMenu = (id) => {
this.setState({ active: id });
this.menuRef.current.scrollToIndex({
index: this.props.data.findIndex(item => item.id === id),
viewPosition: 0.5
});
this.animate();
this.props.onChange && this.props.onChange(id);
}
renderItem = (item) => {
const isActive = this.state.active === item.id;
const textColor = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [argonTheme.COLORS.BLACK, isActive ? argonTheme.COLORS.WHITE : argonTheme.COLORS.BLACK],
extrapolate: 'clamp',
});
const containerStyles = [
styles.titleContainer,
!isActive && { backgroundColor: argonTheme.COLORS.SECONDARY },
isActive && styles.containerShadow
];
return (
<Block style={containerStyles}>
<Animated.Text
style={[
styles.menuTitle,
{ color: textColor }
]}
onPress={() => this.selectMenu(item.id)}>
{item.title}
</Animated.Text>
</Block>
)
}
renderMenu = () => {
const { data, ...props } = this.props;
return (
<FlatList
{...props}
data={data}
horizontal={true}
ref={this.menuRef}
extraData={this.state}
keyExtractor={(item) => item.id}
showsHorizontalScrollIndicator={false}
onScrollToIndexFailed={this.onScrollToIndexFailed}
renderItem={({ item }) => this.renderItem(item)}
contentContainerStyle={styles.menu}
/>
)
}
render() {
return (
<Block style={styles.container}>
{this.renderMenu()}
</Block>
)
}
}
const styles = StyleSheet.create({
container: {
width: width,
backgroundColor: theme.COLORS.WHITE,
zIndex: 2,
},
shadow: {
shadowColor: theme.COLORS.BLACK,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
shadowOpacity: 0.2,
elevation: 4,
},
menu: {
paddingHorizontal: theme.SIZES.BASE * 2.5,
paddingTop: 8,
paddingBottom: 16,
},
titleContainer: {
alignItems: 'center',
backgroundColor: argonTheme.COLORS.ACTIVE,
borderRadius: 4,
marginRight: 9
},
containerShadow: {
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowRadius: 4,
shadowOpacity: 0.1,
elevation: 1,
},
menuTitle: {
fontWeight: '600',
fontSize: 14,
// lineHeight: 28,
paddingVertical: 10,
paddingHorizontal: 16,
color: argonTheme.COLORS.MUTED
},
});

View File

@ -0,0 +1,19 @@
import Button from './Button';
import Card from './Card';
import DrawerItem from './DrawerItem';
import Icon from './Icon';
import Header from './Header';
import Input from './Input';
import Switch from './Switch';
import Select from './Select';
export {
Button,
Card,
DrawerItem,
Icon,
Input,
Header,
Switch,
Select
};

View File

@ -0,0 +1,41 @@
// local imgs
const Onboarding = require("../assets/imgs/bg.png");
const Logo = require("../assets/imgs/argon-logo.png");
const LogoOnboarding = require("../assets/imgs/argon-logo-onboarding.png");
const ProfileBackground = require("../assets/imgs/profile-screen-bg.png");
const RegisterBackground = require("../assets/imgs/register-bg.png");
const Pro = require("../assets/imgs/getPro-bg.png");
const ArgonLogo = require("../assets/imgs/argonlogo.png");
const iOSLogo = require("../assets/imgs/ios.png");
const androidLogo = require("../assets/imgs/android.png");
// internet imgs
const ProfilePicture = 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?fit=crop&w=1650&q=80';
const Viewed = [
'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?fit=crop&w=240&q=80',
'https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=240&q=80',
'https://images.unsplash.com/photo-1551798507-629020c81463?fit=crop&w=240&q=80',
'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=240&q=80',
'https://images.unsplash.com/photo-1503642551022-c011aafb3c88?fit=crop&w=240&q=80',
'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=240&q=80',
];
const Products = {
'View article': 'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=840&q=840',
};
export default {
Onboarding,
Logo,
LogoOnboarding,
ProfileBackground,
ProfilePicture,
RegisterBackground,
Viewed,
Products,
Pro,
ArgonLogo,
iOSLogo,
androidLogo
};

View File

@ -0,0 +1,32 @@
export default {
COLORS: {
DEFAULT: '#172B4D',
PRIMARY: '#5E72E4',
SECONDARY: '#F7FAFC',
LABEL: '#FE2472',
INFO: '#11CDEF',
ERROR: '#F5365C',
SUCCESS: '#2DCE89',
WARNING: '#FB6340',
/*not yet changed */
MUTED: '#ADB5BD',
INPUT: '#DCDCDC',
INPUT_SUCCESS: '#7BDEB2',
INPUT_ERROR: '#FCB3A4',
ACTIVE: '#5E72E4', //same as primary
BUTTON_COLOR: '#9C26B0', //wtf
PLACEHOLDER: '#9FA5AA',
SWITCH_ON: '#5E72E4',
SWITCH_OFF: '#D4D9DD',
GRADIENT_START: '#6B24AA',
GRADIENT_END: '#AC2688',
PRICE_COLOR: '#EAD5FB',
BORDER_COLOR: '#E7E7E7',
BLOCK: '#E7E7E7',
ICON: '#172B4D',
HEADER: '#525F7F',
BORDER: '#CAD1D7',
WHITE: '#FFFFFF',
BLACK: '#000000'
}
};

View File

@ -0,0 +1,29 @@
export default [
{
title: 'Ice cream is made with carrageenan …',
image: 'https://images.unsplash.com/photo-1516559828984-fb3b99548b21?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
cta: 'View article',
horizontal: true
},
{
title: 'Is makeup one of your daily esse …',
image: 'https://images.unsplash.com/photo-1519368358672-25b03afee3bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2004&q=80',
cta: 'View article'
},
{
title: 'Coffee is more than just a drink: Its …',
image: 'https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80',
cta: 'View article'
},
{
title: 'Fashion is a popular style, especially in …',
image: 'https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1326&q=80',
cta: 'View article'
},
{
title: 'Argon is a great free UI packag …',
image: 'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=1947&q=80',
cta: 'View article',
horizontal: true
},
];

View File

@ -0,0 +1,11 @@
import argonTheme from './Theme';
import articles from './articles';
import Images from './Images';
import tabs from './tabs';
export {
articles,
argonTheme,
Images,
tabs
};

View File

@ -0,0 +1,8 @@
export default tabs = {
categories: [
{ id: 'popular', title: 'Popular' },
{ id: 'beauty', title: 'Beauty' },
{ id: 'fashion', title: 'Fashion' },
{ id: 'car_motorcycle', title: 'Car & Motorcycle' },
],
}

View File

@ -0,0 +1,6 @@
import { Platform, StatusBar } from 'react-native';
import { theme } from 'galio-framework';
export const StatusHeight = StatusBar.currentHeight;
export const HeaderHeight = (theme.SIZES.BASE * 3.5 + (StatusHeight || 0));
export const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812);

View File

@ -0,0 +1,71 @@
import { Block, Text, theme } from "galio-framework";
import { Image, ScrollView, StyleSheet } from "react-native";
import { DrawerItem as DrawerCustomItem } from "../components";
import Images from "../constants/Images";
import React from "react";
function CustomDrawerContent({
drawerPosition,
navigation,
profile,
focused,
state,
...rest
}) {
const screens = ["Home", "Profile", "Account", "Elements", "Articles"];
return (
<Block
style={styles.container}
forceInset={{ top: "always", horizontal: "never" }}
>
<Block flex={0.06} style={styles.header}>
<Image styles={styles.logo} source={Images.Logo} />
</Block>
<Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
<ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
{screens.map((item, index) => {
return (
<DrawerCustomItem
title={item}
key={index}
navigation={navigation}
focused={state.index === index ? true : false}
/>
);
})}
<Block
flex
style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}
>
<Block
style={{
borderColor: "rgba(0,0,0,0.2)",
width: "100%",
borderWidth: StyleSheet.hairlineWidth,
}}
/>
<Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>
DOCUMENTATION
</Text>
</Block>
<DrawerCustomItem title="Getting Started" navigation={navigation} />
</ScrollView>
</Block>
</Block>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
paddingHorizontal: 28,
paddingBottom: theme.SIZES.BASE,
paddingTop: theme.SIZES.BASE * 3,
justifyContent: "center",
},
});
export default CustomDrawerContent;

View File

@ -0,0 +1,256 @@
import { Animated, Dimensions, Easing } from "react-native";
// header for screens
import { Header, Icon } from "../components";
import { argonTheme, tabs } from "../constants";
import Articles from "../screens/Articles";
import { Block } from "galio-framework";
// drawer
import CustomDrawerContent from "./Menu";
import Elements from "../screens/Elements";
// screens
import Home from "../screens/Home";
import Onboarding from "../screens/Onboarding";
import Pro from "../screens/Pro";
import Profile from "../screens/Profile";
import React from "react";
import Register from "../screens/Register";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createStackNavigator } from "@react-navigation/stack";
const { width } = Dimensions.get("screen");
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
function ElementsStack(props) {
return (
<Stack.Navigator
screenOptions={{
mode: "card",
headerShown: false,
}}
>
<Stack.Screen
name="Elements"
component={Elements}
options={{
header: ({ navigation, scene }) => (
<Header title="Elements" navigation={navigation} scene={scene} />
),
cardStyle: { backgroundColor: "#F8F9FE" },
}}
/>
<Stack.Screen
name="Pro"
component={Pro}
options={{
header: ({ navigation, scene }) => (
<Header
title=""
back
white
transparent
navigation={navigation}
scene={scene}
/>
),
headerTransparent: true,
}}
/>
</Stack.Navigator>
);
}
function ArticlesStack(props) {
return (
<Stack.Navigator
screenOptions={{
mode: "card",
headerShown: "screen",
}}
>
<Stack.Screen
name="Articles"
component={Articles}
options={{
header: ({ navigation, scene }) => (
<Header title="Articles" navigation={navigation} scene={scene} />
),
cardStyle: { backgroundColor: "#F8F9FE" },
}}
/>
<Stack.Screen
name="Pro"
component={Pro}
options={{
header: ({ navigation, scene }) => (
<Header
title=""
back
white
transparent
navigation={navigation}
scene={scene}
/>
),
headerTransparent: true,
}}
/>
</Stack.Navigator>
);
}
function ProfileStack(props) {
return (
<Stack.Navigator
initialRouteName="Profile"
screenOptions={{
mode: "card",
headerShown: "screen",
}}
>
<Stack.Screen
name="Profile"
component={Profile}
options={{
header: ({ navigation, scene }) => (
<Header
transparent
white
title="Profile"
navigation={navigation}
scene={scene}
/>
),
cardStyle: { backgroundColor: "#FFFFFF" },
headerTransparent: true,
}}
/>
<Stack.Screen
name="Pro"
component={Pro}
options={{
header: ({ navigation, scene }) => (
<Header
title=""
back
white
transparent
navigation={navigation}
scene={scene}
/>
),
headerTransparent: true,
}}
/>
</Stack.Navigator>
);
}
function HomeStack(props) {
return (
<Stack.Navigator
screenOptions={{
mode: "card",
headerShown: "screen",
}}
>
<Stack.Screen
name="Home"
component={Home}
options={{
header: ({ navigation, scene }) => (
<Header
title="Home"
search
options
navigation={navigation}
scene={scene}
/>
),
cardStyle: { backgroundColor: "#F8F9FE" },
}}
/>
<Stack.Screen
name="Pro"
component={Pro}
options={{
header: ({ navigation, scene }) => (
<Header
title=""
back
white
transparent
navigation={navigation}
scene={scene}
/>
),
headerTransparent: true,
}}
/>
</Stack.Navigator>
);
}
export default function OnboardingStack(props) {
return (
<Stack.Navigator
screenOptions={{
mode: "card",
headerShown: false,
}}
>
<Stack.Screen
name="Onboarding"
component={Onboarding}
option={{
headerTransparent: true,
}}
/>
<Stack.Screen name="App" component={AppStack} />
</Stack.Navigator>
);
}
function AppStack(props) {
return (
<Drawer.Navigator
style={{ flex: 1 }}
drawerContent={(props) => <CustomDrawerContent {...props} />}
drawerStyle={{
backgroundColor: "white",
width: width * 0.8,
}}
drawerContentOptions={{
activeTintcolor: "white",
inactiveTintColor: "#000",
activeBackgroundColor: "transparent",
itemStyle: {
width: width * 0.75,
backgroundColor: "transparent",
paddingVertical: 16,
paddingHorizonal: 12,
justifyContent: "center",
alignContent: "center",
alignItems: "center",
overflow: "hidden",
},
labelStyle: {
fontSize: 18,
marginLeft: 12,
fontWeight: "normal",
},
}}
initialRouteName="Home"
>
<Drawer.Screen name="Home" component={HomeStack} />
<Drawer.Screen name="Profile" component={ProfileStack} />
<Drawer.Screen name="Account" component={Register} />
<Drawer.Screen name="Elements" component={ElementsStack} />
<Drawer.Screen name="Articles" component={ArticlesStack} />
</Drawer.Navigator>
);
}

File diff suppressed because it is too large Load Diff

View File

@ -10,13 +10,23 @@
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/native": "^6.0.11",
"expo": "~45.0.0",
"expo-cli": "^5.4.12",
"expo-status-bar": "~1.3.0",
"galio-framework": "^0.8.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-gesture-handler": "~2.2.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-reanimated": "~2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-web": "0.17.7",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"sharp-cli": "^2.1.1"
},
"devDependencies": {

View File

@ -0,0 +1,252 @@
//galio
import { Block, Text, theme } from "galio-framework";
import {
Dimensions,
Image,
ImageBackground,
ScrollView,
StyleSheet,
TouchableWithoutFeedback,
} from "react-native";
//argon
import { Images, argonTheme, articles } from "../constants/";
import { Card } from "../components/";
import React from "react";
const { width } = Dimensions.get("screen");
const thumbMeasure = (width - 48 - 32) / 3;
const cardWidth = width - theme.SIZES.BASE * 2;
const categories = [
{
title: "Music Album",
description:
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
image:
"https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
price: "$125",
},
{
title: "Events",
description:
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
image:
"https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
price: "$35",
},
];
class Articles extends React.Component {
renderProduct = (item, index) => {
const { navigation } = this.props;
return (
<TouchableWithoutFeedback
style={{ zIndex: 3 }}
key={`product-${item.title}`}
onPress={() => navigation.navigate("Pro", { product: item })}
>
<Block center style={styles.productItem}>
<Image
resizeMode="cover"
style={styles.productImage}
source={{ uri: item.image }}
/>
<Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Text
center
size={16}
color={theme.COLORS.MUTED}
style={styles.productPrice}
>
{item.price}
</Text>
<Text center size={34}>
{item.title}
</Text>
<Text
center
size={16}
color={theme.COLORS.MUTED}
style={styles.productDescription}
>
{item.description}
</Text>
</Block>
</Block>
</TouchableWithoutFeedback>
);
};
renderCards = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Cards
</Text>
<Block flex>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Card item={articles[0]} horizontal />
<Block flex row>
<Card
item={articles[1]}
style={{ marginRight: theme.SIZES.BASE }}
/>
<Card item={articles[2]} />
</Block>
<Card item={articles[4]} full />
<Block flex card shadow style={styles.category}>
<ImageBackground
source={{ uri: Images.Products["View article"] }}
style={[
styles.imageBlock,
{ width: width - theme.SIZES.BASE * 2, height: 252 },
]}
imageStyle={{
width: width - theme.SIZES.BASE * 2,
height: 252,
}}
>
<Block style={styles.categoryTitle}>
<Text size={18} bold color={theme.COLORS.WHITE}>
View article
</Text>
</Block>
</ImageBackground>
</Block>
</Block>
<Block flex style={{ marginTop: theme.SIZES.BASE / 2 }}>
<ScrollView
horizontal={true}
pagingEnabled={true}
decelerationRate={0}
scrollEventThrottle={16}
snapToAlignment="center"
showsHorizontalScrollIndicator={false}
snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
contentContainerStyle={{
paddingHorizontal: theme.SIZES.BASE / 2,
}}
>
{categories &&
categories.map((item, index) =>
this.renderProduct(item, index)
)}
</ScrollView>
</Block>
</Block>
</Block>
);
};
renderAlbum = () => {
const { navigation } = this.props;
return (
<Block
flex
style={[styles.group, { paddingBottom: theme.SIZES.BASE * 5 }]}
>
<Text bold size={16} style={styles.title}>
Album
</Text>
<Block style={{ marginHorizontal: theme.SIZES.BASE * 2 }}>
<Block flex right>
<Text
size={12}
color={theme.COLORS.PRIMARY}
onPress={() => navigation.navigate("Home")}
>
View All
</Text>
</Block>
<Block
row
space="between"
style={{ marginTop: theme.SIZES.BASE, flexWrap: "wrap" }}
>
{Images.Viewed.map((img, index) => (
<Block key={`viewed-${img}`} style={styles.shadow}>
<Image
resizeMode="cover"
source={{ uri: img }}
style={styles.albumThumb}
/>
</Block>
))}
</Block>
</Block>
</Block>
);
};
render() {
return (
<Block flex center>
<ScrollView showsVerticalScrollIndicator={false}>
{this.renderCards()}
{this.renderAlbum()}
</ScrollView>
</Block>
);
}
}
const styles = StyleSheet.create({
title: {
paddingBottom: theme.SIZES.BASE,
paddingHorizontal: theme.SIZES.BASE * 2,
marginTop: 22,
color: argonTheme.COLORS.HEADER,
},
group: {
paddingTop: theme.SIZES.BASE,
},
albumThumb: {
borderRadius: 4,
marginVertical: 4,
alignSelf: "center",
width: thumbMeasure,
height: thumbMeasure,
},
category: {
backgroundColor: theme.COLORS.WHITE,
marginVertical: theme.SIZES.BASE / 2,
borderWidth: 0,
},
categoryTitle: {
height: "100%",
paddingHorizontal: theme.SIZES.BASE,
backgroundColor: "rgba(0, 0, 0, 0.5)",
justifyContent: "center",
alignItems: "center",
},
imageBlock: {
overflow: "hidden",
borderRadius: 4,
},
productItem: {
width: cardWidth - theme.SIZES.BASE * 2,
marginHorizontal: theme.SIZES.BASE,
shadowColor: "black",
shadowOffset: { width: 0, height: 7 },
shadowRadius: 10,
shadowOpacity: 0.2,
},
productImage: {
width: cardWidth - theme.SIZES.BASE,
height: cardWidth - theme.SIZES.BASE,
borderRadius: 3,
},
productPrice: {
paddingTop: theme.SIZES.BASE,
paddingBottom: theme.SIZES.BASE / 2,
},
productDescription: {
paddingTop: theme.SIZES.BASE,
// paddingBottom: theme.SIZES.BASE * 2,
},
});
export default Articles;

View File

@ -0,0 +1,487 @@
// Galio components
import { Block, Button as GaButton, Text, theme } from "galio-framework";
import { Button, Header, Icon, Input, Select, Switch } from "../components/";
import {
Dimensions,
ScrollView,
StyleSheet,
TouchableOpacity,
} from "react-native";
// Argon themed components
import { argonTheme, tabs } from "../constants/";
import React from "react";
const { width } = Dimensions.get("screen");
class Elements extends React.Component {
state = {
"switch-1": true,
"switch-2": false,
};
toggleSwitch = (switchId) =>
this.setState({ [switchId]: !this.state[switchId] });
renderButtons = () => {
return (
<Block flex>
<Text bold size={16} style={styles.title}>
Buttons
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Block center>
<Button color="default" style={styles.button}>
DEFAULT
</Button>
</Block>
<Block center>
<Button
color="secondary"
textStyle={{ color: "black", fontSize: 12, fontWeight: "700" }}
style={styles.button}
>
SECONDARY
</Button>
</Block>
<Block center>
<Button style={styles.button}>PRIMARY</Button>
</Block>
<Block center>
<Button color="info" style={styles.button}>
INFO
</Button>
</Block>
<Block center>
<Button color="success" style={styles.button}>
SUCCESS
</Button>
</Block>
<Block center>
<Button color="warning" style={styles.button}>
WARNING
</Button>
</Block>
<Block center>
<Button color="error" style={styles.button}>
ERROR
</Button>
</Block>
<Block row space="evenly">
<Block flex left style={{ marginTop: 8 }}>
<Select
defaultIndex={1}
options={["01", "02", "03", "04", "05"]}
/>
</Block>
<Block flex center>
<Button small center color="default" style={styles.optionsButton}>
DELETE
</Button>
</Block>
<Block flex={1.25} right>
<Button center color="default" style={styles.optionsButton}>
SAVE FOR LATER
</Button>
</Block>
</Block>
</Block>
</Block>
);
};
renderText = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Typography
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Text
h1
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 1
</Text>
<Text
h2
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 2
</Text>
<Text
h3
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 3
</Text>
<Text
h4
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 4
</Text>
<Text
h5
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 5
</Text>
<Text
p
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Paragraph
</Text>
<Text muted>This is a muted paragraph.</Text>
</Block>
</Block>
);
};
renderInputs = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Inputs
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input right placeholder="Regular" iconContent={<Block />} />
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
right
placeholder="Regular Custom"
style={{
borderColor: argonTheme.COLORS.INFO,
borderRadius: 4,
backgroundColor: "#fff",
}}
iconContent={<Block />}
/>
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
placeholder="Icon left"
iconContent={
<Icon
size={11}
style={{ marginRight: 10 }}
color={argonTheme.COLORS.ICON}
name="search-zoom-in"
family="ArgonExtra"
/>
}
/>
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
right
placeholder="Icon Right"
iconContent={
<Icon
size={11}
color={argonTheme.COLORS.ICON}
name="search-zoom-in"
family="ArgonExtra"
/>
}
/>
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
success
right
placeholder="Success"
iconContent={
<Block
middle
style={{
width: 20,
height: 20,
borderRadius: 10,
backgroundColor: argonTheme.COLORS.INPUT_SUCCESS,
}}
>
<Icon
size={11}
color={argonTheme.COLORS.ICON}
name="g-check"
family="ArgonExtra"
/>
</Block>
}
/>
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
error
right
placeholder="Error Input"
iconContent={
<Block
middle
style={{
width: 20,
height: 20,
borderRadius: 10,
backgroundColor: argonTheme.COLORS.INPUT_ERROR,
}}
>
<Icon
size={11}
color={argonTheme.COLORS.ICON}
name="support"
family="ArgonExtra"
/>
</Block>
}
/>
</Block>
</Block>
);
};
renderSwitches = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Switches
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Block
row
middle
space="between"
style={{ marginBottom: theme.SIZES.BASE }}
>
<Text size={14}>Switch is ON</Text>
<Switch
value={this.state["switch-1"]}
onValueChange={() => this.toggleSwitch("switch-1")}
/>
</Block>
<Block row middle space="between">
<Text size={14}>Switch is OFF</Text>
<Switch
value={this.state["switch-2"]}
onValueChange={() => this.toggleSwitch("switch-2")}
/>
</Block>
</Block>
</Block>
);
};
renderTableCell = () => {
const { navigation } = this.props;
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Table Cell
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Block style={styles.rows}>
<TouchableOpacity onPress={() => navigation.navigate("Pro")}>
<Block row middle space="between" style={{ paddingTop: 7 }}>
<Text size={14}>Manage Options</Text>
<Icon
name="chevron-right"
family="entypo"
style={{ paddingRight: 5 }}
/>
</Block>
</TouchableOpacity>
</Block>
</Block>
</Block>
);
};
renderSocial = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Social
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Block row center space="between">
<Block flex middle right>
<GaButton
round
onlyIcon
shadowless
icon="facebook"
iconFamily="Font-Awesome"
iconColor={theme.COLORS.WHITE}
iconSize={theme.SIZES.BASE * 1.625}
color={theme.COLORS.FACEBOOK}
style={[styles.social, styles.shadow]}
/>
</Block>
<Block flex middle center>
<GaButton
round
onlyIcon
shadowless
icon="twitter"
iconFamily="Font-Awesome"
iconColor={theme.COLORS.WHITE}
iconSize={theme.SIZES.BASE * 1.625}
color={theme.COLORS.TWITTER}
style={[styles.social, styles.shadow]}
/>
</Block>
<Block flex middle left>
<GaButton
round
onlyIcon
shadowless
icon="dribbble"
iconFamily="Font-Awesome"
iconColor={theme.COLORS.WHITE}
iconSize={theme.SIZES.BASE * 1.625}
color={theme.COLORS.DRIBBBLE}
style={[styles.social, styles.shadow]}
/>
</Block>
</Block>
</Block>
</Block>
);
};
renderNavigation = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Navigation
</Text>
<Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header back title="Title" navigation={this.props.navigation} />
</Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header
white
back
title="Title"
navigation={this.props.navigation}
bgColor={argonTheme.COLORS.ACTIVE}
titleColor="white"
iconColor="white"
/>
</Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header search title="Title" navigation={this.props.navigation} />
</Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header
tabs={tabs.categories}
search
title="Title"
navigation={this.props.navigation}
/>
</Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header
options
search
title="Title"
optionLeft="Option 1"
optionRight="Option 2"
navigation={this.props.navigation}
/>
</Block>
</Block>
</Block>
);
};
render() {
return (
<Block flex center>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 30, width }}
>
{this.renderButtons()}
{this.renderText()}
{this.renderInputs()}
{this.renderSocial()}
{this.renderSwitches()}
{this.renderNavigation()}
{this.renderTableCell()}
</ScrollView>
</Block>
);
}
}
const styles = StyleSheet.create({
title: {
paddingBottom: theme.SIZES.BASE,
paddingHorizontal: theme.SIZES.BASE * 2,
marginTop: 44,
color: argonTheme.COLORS.HEADER,
},
group: {
paddingTop: theme.SIZES.BASE * 2,
},
shadow: {
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 4,
shadowOpacity: 0.2,
elevation: 2,
},
button: {
marginBottom: theme.SIZES.BASE,
width: width - theme.SIZES.BASE * 2,
},
optionsButton: {
width: "auto",
height: 34,
paddingHorizontal: theme.SIZES.BASE,
paddingVertical: 10,
},
input: {
borderBottomWidth: 1,
},
inputDefault: {
borderBottomColor: argonTheme.COLORS.PLACEHOLDER,
},
inputTheme: {
borderBottomColor: argonTheme.COLORS.PRIMARY,
},
inputInfo: {
borderBottomColor: argonTheme.COLORS.INFO,
},
inputSuccess: {
borderBottomColor: argonTheme.COLORS.SUCCESS,
},
inputWarning: {
borderBottomColor: argonTheme.COLORS.WARNING,
},
inputDanger: {
borderBottomColor: argonTheme.COLORS.ERROR,
},
social: {
width: theme.SIZES.BASE * 3.5,
height: theme.SIZES.BASE * 3.5,
borderRadius: theme.SIZES.BASE * 1.75,
justifyContent: "center",
},
});
export default Elements;

47
mobile-ui/screens/Home.js Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
import { StyleSheet, Dimensions, ScrollView } from 'react-native';
import { Block, theme } from 'galio-framework';
import { Card } from '../components';
import articles from '../constants/articles';
const { width } = Dimensions.get('screen');
class Home extends React.Component {
renderArticles = () => {
return (
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.articles}>
<Block flex>
<Card item={articles[0]} horizontal />
<Block flex row>
<Card item={articles[1]} style={{ marginRight: theme.SIZES.BASE }} />
<Card item={articles[2]} />
</Block>
<Card item={articles[3]} horizontal />
<Card item={articles[4]} full />
</Block>
</ScrollView>
)
}
render() {
return (
<Block flex center style={styles.home}>
{this.renderArticles()}
</Block>
);
}
}
const styles = StyleSheet.create({
home: {
width: width,
},
articles: {
width: width - theme.SIZES.BASE * 2,
paddingVertical: theme.SIZES.BASE,
},
});
export default Home;

View File

@ -0,0 +1,99 @@
import React from "react";
import {
ImageBackground,
Image,
StyleSheet,
StatusBar,
Dimensions
} from "react-native";
import { Block, Button, Text, theme } from "galio-framework";
const { height, width } = Dimensions.get("screen");
import argonTheme from "../constants/Theme";
import Images from "../constants/Images";
class Onboarding extends React.Component {
render() {
const { navigation } = this.props;
return (
<Block flex style={styles.container}>
<StatusBar hidden />
<Block flex center>
<ImageBackground
source={Images.Onboarding}
style={{ height, width, zIndex: 1 }}
/>
</Block>
<Block center>
<Image source={Images.LogoOnboarding} style={styles.logo} />
</Block>
<Block flex space="between" style={styles.padded}>
<Block flex space="around" style={{ zIndex: 2 }}>
<Block style={styles.title}>
<Block>
<Text color="white" size={60}>
Design
</Text>
</Block>
<Block>
<Text color="white" size={60}>
System
</Text>
</Block>
<Block style={styles.subTitle}>
<Text color="white" size={16}>
Fully coded React Native components.
</Text>
</Block>
</Block>
<Block center>
<Button
style={styles.button}
color={argonTheme.COLORS.SECONDARY}
onPress={() => navigation.navigate("App")}
textStyle={{ color: argonTheme.COLORS.BLACK }}
>
Get Started
</Button>
</Block>
</Block>
</Block>
</Block>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: theme.COLORS.BLACK
},
padded: {
paddingHorizontal: theme.SIZES.BASE * 2,
position: "relative",
bottom: theme.SIZES.BASE,
zIndex: 2,
},
button: {
width: width - theme.SIZES.BASE * 4,
height: theme.SIZES.BASE * 3,
shadowRadius: 0,
shadowOpacity: 0
},
logo: {
width: 200,
height: 60,
zIndex: 2,
position: 'relative',
marginTop: '-50%'
},
title: {
marginTop:'-5%'
},
subTitle: {
marginTop: 20
}
});
export default Onboarding;

100
mobile-ui/screens/Pro.js Normal file
View File

@ -0,0 +1,100 @@
import React from 'react';
import { ImageBackground, Image, StyleSheet, StatusBar, Dimensions, Platform, Linking } from 'react-native';
import { Block, Button, Text, theme } from 'galio-framework';
const { height, width } = Dimensions.get('screen');
import { Images, argonTheme } from '../constants/';
import { HeaderHeight } from "../constants/utils";
export default class Pro extends React.Component {
render() {
const { navigation } = this.props;
return (
<Block flex style={styles.container}>
<StatusBar barStyle="light-content" />
<Block flex>
<ImageBackground
source={Images.Pro}
style={{ flex: 1, height: height, width, zIndex: 1 }}
/>
<Block space="between" style={styles.padded}>
<Block>
<Block>
<Image source={Images.ArgonLogo}
style={{ marginBottom: theme.SIZES.BASE * 1.5 }}/>
</Block>
<Block >
<Block>
<Text color="white" size={60}>Argon</Text>
</Block>
<Block>
<Text color="white" size={60}>Design</Text>
</Block>
<Block row>
<Text color="white" size={60}>System</Text>
<Block middle style={styles.pro}>
<Text size={16} color="white">PRO</Text>
</Block>
</Block>
</Block>
<Text size={16} color='rgba(255,255,255,0.6)' style={{ marginTop: 35 }}>
Take advantage of all the features and screens made upon Galio Design System, coded on React Native for both.
</Text>
<Block row style={{ marginTop: theme.SIZES.BASE * 1.5, marginBottom: theme.SIZES.BASE * 4 }}>
<Image
source={Images.iOSLogo}
style={{ height: 38, width: 82, marginRight: theme.SIZES.BASE * 1.5 }} />
<Image
source={Images.androidLogo}
style={{ height: 38, width: 140 }} />
</Block>
<Button
shadowless
style={styles.button}
color={argonTheme.COLORS.INFO}
onPress={() => Linking.openURL('https://www.creative-tim.com/product/argon-pro-react-native').catch((err) => console.error('An error occurred', err))}>
<Text bold color={theme.COLORS.WHITE}>BUY NOW</Text>
</Button>
</Block>
</Block>
</Block>
</Block>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: theme.COLORS.BLACK,
marginTop: Platform.OS === 'android' ? -HeaderHeight : 0,
},
padded: {
paddingHorizontal: theme.SIZES.BASE * 2,
zIndex: 3,
position: 'absolute',
bottom: Platform.OS === 'android' ? theme.SIZES.BASE * 2 : theme.SIZES.BASE * 3,
},
button: {
width: width - theme.SIZES.BASE * 4,
height: theme.SIZES.BASE * 3,
shadowRadius: 0,
shadowOpacity: 0,
},
pro: {
backgroundColor: argonTheme.COLORS.INFO,
paddingHorizontal: 8,
marginLeft: 3,
borderRadius: 4,
height: 22,
marginTop: 15
},
gradient: {
zIndex: 1,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 66,
},
});

View File

@ -0,0 +1,342 @@
import React from "react";
import {
StyleSheet,
Dimensions,
ScrollView,
Image,
ImageBackground,
Platform
} from "react-native";
import { Block, Text, theme } from "galio-framework";
import { Button } from "../components";
import { Images, argonTheme } from "../constants";
import { HeaderHeight } from "../constants/utils";
const { width, height } = Dimensions.get("screen");
const thumbMeasure = (width - 48 - 32) / 3;
class Profile extends React.Component {
render() {
return (
<Block flex style={styles.profile}>
<Block flex>
<ImageBackground
source={Images.ProfileBackground}
style={styles.profileContainer}
imageStyle={styles.profileBackground}
>
<ScrollView
showsVerticalScrollIndicator={false}
style={{ width, marginTop: '25%' }}
>
<Block flex style={styles.profileCard}>
<Block middle style={styles.avatarContainer}>
<Image
source={{ uri: Images.ProfilePicture }}
style={styles.avatar}
/>
</Block>
<Block style={styles.info}>
<Block
middle
row
space="evenly"
style={{ marginTop: 20, paddingBottom: 24 }}
>
<Button
small
style={{ backgroundColor: argonTheme.COLORS.INFO }}
>
CONNECT
</Button>
<Button
small
style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
>
MESSAGE
</Button>
</Block>
<Block row space="between">
<Block middle>
<Text
bold
size={18}
color="#525F7F"
style={{ marginBottom: 4 }}
>
2K
</Text>
<Text size={12} color={argonTheme.COLORS.TEXT}>Orders</Text>
</Block>
<Block middle>
<Text
bold
color="#525F7F"
size={18}
style={{ marginBottom: 4 }}
>
10
</Text>
<Text size={12} color={argonTheme.COLORS.TEXT}>Photos</Text>
</Block>
<Block middle>
<Text
bold
color="#525F7F"
size={18}
style={{ marginBottom: 4 }}
>
89
</Text>
<Text size={12} color={argonTheme.COLORS.TEXT}>Comments</Text>
</Block>
</Block>
</Block>
<Block flex>
<Block middle style={styles.nameInfo}>
<Text bold size={28} color="#32325D">
Jessica Jones, 27
</Text>
<Text size={16} color="#32325D" style={{ marginTop: 10 }}>
San Francisco, USA
</Text>
</Block>
<Block middle style={{ marginTop: 30, marginBottom: 16 }}>
<Block style={styles.divider} />
</Block>
<Block middle>
<Text
size={16}
color="#525F7F"
style={{ textAlign: "center" }}
>
An artist of considerable range, Jessica name taken by
Melbourne
</Text>
<Button
color="transparent"
textStyle={{
color: "#233DD2",
fontWeight: "500",
fontSize: 16
}}
>
Show more
</Button>
</Block>
<Block
row
space="between"
>
<Text bold size={16} color="#525F7F" style={{marginTop: 12}}>
Album
</Text>
<Button
small
color="transparent"
textStyle={{ color: "#5E72E4", fontSize: 12, marginLeft: 24 }}
>
View all
</Button>
</Block>
<Block style={{ paddingBottom: -HeaderHeight * 2 }}>
<Block row space="between" style={{ flexWrap: "wrap" }}>
{Images.Viewed.map((img, imgIndex) => (
<Image
source={{ uri: img }}
key={`viewed-${img}`}
resizeMode="cover"
style={styles.thumb}
/>
))}
</Block>
</Block>
</Block>
</Block>
</ScrollView>
</ImageBackground>
</Block>
{/* <ScrollView showsVerticalScrollIndicator={false}
contentContainerStyle={{ flex: 1, width, height, zIndex: 9000, backgroundColor: 'red' }}>
<Block flex style={styles.profileCard}>
<Block middle style={styles.avatarContainer}>
<Image
source={{ uri: Images.ProfilePicture }}
style={styles.avatar}
/>
</Block>
<Block style={styles.info}>
<Block
middle
row
space="evenly"
style={{ marginTop: 20, paddingBottom: 24 }}
>
<Button small style={{ backgroundColor: argonTheme.COLORS.INFO }}>
CONNECT
</Button>
<Button
small
style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
>
MESSAGE
</Button>
</Block>
<Block row space="between">
<Block middle>
<Text
bold
size={12}
color="#525F7F"
style={{ marginBottom: 4 }}
>
2K
</Text>
<Text size={12}>Orders</Text>
</Block>
<Block middle>
<Text bold size={12} style={{ marginBottom: 4 }}>
10
</Text>
<Text size={12}>Photos</Text>
</Block>
<Block middle>
<Text bold size={12} style={{ marginBottom: 4 }}>
89
</Text>
<Text size={12}>Comments</Text>
</Block>
</Block>
</Block>
<Block flex>
<Block middle style={styles.nameInfo}>
<Text bold size={28} color="#32325D">
Jessica Jones, 27
</Text>
<Text size={16} color="#32325D" style={{ marginTop: 10 }}>
San Francisco, USA
</Text>
</Block>
<Block middle style={{ marginTop: 30, marginBottom: 16 }}>
<Block style={styles.divider} />
</Block>
<Block middle>
<Text size={16} color="#525F7F" style={{ textAlign: "center" }}>
An artist of considerable range, Jessica name taken by
Melbourne
</Text>
<Button
color="transparent"
textStyle={{
color: "#233DD2",
fontWeight: "500",
fontSize: 16
}}
>
Show more
</Button>
</Block>
<Block
row
style={{ paddingVertical: 14, alignItems: "baseline" }}
>
<Text bold size={16} color="#525F7F">
Album
</Text>
</Block>
<Block
row
style={{ paddingBottom: 20, justifyContent: "flex-end" }}
>
<Button
small
color="transparent"
textStyle={{ color: "#5E72E4", fontSize: 12 }}
>
View all
</Button>
</Block>
<Block style={{ paddingBottom: -HeaderHeight * 2 }}>
<Block row space="between" style={{ flexWrap: "wrap" }}>
{Images.Viewed.map((img, imgIndex) => (
<Image
source={{ uri: img }}
key={`viewed-${img}`}
resizeMode="cover"
style={styles.thumb}
/>
))}
</Block>
</Block>
</Block>
</Block>
</ScrollView>*/}
</Block>
);
}
}
const styles = StyleSheet.create({
profile: {
marginTop: Platform.OS === "android" ? -HeaderHeight : 0,
// marginBottom: -HeaderHeight * 2,
flex: 1
},
profileContainer: {
width: width,
height: height,
padding: 0,
zIndex: 1
},
profileBackground: {
width: width,
height: height / 2
},
profileCard: {
// position: "relative",
padding: theme.SIZES.BASE,
marginHorizontal: theme.SIZES.BASE,
marginTop: 65,
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
backgroundColor: theme.COLORS.WHITE,
shadowColor: "black",
shadowOffset: { width: 0, height: 0 },
shadowRadius: 8,
shadowOpacity: 0.2,
zIndex: 2
},
info: {
paddingHorizontal: 40
},
avatarContainer: {
position: "relative",
marginTop: -80
},
avatar: {
width: 124,
height: 124,
borderRadius: 62,
borderWidth: 0
},
nameInfo: {
marginTop: 35
},
divider: {
width: "90%",
borderWidth: 1,
borderColor: "#E9ECEF"
},
thumb: {
borderRadius: 4,
marginVertical: 4,
alignSelf: "center",
width: thumbMeasure,
height: thumbMeasure
}
});
export default Profile;

View File

@ -0,0 +1,215 @@
import React from "react";
import {
StyleSheet,
ImageBackground,
Dimensions,
StatusBar,
KeyboardAvoidingView
} from "react-native";
import { Block, Checkbox, Text, theme } from "galio-framework";
import { Button, Icon, Input } from "../components";
import { Images, argonTheme } from "../constants";
const { width, height } = Dimensions.get("screen");
class Register extends React.Component {
render() {
return (
<Block flex middle>
<StatusBar hidden />
<ImageBackground
source={Images.RegisterBackground}
style={{ width, height, zIndex: 1 }}
>
<Block safe flex middle>
<Block style={styles.registerContainer}>
<Block flex={0.25} middle style={styles.socialConnect}>
<Text color="#8898AA" size={12}>
Sign up with
</Text>
<Block row style={{ marginTop: theme.SIZES.BASE }}>
<Button style={{ ...styles.socialButtons, marginRight: 30 }}>
<Block row>
<Icon
name="logo-github"
family="Ionicon"
size={14}
color={"black"}
style={{ marginTop: 2, marginRight: 5 }}
/>
<Text style={styles.socialTextButtons}>GITHUB</Text>
</Block>
</Button>
<Button style={styles.socialButtons}>
<Block row>
<Icon
name="logo-google"
family="Ionicon"
size={14}
color={"black"}
style={{ marginTop: 2, marginRight: 5 }}
/>
<Text style={styles.socialTextButtons}>GOOGLE</Text>
</Block>
</Button>
</Block>
</Block>
<Block flex>
<Block flex={0.17} middle>
<Text color="#8898AA" size={12}>
Or sign up the classic way
</Text>
</Block>
<Block flex center>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior="padding"
enabled
>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
borderless
placeholder="Name"
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="hat-3"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
borderless
placeholder="Email"
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="ic_mail_24px"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8}>
<Input
password
borderless
placeholder="Password"
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="padlock-unlocked"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
<Block row style={styles.passwordCheck}>
<Text size={12} color={argonTheme.COLORS.MUTED}>
password strength:
</Text>
<Text bold size={12} color={argonTheme.COLORS.SUCCESS}>
{" "}
strong
</Text>
</Block>
</Block>
<Block row width={width * 0.75}>
<Checkbox
checkboxStyle={{
borderWidth: 3
}}
color={argonTheme.COLORS.PRIMARY}
label="I agree with the"
/>
<Button
style={{ width: 100 }}
color="transparent"
textStyle={{
color: argonTheme.COLORS.PRIMARY,
fontSize: 14
}}
>
Privacy Policy
</Button>
</Block>
<Block middle>
<Button color="primary" style={styles.createButton}>
<Text bold size={14} color={argonTheme.COLORS.WHITE}>
CREATE ACCOUNT
</Text>
</Button>
</Block>
</KeyboardAvoidingView>
</Block>
</Block>
</Block>
</Block>
</ImageBackground>
</Block>
);
}
}
const styles = StyleSheet.create({
registerContainer: {
width: width * 0.9,
height: height * 0.875,
backgroundColor: "#F4F5F7",
borderRadius: 4,
shadowColor: argonTheme.COLORS.BLACK,
shadowOffset: {
width: 0,
height: 4
},
shadowRadius: 8,
shadowOpacity: 0.1,
elevation: 1,
overflow: "hidden"
},
socialConnect: {
backgroundColor: argonTheme.COLORS.WHITE,
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: "#8898AA"
},
socialButtons: {
width: 120,
height: 40,
backgroundColor: "#fff",
shadowColor: argonTheme.COLORS.BLACK,
shadowOffset: {
width: 0,
height: 4
},
shadowRadius: 8,
shadowOpacity: 0.1,
elevation: 1
},
socialTextButtons: {
color: argonTheme.COLORS.PRIMARY,
fontWeight: "800",
fontSize: 14
},
inputIcons: {
marginRight: 12
},
passwordCheck: {
paddingLeft: 15,
paddingTop: 13,
paddingBottom: 30
},
createButton: {
width: width * 0.5,
marginTop: 25
}
});
export default Register;

BIN
web-ui/.DS_Store vendored

Binary file not shown.