├── .eslintrc.js ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .prettierrc.js ├── App.tsx ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── app.json ├── assets ├── .DS_Store ├── adaptive-icon.png ├── favicon.png ├── icon.png ├── logo.png └── splash.png ├── babel.config.js ├── package.json ├── src ├── .DS_Store ├── assets │ ├── .DS_Store │ ├── fonts │ │ ├── .DS_Store │ │ ├── OpenSans-Bold.ttf │ │ ├── OpenSans-ExtraBold.ttf │ │ ├── OpenSans-Light.ttf │ │ ├── OpenSans-Regular.ttf │ │ └── OpenSans-SemiBold.ttf │ ├── icons │ │ ├── apple.png │ │ ├── apple@2x.png │ │ ├── apple@3x.png │ │ ├── arrow.png │ │ ├── arrow@2x.png │ │ ├── arrow@3x.png │ │ ├── articles.png │ │ ├── articles@2x.png │ │ ├── articles@3x.png │ │ ├── basket.png │ │ ├── basket@2x.png │ │ ├── basket@3x.png │ │ ├── bell.png │ │ ├── bell@2x.png │ │ ├── bell@3x.png │ │ ├── calendar.png │ │ ├── calendar@2x.png │ │ ├── calendar@3x.png │ │ ├── chat.png │ │ ├── chat@2x.png │ │ ├── chat@3x.png │ │ ├── check.png │ │ ├── check@2x.png │ │ ├── check@3x.png │ │ ├── clock.png │ │ ├── clock@2x.png │ │ ├── clock@3x.png │ │ ├── close.png │ │ ├── close@2x.png │ │ ├── close@3x.png │ │ ├── components.png │ │ ├── components@2x.png │ │ ├── components@3x.png │ │ ├── document.png │ │ ├── document@2x.png │ │ ├── document@3x.png │ │ ├── documentation.png │ │ ├── documentation@2x.png │ │ ├── documentation@3x.png │ │ ├── extras.png │ │ ├── extras@2x.png │ │ ├── extras@3x.png │ │ ├── facebook.png │ │ ├── facebook@2x.png │ │ ├── facebook@3x.png │ │ ├── flight.png │ │ ├── flight@2x.png │ │ ├── flight@3x.png │ │ ├── google.png │ │ ├── google@2x.png │ │ ├── google@3x.png │ │ ├── home.png │ │ ├── home@2x.png │ │ ├── home@3x.png │ │ ├── hotel.png │ │ ├── hotel@2x.png │ │ ├── hotel@3x.png │ │ ├── image.png │ │ ├── image@2x.png │ │ ├── image@3x.png │ │ ├── location.png │ │ ├── location@2x.png │ │ ├── location@3x.png │ │ ├── menu.png │ │ ├── menu@2x.png │ │ ├── menu@3x.png │ │ ├── more.png │ │ ├── more@2x.png │ │ ├── more@3x.png │ │ ├── notification.png │ │ ├── notification@2x.png │ │ ├── notification@3x.png │ │ ├── office.png │ │ ├── office@2x.png │ │ ├── office@3x.png │ │ ├── payment.png │ │ ├── payment@2x.png │ │ ├── payment@3x.png │ │ ├── profile.png │ │ ├── profile@2x.png │ │ ├── profile@3x.png │ │ ├── register.png │ │ ├── register@2x.png │ │ ├── register@3x.png │ │ ├── rental.png │ │ ├── rental@2x.png │ │ ├── rental@3x.png │ │ ├── search.png │ │ ├── search@2x.png │ │ ├── search@3x.png │ │ ├── settings.png │ │ ├── settings@2x.png │ │ ├── settings@3x.png │ │ ├── star.png │ │ ├── star@2x.png │ │ ├── star@3x.png │ │ ├── train.png │ │ ├── train@2x.png │ │ ├── train@3x.png │ │ ├── users.png │ │ ├── users@2x.png │ │ ├── users@3x.png │ │ ├── warning.png │ │ ├── warning@2x.png │ │ └── warning@3x.png │ └── images │ │ ├── android.png │ │ ├── avatar1.png │ │ ├── avatar1@2x.png │ │ ├── avatar1@3x.png │ │ ├── avatar2.png │ │ ├── avatar2@2x.png │ │ ├── avatar2@3x.png │ │ ├── background.png │ │ ├── background@2x.png │ │ ├── background@3x.png │ │ ├── card1.png │ │ ├── card1@2x.png │ │ ├── card1@3x.png │ │ ├── card2.png │ │ ├── card2@2x.png │ │ ├── card2@3x.png │ │ ├── card3.png │ │ ├── card3@2x.png │ │ ├── card3@3x.png │ │ ├── card4.png │ │ ├── card4@2x.png │ │ ├── card4@3x.png │ │ ├── card5.png │ │ ├── card5@2x.png │ │ ├── card5@3x.png │ │ ├── carousel1.png │ │ ├── carousel1@2x.png │ │ ├── carousel1@3x.png │ │ ├── gle.png │ │ ├── gle@2x.png │ │ ├── gle@3x.png │ │ ├── header.png │ │ ├── header@2x.png │ │ ├── header@3x.png │ │ ├── ios.png │ │ ├── logo.png │ │ ├── photo1.png │ │ ├── photo1@2x.png │ │ ├── photo1@3x.png │ │ ├── photo2.png │ │ ├── photo2@2x.png │ │ ├── photo2@3x.png │ │ ├── photo3.png │ │ ├── photo3@2x.png │ │ ├── photo3@3x.png │ │ ├── photo4.png │ │ ├── photo4@2x.png │ │ ├── photo4@3x.png │ │ ├── photo5.png │ │ ├── photo5@2x.png │ │ ├── photo5@3x.png │ │ ├── photo6.png │ │ ├── photo6@2x.png │ │ ├── photo6@3x.png │ │ ├── tesla.png │ │ ├── tesla@2x.png │ │ ├── tesla@3x.png │ │ ├── x5.png │ │ ├── x5@2x.png │ │ └── x5@3x.png ├── components │ ├── Article.tsx │ ├── Block.tsx │ ├── Button.tsx │ ├── Checkbox.tsx │ ├── Image.tsx │ ├── Input.tsx │ ├── Modal.tsx │ ├── Product.tsx │ ├── Switch.tsx │ ├── Text.tsx │ └── index.tsx ├── constants │ ├── index.ts │ ├── light.ts │ ├── mocks.ts │ ├── regex.ts │ ├── theme.ts │ ├── translations │ │ ├── en.json │ │ └── index.ts │ └── types │ │ ├── components.ts │ │ ├── index.ts │ │ └── theme.ts ├── hooks │ ├── index.ts │ ├── useData.tsx │ ├── useScreenOptions.tsx │ ├── useTheme.tsx │ └── useTranslation.tsx ├── navigation │ ├── App.tsx │ ├── Menu.tsx │ └── Screens.tsx └── screens │ ├── Articles.tsx │ ├── Components.tsx │ ├── Home.tsx │ ├── Pro.tsx │ ├── Profile.tsx │ ├── Register.tsx │ └── index.ts └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/soft-ui-react-native\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import 'react-native-gesture-handler'; 2 | import React from 'react'; 3 | 4 | import {DataProvider} from './src/hooks'; 5 | import AppNavigation from './src/navigation/App'; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.1.0] 2023 - 08 - 10 2 | - dependencies updated 3 | - expo version updated 4 | - react-native version updated 5 | - implement expo-splash-screen for splash loading 6 | 7 | ## [1.0.2] 2022-07-20 8 | 9 | ### Updated dependencies 10 | 11 | - Updated @react-native-async-storage/async-storage@1.15.0 to @react-native-async-storage/async-storage@1.17.3 12 | - Updated expo@^44.0.0 to expo@45.0.0 13 | - Updated expo-app-loading@~1.3.0 to expo-app-loading@2.0.0 14 | - Updated expo-blur@~11.0.0 to expo-blur@11.1.0 15 | - Updated expo-constants@~13.0.1 to expo-constants@13.1.1 16 | - Updated expo-haptics@~11.1.0 to expo-haptics@11.2.0 17 | - Updated expo-linear-gradient@~11.0.3 to expo-linear-gradient@11.3.0 18 | - Updated expo-localization@~12.0.0 to expo-localization@13.0.0 19 | - Updated expo-module-core@^0.2.0 to expo-module-core@0.9.2 20 | - Updated expo-status-bar@~1.2.0 to expo-status-bar@1.3.0 21 | - Updated react@17.0.1 to react@17.0.2 22 | - Updated react-dom@17.0.1 to react-dom@17.0.2 23 | - Updated react-native@0.64.3 to react@0.68.2 24 | - Updated react-native-gesture-handler@2.1.0 to react-native-gesture-handler@2.2.1 25 | - Updated react-native-pager-view@5.4.9 to react-native-pager-view@5.4.15 26 | - Updated react-native-reanimated@~2.3.1 to react-native-reanimated@2.8.0 27 | - Updated react-native-safe-area-context@3.3.2 to react-native-safe-area-context@4.2.4 28 | - Updated react-native-screens@~3.10.1 to react-native-screens@3.11.1 29 | - Updated react-native-web@~0.17.1 to react-native-web@0.17.1 30 | - Updated dev dependencies 31 | - Updated @types/react-native@0.64.12 to @types/react-native@0.67.6 32 | - Updated jest-expo@44.0.0 to jest-expo@45.0.0 33 | 34 | ## [1.0.1] 2022-05-17 35 | 36 | ### Dependencies Update 37 | 38 | - all dependencies update 39 | 40 | ## [1.0.0] 2021-07-07 41 | 42 | ### Initial Release 43 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Prerequisites 2 | 3 | Please answer the following questions for yourself before submitting an issue. 4 | 5 | - [ ] I am running the latest version 6 | - [ ] I checked the documentation and found no answer 7 | - [ ] I checked to make sure that this issue has not already been filed 8 | - [ ] I'm reporting the issue to the correct repository (for multi-repository projects) 9 | 10 | # Expected Behavior 11 | 12 | Please describe the behavior you are expecting 13 | 14 | # Current Behavior 15 | 16 | What is the current behavior? 17 | 18 | # Failure Information (for bugs) 19 | 20 | Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template. 21 | 22 | ## Steps to Reproduce 23 | 24 | Please provide detailed steps for reproducing the issue. 25 | 26 | 1. step 1 27 | 2. step 2 28 | 3. you get it... 29 | 30 | ## Context 31 | 32 | Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions. 33 | 34 | * Device: 35 | * Operating System: 36 | * Browser and Version: 37 | 38 | ## Failure Logs 39 | 40 | Please include any relevant log snippets or files here. 41 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Creative Tim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Soft UI React Native](https://demos.creative-tim.com/soft-ui-react-native/index.html) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/home?status=soft-ui%20React%20Native,%20a%20cool%20NowUI%20React%20Native%20App%20Template%20%E2%9D%A4%EF%B8%8F%20https%3A//bit.ly/2KAj86H%20%23reactnative%20%23NowUI%20%23designsystem%20%23developers%20via%20%40CreativeTim) 2 | 3 | 4 | ![version](https://img.shields.io/badge/version-1.1.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/ct-soft-ui-react-native.svg?style=flat)](https://github.com/creativetimofficial/ct-soft-ui-react-native/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/ct-soft-ui-react-native.svg?maxAge=2592000)](https://github.com/creativetimofficial/ct-soft-ui-react-native/issues?q=is%3Aissue+is%3Aclosed) 5 | 6 | 7 | ![Product](https://s3.amazonaws.com/creativetim_bucket/products/490/original/opt_soft_ui_react_native_thumbnail.jpg) 8 | 9 | Soft UI React Native is a fully coded app template built over [React Native](https://facebook.github.io/react-native/?ref=creativetim) and [Expo](https://expo.io/?ref=creativetim) to allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components in-house to make it look like Soft UI's KIT, minimalistic and easy to use. 10 | 11 | Start your development with a Design System for React Native inspired by Soft UI KIT. If you like Soft UI's KIT, you will love this react native app template! It features a huge number of components and screens built to fit together and look amazing. 12 | 13 | ### FULLY CODED COMPONENTS 14 | 15 | Soft UI React Native features over 100 variations of components like buttons, inputs, cards, navigations etc, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify inside our theme file. 16 | 17 | You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. We wanted the design process to be seamless, so switching from image to the real page is very easy to do. 18 | 19 | ### Components & Cards 20 | Soft UI React Native comes packed with a large number of components and cards. Putting together a mobile app has never been easier than matching together different components. From the profile screen to a settings screen, you can easily customise and build your screens. We have created multiple options for you to put together and customise into pixel perfect screens. 21 | 22 | View [all components here](https://demos.creative-tim.com/soft-ui-react-native/). 23 | 24 | ### Example Screens 25 | If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example screens. From onboarding screens to profile or discover screens, you will be able to quickly set up the basic structure for your React Native mobile project. 26 | 27 | View [all screens here](https://demos.creative-tim.com/soft-ui-react-native/#screens). 28 | 29 | 30 | Let us know your thoughts below. And good luck with development! 31 | 32 | 33 | ## Table of Contents 34 | 35 | * [Versions](#versions) 36 | * [Demo](#demo) 37 | * [Quick Start](#quick-start) 38 | * [Documentation](#documentation) 39 | * [File Structure](#file-structure) 40 | * [OS Support](#os-support) 41 | * [Resources](#resources) 42 | * [Reporting Issues](#reporting-issues) 43 | * [Technical Support or Questions](#technical-support-or-questions) 44 | * [Licensing](#licensing) 45 | * [Useful Links](#useful-links) 46 | 47 | ## Versions 48 | 49 | [](https://www.creative-tim.com/product/soft-ui-kit-pro)[](https://www.creative-tim.com/product/soft-ui-react-native) 50 | 51 | | HTML | React-Native | 52 | | --- | --- | 53 | | [![Soft UI Kit](https://s3.amazonaws.com/creativetim_bucket/products/448/original/opt_sds_free_thumbnail.jpg?1614876201)](https://www.creative-tim.com/product/soft-ui-design-system) | [![Soft UI React-Native](https://s3.amazonaws.com/creativetim_bucket/products/490/original/opt_soft_ui_react_native_thumbnail.jpg?1625576346)](https://www.creative-tim.com/product/soft-ui-react-native) | 54 | 55 | ## Demo 56 | - [Start page](https://demos.creative-tim.com/soft-ui-react-native) 57 | - [Quick start](https://www.creative-tim.com/learning-lab/react-native/quick-start/soft) 58 | 59 | [View more](https://demos.creative-tim.com/soft-ui-react-native) 60 | 61 | ## Quick start 62 | - Try it out on Expo (Simulator for iOS or even your physical device if you have an Android) 63 | - Download from [Creative Tim](https://www.creative-tim.com/product/soft-ui-react-native) 64 | 65 | 66 | ## Documentation 67 | The documentation for the Soft UI React Native is hosted at our [website](https://www.creative-tim.com/learning-lab/react-native/overview/soft). 68 | 69 | 70 | ## File Structure 71 | Within the download you'll find the following directories and files: 72 | 73 | ``` 74 | soft-ui-react-native/ 75 | ├── App.tsx 76 | ├── README.md 77 | ├── app.json 78 | ├── assets 79 | ├── babel.config.js 80 | ├── package.json 81 | ├── src 82 | │ ├── assets 83 | │ │ ├── fonts 84 | │ │ ├── icons 85 | │ │ └── images 86 | │ ├── components 87 | │ │ ├── Article.tsx 88 | │ │ ├── Block.tsx 89 | │ │ ├── Button.tsx 90 | │ │ ├── Checkbox.tsx 91 | │ │ ├── Image.tsx 92 | │ │ ├── Input.tsx 93 | │ │ ├── Modal.tsx 94 | │ │ ├── Product.tsx 95 | │ │ ├── Switch.tsx 96 | │ │ ├── Text.tsx 97 | │ │ └── index.tsx 98 | │ ├── constants 99 | │ │ ├── index.ts 100 | │ │ ├── light.ts 101 | │ │ ├── mocks.ts 102 | │ │ ├── regex.ts 103 | │ │ ├── theme.ts 104 | │ │ ├── translations 105 | │ │ │ ├── en.json 106 | │ │ │ └── index.ts 107 | │ │ └── types 108 | │ │ ├── components.ts 109 | │ │ ├── index.ts 110 | │ │ └── theme.ts 111 | │ ├── hooks 112 | │ │ ├── index.ts 113 | │ │ ├── useData.tsx 114 | │ │ ├── useScreenOptions.tsx 115 | │ │ ├── useTheme.tsx 116 | │ │ └── useTranslation.tsx 117 | │ ├── navigation 118 | │ │ ├── App.tsx 119 | │ │ ├── Menu.tsx 120 | │ │ └── Screens.tsx 121 | │ └── screens 122 | │ ├── Articles.tsx 123 | │ ├── Components.tsx 124 | │ ├── Home.tsx 125 | │ ├── Pro.tsx 126 | │ ├── Profile.tsx 127 | │ ├── Register.tsx 128 | │ └── index.ts 129 | └── tsconfig.json 130 | ``` 131 | 132 | 133 | ## OS Support 134 | 135 | At present, we officially aim to support the last two versions of the following operating systems: 136 | 137 | [](https://www.creative-tim.com/product/soft-ui-react-native)[](https://www.creative-tim.com/product/soft-ui-react-native) 138 | 139 | ## Resources 140 | - Demo: 141 | - Download Page: 142 | - Documentation: 143 | - License Agreement: 144 | - Support: 145 | - Issues: [Github Issues Page](https://github.com/creativetimofficial/ct-soft-ui-react-native/issues) 146 | - [Soft UI Design System](https://www.creative-tim.com/product/soft-ui-design-system?ref=soft-uiprn-readme) - For Front End Development 147 | 148 | ## Reporting Issues 149 | 150 | We use GitHub Issues as the official bug tracker for the Soft UI React Native. Here are some advices for our users that want to report an issue: 151 | 152 | 1. Make sure that you are using the latest version of the Soft UI React Native. 153 | 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 154 | 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. 155 | 156 | 157 | ### Technical Support or Questions 158 | 159 | If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us) instead of opening an issue. 160 | 161 | 162 | ## Licensing 163 | 164 | - Copyright 2021 Creative Tim (https://www.creative-tim.com/) 165 | - Creative Tim [license](https://www.creative-tim.com/license) 166 | 167 | ## Useful Links 168 | 169 | - [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) 170 | - [Affiliate Program](https://www.creative-tim.com/affiliates/new) (earn money) 171 | - [Blog Creative Tim](http://blog.creative-tim.com/) 172 | - [Free Products](https://www.creative-tim.com/bootstrap-themes/free) from Creative Tim 173 | - [Premium Products](https://www.creative-tim.com/bootstrap-themes/premium) from Creative Tim 174 | - [React Products](https://www.creative-tim.com/bootstrap-themes/react-themes) from Creative Tim 175 | - [Angular Products](https://www.creative-tim.com/bootstrap-themes/angular-themes) from Creative Tim 176 | - [VueJS Products](https://www.creative-tim.com/bootstrap-themes/vuejs-themes) from Creative Tim 177 | - [More products](https://www.creative-tim.com/bootstrap-themes) from Creative Tim 178 | - Check our Bundles [here](https://www.creative-tim.com/bundles?ref=soft-ui-github-readme) 179 | 180 | 181 | ### Social Media 182 | Twitter: 183 | Facebook: 184 | Dribbble: 185 | Instagram: 186 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "rn-soft-ui-kit-free", 4 | "slug": "rn-soft-ui-kit-free", 5 | "description": "React Native - Soft UI Kit - Free", 6 | "primaryColor": "#CB0C9F", 7 | "version": "1.0.0", 8 | "orientation": "portrait", 9 | "icon": "./assets/icon.png", 10 | "splash": { 11 | "image": "./assets/splash.png", 12 | "resizeMode": "cover", 13 | "backgroundColor": "#CB0C9F" 14 | }, 15 | "updates": { 16 | "fallbackToCacheTimeout": 0 17 | }, 18 | "assetBundlePatterns": [ 19 | "**/*" 20 | ], 21 | "ios": { 22 | "supportsTablet": true 23 | }, 24 | "android": { 25 | "adaptiveIcon": { 26 | "foregroundImage": "./assets/adaptive-icon.png", 27 | "backgroundColor": "#CB0C9F" 28 | } 29 | }, 30 | "web": { 31 | "favicon": "./assets/favicon.png" 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/assets/.DS_Store -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/assets/favicon.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/assets/icon.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/assets/logo.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: ['react-native-reanimated/plugin'], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject", 9 | "test": "jest", 10 | "lint": "eslint . --ext .ts,.tsx --quiet" 11 | }, 12 | "dependencies": { 13 | "@react-native-async-storage/async-storage": "1.17.11", 14 | "@react-native-masked-view/masked-view": "0.2.8", 15 | "@react-navigation/drawer": "5.12.5", 16 | "@react-navigation/native": "5.9.4", 17 | "@react-navigation/stack": "5.14.5", 18 | "dayjs": "1.10.5", 19 | "expo": "^48.0.16", 20 | "expo-blur": "~12.2.2", 21 | "expo-constants": "~14.2.1", 22 | "expo-haptics": "~12.2.1", 23 | "expo-linear-gradient": "~12.1.2", 24 | "expo-localization": "~14.1.1", 25 | "expo-modules-core": "~1.2.7", 26 | "expo-splash-screen": "^0.18.2", 27 | "expo-status-bar": "~1.4.4", 28 | "i18n-js": "3.8.0", 29 | "react": "18.2.0", 30 | "react-dom": "18.2.0", 31 | "react-native": "0.71.8", 32 | "react-native-gesture-handler": "~2.9.0", 33 | "react-native-keyboard-aware-scroll-view": "0.9.4", 34 | "react-native-pager-view": "6.1.2", 35 | "react-native-reanimated": "~2.14.4", 36 | "react-native-safe-area-context": "4.5.0", 37 | "react-native-screens": "~3.20.0", 38 | "react-native-web": "~0.18.10" 39 | }, 40 | "devDependencies": { 41 | "@babel/core": "^7.20.0", 42 | "@react-native-community/eslint-config": "2.0.0", 43 | "@types/i18n-js": "3.8.1", 44 | "@types/react": "~18.0.27", 45 | "@types/react-native": "0.67.6", 46 | "eslint": "7.28.0", 47 | "jest-expo": "45.0.0", 48 | "typescript": "^4.9.4" 49 | }, 50 | "private": true, 51 | "jest": { 52 | "preset": "jest-expo", 53 | "transformIgnorePatterns": [ 54 | "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)" 55 | ] 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/.DS_Store -------------------------------------------------------------------------------- /src/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/.DS_Store -------------------------------------------------------------------------------- /src/assets/fonts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/fonts/.DS_Store -------------------------------------------------------------------------------- /src/assets/fonts/OpenSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/fonts/OpenSans-Bold.ttf -------------------------------------------------------------------------------- /src/assets/fonts/OpenSans-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/fonts/OpenSans-ExtraBold.ttf -------------------------------------------------------------------------------- /src/assets/fonts/OpenSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/fonts/OpenSans-Light.ttf -------------------------------------------------------------------------------- /src/assets/fonts/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/fonts/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /src/assets/fonts/OpenSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/fonts/OpenSans-SemiBold.ttf -------------------------------------------------------------------------------- /src/assets/icons/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/apple.png -------------------------------------------------------------------------------- /src/assets/icons/apple@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/apple@2x.png -------------------------------------------------------------------------------- /src/assets/icons/apple@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/apple@3x.png -------------------------------------------------------------------------------- /src/assets/icons/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/arrow.png -------------------------------------------------------------------------------- /src/assets/icons/arrow@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/arrow@2x.png -------------------------------------------------------------------------------- /src/assets/icons/arrow@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/arrow@3x.png -------------------------------------------------------------------------------- /src/assets/icons/articles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/articles.png -------------------------------------------------------------------------------- /src/assets/icons/articles@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/articles@2x.png -------------------------------------------------------------------------------- /src/assets/icons/articles@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/articles@3x.png -------------------------------------------------------------------------------- /src/assets/icons/basket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/basket.png -------------------------------------------------------------------------------- /src/assets/icons/basket@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/basket@2x.png -------------------------------------------------------------------------------- /src/assets/icons/basket@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/basket@3x.png -------------------------------------------------------------------------------- /src/assets/icons/bell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/bell.png -------------------------------------------------------------------------------- /src/assets/icons/bell@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/bell@2x.png -------------------------------------------------------------------------------- /src/assets/icons/bell@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/bell@3x.png -------------------------------------------------------------------------------- /src/assets/icons/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/calendar.png -------------------------------------------------------------------------------- /src/assets/icons/calendar@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/calendar@2x.png -------------------------------------------------------------------------------- /src/assets/icons/calendar@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/calendar@3x.png -------------------------------------------------------------------------------- /src/assets/icons/chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/chat.png -------------------------------------------------------------------------------- /src/assets/icons/chat@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/chat@2x.png -------------------------------------------------------------------------------- /src/assets/icons/chat@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/chat@3x.png -------------------------------------------------------------------------------- /src/assets/icons/check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/check.png -------------------------------------------------------------------------------- /src/assets/icons/check@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/check@2x.png -------------------------------------------------------------------------------- /src/assets/icons/check@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/check@3x.png -------------------------------------------------------------------------------- /src/assets/icons/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/clock.png -------------------------------------------------------------------------------- /src/assets/icons/clock@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/clock@2x.png -------------------------------------------------------------------------------- /src/assets/icons/clock@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/clock@3x.png -------------------------------------------------------------------------------- /src/assets/icons/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/close.png -------------------------------------------------------------------------------- /src/assets/icons/close@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/close@2x.png -------------------------------------------------------------------------------- /src/assets/icons/close@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/close@3x.png -------------------------------------------------------------------------------- /src/assets/icons/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/components.png -------------------------------------------------------------------------------- /src/assets/icons/components@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/components@2x.png -------------------------------------------------------------------------------- /src/assets/icons/components@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/components@3x.png -------------------------------------------------------------------------------- /src/assets/icons/document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/document.png -------------------------------------------------------------------------------- /src/assets/icons/document@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/document@2x.png -------------------------------------------------------------------------------- /src/assets/icons/document@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/document@3x.png -------------------------------------------------------------------------------- /src/assets/icons/documentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/documentation.png -------------------------------------------------------------------------------- /src/assets/icons/documentation@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/documentation@2x.png -------------------------------------------------------------------------------- /src/assets/icons/documentation@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/documentation@3x.png -------------------------------------------------------------------------------- /src/assets/icons/extras.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/extras.png -------------------------------------------------------------------------------- /src/assets/icons/extras@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/extras@2x.png -------------------------------------------------------------------------------- /src/assets/icons/extras@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/extras@3x.png -------------------------------------------------------------------------------- /src/assets/icons/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/facebook.png -------------------------------------------------------------------------------- /src/assets/icons/facebook@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/facebook@2x.png -------------------------------------------------------------------------------- /src/assets/icons/facebook@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/facebook@3x.png -------------------------------------------------------------------------------- /src/assets/icons/flight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/flight.png -------------------------------------------------------------------------------- /src/assets/icons/flight@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/flight@2x.png -------------------------------------------------------------------------------- /src/assets/icons/flight@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/flight@3x.png -------------------------------------------------------------------------------- /src/assets/icons/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/google.png -------------------------------------------------------------------------------- /src/assets/icons/google@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/google@2x.png -------------------------------------------------------------------------------- /src/assets/icons/google@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/google@3x.png -------------------------------------------------------------------------------- /src/assets/icons/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/home.png -------------------------------------------------------------------------------- /src/assets/icons/home@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/home@2x.png -------------------------------------------------------------------------------- /src/assets/icons/home@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/home@3x.png -------------------------------------------------------------------------------- /src/assets/icons/hotel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/hotel.png -------------------------------------------------------------------------------- /src/assets/icons/hotel@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/hotel@2x.png -------------------------------------------------------------------------------- /src/assets/icons/hotel@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/hotel@3x.png -------------------------------------------------------------------------------- /src/assets/icons/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/image.png -------------------------------------------------------------------------------- /src/assets/icons/image@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/image@2x.png -------------------------------------------------------------------------------- /src/assets/icons/image@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/image@3x.png -------------------------------------------------------------------------------- /src/assets/icons/location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/location.png -------------------------------------------------------------------------------- /src/assets/icons/location@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/location@2x.png -------------------------------------------------------------------------------- /src/assets/icons/location@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/location@3x.png -------------------------------------------------------------------------------- /src/assets/icons/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/menu.png -------------------------------------------------------------------------------- /src/assets/icons/menu@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/menu@2x.png -------------------------------------------------------------------------------- /src/assets/icons/menu@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/menu@3x.png -------------------------------------------------------------------------------- /src/assets/icons/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/more.png -------------------------------------------------------------------------------- /src/assets/icons/more@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/more@2x.png -------------------------------------------------------------------------------- /src/assets/icons/more@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/more@3x.png -------------------------------------------------------------------------------- /src/assets/icons/notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/notification.png -------------------------------------------------------------------------------- /src/assets/icons/notification@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/notification@2x.png -------------------------------------------------------------------------------- /src/assets/icons/notification@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/notification@3x.png -------------------------------------------------------------------------------- /src/assets/icons/office.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/office.png -------------------------------------------------------------------------------- /src/assets/icons/office@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/office@2x.png -------------------------------------------------------------------------------- /src/assets/icons/office@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/office@3x.png -------------------------------------------------------------------------------- /src/assets/icons/payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/payment.png -------------------------------------------------------------------------------- /src/assets/icons/payment@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/payment@2x.png -------------------------------------------------------------------------------- /src/assets/icons/payment@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/payment@3x.png -------------------------------------------------------------------------------- /src/assets/icons/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/profile.png -------------------------------------------------------------------------------- /src/assets/icons/profile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/profile@2x.png -------------------------------------------------------------------------------- /src/assets/icons/profile@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/profile@3x.png -------------------------------------------------------------------------------- /src/assets/icons/register.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/register.png -------------------------------------------------------------------------------- /src/assets/icons/register@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/register@2x.png -------------------------------------------------------------------------------- /src/assets/icons/register@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/register@3x.png -------------------------------------------------------------------------------- /src/assets/icons/rental.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/rental.png -------------------------------------------------------------------------------- /src/assets/icons/rental@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/rental@2x.png -------------------------------------------------------------------------------- /src/assets/icons/rental@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/rental@3x.png -------------------------------------------------------------------------------- /src/assets/icons/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/search.png -------------------------------------------------------------------------------- /src/assets/icons/search@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/search@2x.png -------------------------------------------------------------------------------- /src/assets/icons/search@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/search@3x.png -------------------------------------------------------------------------------- /src/assets/icons/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/settings.png -------------------------------------------------------------------------------- /src/assets/icons/settings@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/settings@2x.png -------------------------------------------------------------------------------- /src/assets/icons/settings@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/settings@3x.png -------------------------------------------------------------------------------- /src/assets/icons/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/star.png -------------------------------------------------------------------------------- /src/assets/icons/star@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/star@2x.png -------------------------------------------------------------------------------- /src/assets/icons/star@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/star@3x.png -------------------------------------------------------------------------------- /src/assets/icons/train.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/train.png -------------------------------------------------------------------------------- /src/assets/icons/train@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/train@2x.png -------------------------------------------------------------------------------- /src/assets/icons/train@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/train@3x.png -------------------------------------------------------------------------------- /src/assets/icons/users.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/users.png -------------------------------------------------------------------------------- /src/assets/icons/users@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/users@2x.png -------------------------------------------------------------------------------- /src/assets/icons/users@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/users@3x.png -------------------------------------------------------------------------------- /src/assets/icons/warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/warning.png -------------------------------------------------------------------------------- /src/assets/icons/warning@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/warning@2x.png -------------------------------------------------------------------------------- /src/assets/icons/warning@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/icons/warning@3x.png -------------------------------------------------------------------------------- /src/assets/images/android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/android.png -------------------------------------------------------------------------------- /src/assets/images/avatar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/avatar1.png -------------------------------------------------------------------------------- /src/assets/images/avatar1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/avatar1@2x.png -------------------------------------------------------------------------------- /src/assets/images/avatar1@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/avatar1@3x.png -------------------------------------------------------------------------------- /src/assets/images/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/avatar2.png -------------------------------------------------------------------------------- /src/assets/images/avatar2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/avatar2@2x.png -------------------------------------------------------------------------------- /src/assets/images/avatar2@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/avatar2@3x.png -------------------------------------------------------------------------------- /src/assets/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/background.png -------------------------------------------------------------------------------- /src/assets/images/background@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/background@2x.png -------------------------------------------------------------------------------- /src/assets/images/background@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/background@3x.png -------------------------------------------------------------------------------- /src/assets/images/card1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card1.png -------------------------------------------------------------------------------- /src/assets/images/card1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card1@2x.png -------------------------------------------------------------------------------- /src/assets/images/card1@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card1@3x.png -------------------------------------------------------------------------------- /src/assets/images/card2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card2.png -------------------------------------------------------------------------------- /src/assets/images/card2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card2@2x.png -------------------------------------------------------------------------------- /src/assets/images/card2@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card2@3x.png -------------------------------------------------------------------------------- /src/assets/images/card3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card3.png -------------------------------------------------------------------------------- /src/assets/images/card3@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card3@2x.png -------------------------------------------------------------------------------- /src/assets/images/card3@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card3@3x.png -------------------------------------------------------------------------------- /src/assets/images/card4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card4.png -------------------------------------------------------------------------------- /src/assets/images/card4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card4@2x.png -------------------------------------------------------------------------------- /src/assets/images/card4@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card4@3x.png -------------------------------------------------------------------------------- /src/assets/images/card5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card5.png -------------------------------------------------------------------------------- /src/assets/images/card5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card5@2x.png -------------------------------------------------------------------------------- /src/assets/images/card5@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/card5@3x.png -------------------------------------------------------------------------------- /src/assets/images/carousel1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/carousel1.png -------------------------------------------------------------------------------- /src/assets/images/carousel1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/carousel1@2x.png -------------------------------------------------------------------------------- /src/assets/images/carousel1@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/carousel1@3x.png -------------------------------------------------------------------------------- /src/assets/images/gle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/gle.png -------------------------------------------------------------------------------- /src/assets/images/gle@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/gle@2x.png -------------------------------------------------------------------------------- /src/assets/images/gle@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/gle@3x.png -------------------------------------------------------------------------------- /src/assets/images/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/header.png -------------------------------------------------------------------------------- /src/assets/images/header@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/header@2x.png -------------------------------------------------------------------------------- /src/assets/images/header@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/header@3x.png -------------------------------------------------------------------------------- /src/assets/images/ios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/ios.png -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/assets/images/photo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo1.png -------------------------------------------------------------------------------- /src/assets/images/photo1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo1@2x.png -------------------------------------------------------------------------------- /src/assets/images/photo1@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo1@3x.png -------------------------------------------------------------------------------- /src/assets/images/photo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo2.png -------------------------------------------------------------------------------- /src/assets/images/photo2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo2@2x.png -------------------------------------------------------------------------------- /src/assets/images/photo2@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo2@3x.png -------------------------------------------------------------------------------- /src/assets/images/photo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo3.png -------------------------------------------------------------------------------- /src/assets/images/photo3@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo3@2x.png -------------------------------------------------------------------------------- /src/assets/images/photo3@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo3@3x.png -------------------------------------------------------------------------------- /src/assets/images/photo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo4.png -------------------------------------------------------------------------------- /src/assets/images/photo4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo4@2x.png -------------------------------------------------------------------------------- /src/assets/images/photo4@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo4@3x.png -------------------------------------------------------------------------------- /src/assets/images/photo5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo5.png -------------------------------------------------------------------------------- /src/assets/images/photo5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo5@2x.png -------------------------------------------------------------------------------- /src/assets/images/photo5@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo5@3x.png -------------------------------------------------------------------------------- /src/assets/images/photo6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo6.png -------------------------------------------------------------------------------- /src/assets/images/photo6@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo6@2x.png -------------------------------------------------------------------------------- /src/assets/images/photo6@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/photo6@3x.png -------------------------------------------------------------------------------- /src/assets/images/tesla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/tesla.png -------------------------------------------------------------------------------- /src/assets/images/tesla@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/tesla@2x.png -------------------------------------------------------------------------------- /src/assets/images/tesla@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/tesla@3x.png -------------------------------------------------------------------------------- /src/assets/images/x5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/x5.png -------------------------------------------------------------------------------- /src/assets/images/x5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/x5@2x.png -------------------------------------------------------------------------------- /src/assets/images/x5@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-react-native/fe8914a7a2da5bbe7b965093c77afc0566f915ac/src/assets/images/x5@3x.png -------------------------------------------------------------------------------- /src/components/Article.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import dayjs from 'dayjs'; 3 | import {TouchableWithoutFeedback} from 'react-native'; 4 | 5 | import Text from './Text'; 6 | import Block from './Block'; 7 | import Image from './Image'; 8 | import {useTheme, useTranslation} from '../hooks/'; 9 | import {IArticle} from '../constants/types'; 10 | 11 | const Article = ({ 12 | title, 13 | description, 14 | image, 15 | category, 16 | rating, 17 | location, 18 | timestamp, 19 | user, 20 | onPress, 21 | }: IArticle) => { 22 | const {t} = useTranslation(); 23 | const {colors, gradients, icons, sizes} = useTheme(); 24 | 25 | // render card for Newest & Fashion 26 | if (category?.id !== 1) { 27 | return ( 28 | 29 | 30 | 31 | {/* article category */} 32 | {category?.name && ( 33 | 41 | {category?.name} 42 | 43 | )} 44 | 45 | {/* article description */} 46 | {description && ( 47 | 52 | {description} 53 | 54 | )} 55 | 56 | {/* user details */} 57 | {user?.name && ( 58 | 59 | 66 | 67 | 68 | {user?.name} 69 | 70 | 71 | {t('common.posted', { 72 | date: dayjs(timestamp).format('DD MMMM') || '-', 73 | })} 74 | 75 | 76 | 77 | )} 78 | 79 | {/* location & rating */} 80 | {(Boolean(location) || Boolean(rating)) && ( 81 | 82 | 83 | 84 | {location?.city}, {location?.country} 85 | 86 | 87 | • 88 | 89 | 90 | 91 | {rating}/5 92 | 93 | 94 | )} 95 | 96 | 97 | ); 98 | } 99 | 100 | // render card for Popular 101 | return ( 102 | 103 | 104 | 109 | 110 | 111 | {title} 112 | 113 | 114 | {description} 115 | 116 | {/* user details */} 117 | 118 | 125 | 126 | 127 | {user?.name} 128 | 129 | 130 | {user?.department} 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | ); 139 | }; 140 | 141 | export default Article; 142 | -------------------------------------------------------------------------------- /src/components/Block.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Platform, 4 | SafeAreaView, 5 | ScrollView, 6 | StyleSheet, 7 | View, 8 | ViewStyle, 9 | } from 'react-native'; 10 | import {BlurView} from 'expo-blur'; 11 | import {LinearGradient} from 'expo-linear-gradient'; 12 | import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'; 13 | 14 | import useTheme from '../hooks/useTheme'; 15 | import {IBlockProps} from '../constants/types'; 16 | 17 | const Block = (props: IBlockProps) => { 18 | const { 19 | id = 'Block', 20 | children, 21 | style, 22 | shadow, 23 | card, 24 | center, 25 | outlined, 26 | overflow, 27 | row, 28 | safe, 29 | keyboard, 30 | scroll, 31 | color, 32 | gradient, 33 | primary, 34 | secondary, 35 | tertiary, 36 | black, 37 | white, 38 | gray, 39 | danger, 40 | warning, 41 | success, 42 | info, 43 | radius, 44 | height, 45 | width, 46 | margin, 47 | marginBottom, 48 | marginTop, 49 | marginHorizontal, 50 | marginVertical, 51 | marginRight, 52 | marginLeft, 53 | padding, 54 | paddingBottom, 55 | paddingTop, 56 | paddingHorizontal, 57 | paddingVertical, 58 | paddingRight, 59 | paddingLeft, 60 | justify, 61 | align, 62 | flex = 1, 63 | wrap, 64 | blur, 65 | intensity, 66 | tint, 67 | position, 68 | right, 69 | left, 70 | top, 71 | bottom, 72 | end, 73 | start, 74 | ...rest 75 | } = props; 76 | const {colors, sizes} = useTheme(); 77 | 78 | const colorIndex = primary 79 | ? 'primary' 80 | : secondary 81 | ? 'secondary' 82 | : tertiary 83 | ? 'tertiary' 84 | : black 85 | ? 'black' 86 | : white 87 | ? 'white' 88 | : gray 89 | ? 'gray' 90 | : danger 91 | ? 'danger' 92 | : warning 93 | ? 'warning' 94 | : success 95 | ? 'success' 96 | : info 97 | ? 'info' 98 | : null; 99 | 100 | const blockColor = color 101 | ? color 102 | : colorIndex 103 | ? colors?.[colorIndex] 104 | : undefined; 105 | 106 | const blockStyles = StyleSheet.flatten([ 107 | style, 108 | { 109 | ...(shadow && { 110 | shadowColor: colors.shadow, 111 | shadowOffset: { 112 | width: sizes.shadowOffsetWidth, 113 | height: sizes.shadowOffsetHeight, 114 | }, 115 | shadowOpacity: sizes.shadowOpacity, 116 | shadowRadius: sizes.shadowRadius, 117 | elevation: sizes.elevation, 118 | }), 119 | ...(card && { 120 | backgroundColor: colors.card, 121 | borderRadius: sizes.cardRadius, 122 | padding: sizes.cardPadding, 123 | shadowColor: colors.shadow, 124 | shadowOffset: { 125 | width: sizes.shadowOffsetWidth, 126 | height: sizes.shadowOffsetHeight, 127 | }, 128 | shadowOpacity: sizes.shadowOpacity, 129 | shadowRadius: sizes.shadowRadius, 130 | elevation: sizes.elevation, 131 | }), 132 | ...(margin !== undefined && {margin}), 133 | ...(marginBottom && {marginBottom}), 134 | ...(marginTop && {marginTop}), 135 | ...(marginHorizontal && {marginHorizontal}), 136 | ...(marginVertical && {marginVertical}), 137 | ...(marginRight && {marginRight}), 138 | ...(marginLeft && {marginLeft}), 139 | ...(padding !== undefined && {padding}), 140 | ...(paddingBottom && {paddingBottom}), 141 | ...(paddingTop && {paddingTop}), 142 | ...(paddingHorizontal && {paddingHorizontal}), 143 | ...(paddingVertical && {paddingVertical}), 144 | ...(paddingRight && {paddingRight}), 145 | ...(paddingLeft && {paddingLeft}), 146 | ...(radius && {borderRadius: radius}), 147 | ...(height && {height}), 148 | ...(width && {width}), 149 | ...(overflow && {overflow}), 150 | ...(flex !== undefined && {flex}), 151 | ...(row && {flexDirection: 'row'}), 152 | ...(align && {alignItems: align}), 153 | ...(center && {justifyContent: 'center'}), 154 | ...(justify && {justifyContent: justify}), 155 | ...(wrap && {flexWrap: wrap}), 156 | ...(blockColor && {backgroundColor: blockColor}), 157 | ...(outlined && { 158 | borderWidth: 1, 159 | borderColor: blockColor, 160 | backgroundColor: 'transparent', 161 | }), 162 | ...(position && {position}), 163 | ...(right !== undefined && {right}), 164 | ...(left !== undefined && {left}), 165 | ...(top !== undefined && {top}), 166 | ...(bottom !== undefined && {bottom}), 167 | }, 168 | ]) as ViewStyle; 169 | 170 | // generate component testID or accessibilityLabel based on Platform.OS 171 | const blockID = 172 | Platform.OS === 'android' ? {accessibilityLabel: id} : {testID: id}; 173 | 174 | if (safe) { 175 | return ( 176 | 177 | {children} 178 | 179 | ); 180 | } 181 | 182 | if (keyboard) { 183 | return ( 184 | 185 | {children} 186 | 187 | ); 188 | } 189 | 190 | if (scroll) { 191 | return ( 192 | 193 | {children} 194 | 195 | ); 196 | } 197 | 198 | if (gradient) { 199 | return ( 200 | 207 | {children} 208 | 209 | ); 210 | } 211 | 212 | if (blur) { 213 | return ( 214 | 219 | {children} 220 | 221 | ); 222 | } 223 | 224 | return ( 225 | 226 | {children} 227 | 228 | ); 229 | }; 230 | 231 | export default React.memo(Block); 232 | -------------------------------------------------------------------------------- /src/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback} from 'react'; 2 | import { 3 | ViewStyle, 4 | Vibration, 5 | StyleSheet, 6 | TouchableOpacity, 7 | Platform, 8 | } from 'react-native'; 9 | import {LinearGradient} from 'expo-linear-gradient'; 10 | import {Ionicons} from '@expo/vector-icons'; 11 | import * as Haptics from 'expo-haptics'; 12 | 13 | import useTheme from '../hooks/useTheme'; 14 | import {IButtonProps} from '../constants/types'; 15 | 16 | const Button = ({ 17 | id = 'Button', 18 | children, 19 | style, 20 | color, 21 | gradient, 22 | primary, 23 | secondary, 24 | tertiary, 25 | black, 26 | white, 27 | light, 28 | dark, 29 | gray, 30 | danger, 31 | warning, 32 | success, 33 | info, 34 | flex, 35 | radius, 36 | round, 37 | rounded, 38 | disabled, 39 | margin, 40 | marginBottom, 41 | marginTop, 42 | marginHorizontal, 43 | marginVertical, 44 | marginRight, 45 | marginLeft, 46 | padding, 47 | paddingBottom, 48 | paddingTop, 49 | paddingHorizontal, 50 | paddingVertical, 51 | paddingRight, 52 | paddingLeft, 53 | align, 54 | justify, 55 | height, 56 | width, 57 | row, 58 | outlined, 59 | social, 60 | activeOpacity = 0.7, 61 | shadow = true, 62 | position, 63 | right, 64 | left, 65 | top, 66 | bottom, 67 | haptic = true, 68 | vibrate, 69 | vibrateRepeat, 70 | onPress, 71 | ...props 72 | }: IButtonProps) => { 73 | const {colors, sizes} = useTheme(); 74 | const colorIndex = primary 75 | ? 'primary' 76 | : secondary 77 | ? 'secondary' 78 | : tertiary 79 | ? 'tertiary' 80 | : black 81 | ? 'black' 82 | : white 83 | ? 'white' 84 | : light 85 | ? 'light' 86 | : dark 87 | ? 'dark' 88 | : gray 89 | ? 'gray' 90 | : danger 91 | ? 'danger' 92 | : warning 93 | ? 'warning' 94 | : success 95 | ? 'success' 96 | : info 97 | ? 'info' 98 | : null; 99 | 100 | const buttonColor = color 101 | ? color 102 | : colorIndex 103 | ? colors?.[colorIndex] 104 | : 'transparent'; 105 | 106 | const buttonStyles = StyleSheet.flatten([ 107 | style, 108 | { 109 | minHeight: sizes.xl, 110 | minWidth: sizes.xl, 111 | alignItems: 'center', 112 | justifyContent: 'center', 113 | backgroundColor: buttonColor, 114 | borderRadius: rounded ? sizes.s : sizes.buttonRadius, 115 | ...(shadow && 116 | buttonColor !== 'transparent' && { 117 | shadowColor: colors.shadow, 118 | shadowOffset: { 119 | width: sizes.shadowOffsetWidth, 120 | height: sizes.shadowOffsetHeight, 121 | }, 122 | shadowOpacity: sizes.shadowOpacity, 123 | shadowRadius: sizes.shadowRadius, 124 | elevation: sizes.elevation, 125 | }), 126 | ...(row && {flexDirection: 'row'}), 127 | ...(radius && {borderRadius: radius}), 128 | ...(flex !== undefined && {flex}), 129 | ...(margin !== undefined && {margin}), 130 | ...(marginBottom && {marginBottom}), 131 | ...(marginTop && {marginTop}), 132 | ...(marginHorizontal && {marginHorizontal}), 133 | ...(marginVertical && {marginVertical}), 134 | ...(marginRight && {marginRight}), 135 | ...(marginLeft && {marginLeft}), 136 | ...(padding !== undefined && {padding}), 137 | ...(paddingBottom && {paddingBottom}), 138 | ...(paddingTop && {paddingTop}), 139 | ...(paddingHorizontal && {paddingHorizontal}), 140 | ...(paddingVertical && {paddingVertical}), 141 | ...(paddingRight && {paddingRight}), 142 | ...(paddingLeft && {paddingLeft}), 143 | ...(align && {alignItems: align}), 144 | ...(justify && {justifyContent: justify}), 145 | ...(height && {height}), 146 | ...(width && {width}), 147 | ...(typeof outlined === 'boolean' && { 148 | borderWidth: sizes.buttonBorder, 149 | borderColor: buttonColor, 150 | backgroundColor: 'transparent', 151 | }), 152 | ...(typeof outlined === 'string' && { 153 | borderWidth: sizes.buttonBorder, 154 | borderColor: outlined, 155 | }), 156 | ...(social && { 157 | backgroundColor: colors?.[social], 158 | width: sizes.socialSize, 159 | height: sizes.socialSize, 160 | borderRadius: sizes.socialRadius, 161 | }), 162 | ...(disabled && {opacity: 0.5}), 163 | ...(position && {position}), 164 | ...(right !== undefined && {right}), 165 | ...(left !== undefined && {left}), 166 | ...(top !== undefined && {top}), 167 | ...(bottom !== undefined && {bottom}), 168 | }, 169 | ]) as ViewStyle; 170 | 171 | /* handle onPress event */ 172 | const handlePress = useCallback( 173 | (event) => { 174 | onPress?.(event); 175 | 176 | /* vibrate onPress */ 177 | if (vibrate) { 178 | Vibration.vibrate(vibrate, vibrateRepeat); 179 | } 180 | 181 | /* haptic feedback onPress */ 182 | if (haptic) { 183 | Haptics.selectionAsync(); 184 | } 185 | }, 186 | [haptic, vibrate, vibrateRepeat, onPress], 187 | ); 188 | 189 | if (round) { 190 | const maxSize = Math.max( 191 | Number(buttonStyles.width || 0), 192 | Number(buttonStyles.minWidth || 0), 193 | Number(buttonStyles.maxWidth || 0), 194 | Number(buttonStyles.height || 0), 195 | Number(buttonStyles.minHeight || 0), 196 | Number(buttonStyles.maxHeight || 0), 197 | ); 198 | buttonStyles.maxWidth = maxSize; 199 | buttonStyles.maxHeight = maxSize; 200 | buttonStyles.borderRadius = maxSize / 2; 201 | } 202 | 203 | const gradientStyles = StyleSheet.flatten([ 204 | buttonStyles, 205 | { 206 | flex: 1, 207 | width: '100%', 208 | ...(round && {maxWidth: buttonStyles.maxWidth}), 209 | }, 210 | ]) as ViewStyle; 211 | 212 | // generate component testID or accessibilityLabel based on Platform.OS 213 | const buttonID = 214 | Platform.OS === 'android' ? {accessibilityLabel: id} : {testID: id}; 215 | 216 | if (gradient) { 217 | return ( 218 | 224 | 229 | {children} 230 | 231 | 232 | ); 233 | } 234 | 235 | if (social) { 236 | const socialIcon = 237 | social === 'facebook' 238 | ? 'logo-facebook' 239 | : social === 'twitter' 240 | ? 'logo-twitter' 241 | : 'logo-dribbble'; 242 | 243 | return ( 244 | 250 | 255 | 256 | ); 257 | } 258 | 259 | return ( 260 | 266 | {children} 267 | 268 | ); 269 | }; 270 | 271 | export default React.memo(Button); 272 | -------------------------------------------------------------------------------- /src/components/Checkbox.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useState} from 'react'; 2 | import {Platform, Pressable} from 'react-native'; 3 | 4 | import * as Haptics from 'expo-haptics'; 5 | 6 | import {useTheme} from '../hooks/'; 7 | import Block from '../components/Block'; 8 | import Image from '../components/Image'; 9 | import {ICheckboxProps} from '../constants/types'; 10 | 11 | const Checkbox = ({ 12 | onPress, 13 | haptic = true, 14 | id = 'Checkbox', 15 | ...props 16 | }: ICheckboxProps) => { 17 | const {colors, icons, sizes} = useTheme(); 18 | const [checked, setChecked] = useState(false); 19 | 20 | const handlePress = useCallback(() => { 21 | onPress?.(!checked); 22 | setChecked(!checked); 23 | 24 | /* haptic feedback onPress */ 25 | if (haptic) { 26 | Haptics.selectionAsync(); 27 | } 28 | }, [checked, haptic, setChecked, onPress]); 29 | 30 | // generate component testID or accessibilityLabel based on Platform.OS 31 | const checkboxID = 32 | Platform.OS === 'android' ? {accessibilityLabel: id} : {testID: id}; 33 | 34 | return ( 35 | 36 | 47 | {checked && ( 48 | 54 | )} 55 | 56 | 57 | ); 58 | }; 59 | 60 | export default React.memo(Checkbox); 61 | -------------------------------------------------------------------------------- /src/components/Image.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | StyleSheet, 4 | Image as RNImage, 5 | ImageStyle, 6 | ImageBackground, 7 | Platform, 8 | } from 'react-native'; 9 | import {IImageProps} from '../constants/types'; 10 | 11 | import useTheme from '../hooks/useTheme'; 12 | 13 | const Image = ({ 14 | id = 'Image', 15 | style, 16 | children, 17 | avatar, 18 | shadow, 19 | rounded, 20 | background, 21 | radius, 22 | color, 23 | height, 24 | width, 25 | transform, 26 | padding, 27 | paddingVertical, 28 | paddingHorizontal, 29 | paddingRight, 30 | paddingLeft, 31 | paddingTop, 32 | paddingBottom, 33 | margin, 34 | marginVertical, 35 | marginHorizontal, 36 | marginRight, 37 | marginLeft, 38 | marginTop, 39 | marginBottom, 40 | ...props 41 | }: IImageProps) => { 42 | const {colors, sizes} = useTheme(); 43 | 44 | const imageStyles = StyleSheet.flatten([ 45 | style, 46 | { 47 | borderRadius: sizes.imageRadius, 48 | ...(height && {height}), 49 | ...(width && {width}), 50 | ...(margin && {margin}), 51 | ...(marginBottom && {marginBottom}), 52 | ...(marginTop && {marginTop}), 53 | ...(marginHorizontal && {marginHorizontal}), 54 | ...(marginVertical && {marginVertical}), 55 | ...(marginRight && {marginRight}), 56 | ...(marginLeft && {marginLeft}), 57 | ...(padding && {padding}), 58 | ...(paddingBottom && {paddingBottom}), 59 | ...(paddingTop && {paddingTop}), 60 | ...(paddingHorizontal && {paddingHorizontal}), 61 | ...(paddingVertical && {paddingVertical}), 62 | ...(paddingRight && {paddingRight}), 63 | ...(paddingLeft && {paddingLeft}), 64 | ...(rounded && {borderRadius: sizes.radius, overflow: 'hidden'}), 65 | ...(radius !== undefined && {borderRadius: radius, overflow: 'hidden'}), 66 | ...(color && {tintColor: color}), 67 | ...(transform && {transform}), 68 | ...(shadow && { 69 | shadowColor: colors.shadow, 70 | shadowOffset: { 71 | width: sizes.shadowOffsetWidth, 72 | height: sizes.shadowOffsetHeight, 73 | }, 74 | shadowOpacity: sizes.shadowOpacity, 75 | shadowRadius: sizes.shadowRadius, 76 | }), 77 | ...(avatar && { 78 | height: sizes.avatarSize, 79 | width: sizes.avatarSize, 80 | borderRadius: sizes.avatarRadius, 81 | overflow: 'hidden', 82 | }), 83 | }, 84 | ]) as ImageStyle; 85 | 86 | // generate component testID or accessibilityLabel based on Platform.OS 87 | const imageID = 88 | Platform.OS === 'android' ? {accessibilityLabel: id} : {testID: id}; 89 | 90 | if (background) { 91 | return ( 92 | 93 | {children} 94 | 95 | ); 96 | } 97 | 98 | return ; 99 | }; 100 | 101 | export default Image; 102 | -------------------------------------------------------------------------------- /src/components/Input.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useState} from 'react'; 2 | import { 3 | Image, 4 | TextInput, 5 | TextStyle, 6 | ViewStyle, 7 | StyleSheet, 8 | Platform, 9 | } from 'react-native'; 10 | 11 | import Block from './Block'; 12 | import Text from './Text'; 13 | 14 | import useTheme from '../hooks/useTheme'; 15 | import {IInputProps} from '../constants/types'; 16 | 17 | const Input = ({ 18 | id = 'Input', 19 | style, 20 | color, 21 | primary, 22 | secondary, 23 | tertiary, 24 | black, 25 | white, 26 | gray, 27 | danger, 28 | warning, 29 | success, 30 | info, 31 | search, 32 | disabled, 33 | label, 34 | icon, 35 | marginBottom, 36 | marginTop, 37 | marginHorizontal, 38 | marginVertical, 39 | marginRight, 40 | marginLeft, 41 | onFocus, 42 | onBlur, 43 | ...props 44 | }: IInputProps) => { 45 | const {assets, colors, sizes} = useTheme(); 46 | const [isFocused, setFocused] = useState(false); 47 | 48 | const handleFocus = useCallback( 49 | (event, focus) => { 50 | setFocused(focus); 51 | focus && onFocus?.(event); 52 | !focus && onBlur?.(event); 53 | }, 54 | [setFocused, onFocus, onBlur], 55 | ); 56 | 57 | const colorIndex = primary 58 | ? 'primary' 59 | : secondary 60 | ? 'secondary' 61 | : tertiary 62 | ? 'tertiary' 63 | : black 64 | ? 'black' 65 | : white 66 | ? 'white' 67 | : gray 68 | ? 'gray' 69 | : danger 70 | ? 'danger' 71 | : warning 72 | ? 'warning' 73 | : success 74 | ? 'success' 75 | : info 76 | ? 'info' 77 | : null; 78 | const inputColor = color 79 | ? color 80 | : colorIndex 81 | ? colors?.[colorIndex] 82 | : colors.gray; 83 | 84 | const inputBoxStyles = StyleSheet.flatten([ 85 | style, 86 | { 87 | minHeight: sizes.inputHeight, 88 | ...(marginBottom && {marginBottom: marginBottom}), 89 | ...(marginTop && {marginTop: marginTop}), 90 | ...(marginHorizontal && {marginHorizontal: marginHorizontal}), 91 | ...(marginVertical && {marginVertical: marginVertical}), 92 | ...(marginRight && {marginRight: marginRight}), 93 | ...(marginLeft && {marginLeft: marginLeft}), 94 | }, 95 | ]) as ViewStyle; 96 | 97 | const inputContainerStyles = StyleSheet.flatten([ 98 | { 99 | minHeight: sizes.inputHeight, 100 | borderRadius: sizes.inputRadius, 101 | borderWidth: isFocused ? 2 : sizes.inputBorder, 102 | borderColor: isFocused ? colors.focus : inputColor, 103 | }, 104 | ]) as ViewStyle; 105 | 106 | const inputStyles = StyleSheet.flatten([ 107 | { 108 | flex: 1, 109 | zIndex: 2, 110 | height: '100%', 111 | fontSize: sizes.p, 112 | color: colors.input, 113 | paddingHorizontal: sizes.inputPadding, 114 | }, 115 | ]) as TextStyle; 116 | 117 | // generate component testID or accessibilityLabel based on Platform.OS 118 | const inputID = 119 | Platform.OS === 'android' ? {accessibilityLabel: id} : {testID: id}; 120 | 121 | return ( 122 | 123 | {label && ( 124 | 125 | {label} 126 | 127 | )} 128 | 129 | {search && assets.search && ( 130 | 134 | )} 135 | {icon && ( 136 | 140 | )} 141 | handleFocus(event, true)} 148 | onBlur={(event) => handleFocus(event, false)} 149 | /> 150 | {danger && assets.warning && ( 151 | 158 | )} 159 | {success && assets.check && ( 160 | 169 | )} 170 | 171 | 172 | ); 173 | }; 174 | 175 | export default React.memo(Input); 176 | -------------------------------------------------------------------------------- /src/components/Modal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, Modal as RNModal, ViewStyle, Platform} from 'react-native'; 3 | 4 | import {useTheme} from '../hooks/'; 5 | import {IModalProps} from '../constants/types'; 6 | 7 | import Block from './Block'; 8 | import Button from './Button'; 9 | import Image from './Image'; 10 | 11 | const Modal = ({ 12 | id = 'Modal', 13 | children, 14 | style, 15 | onRequestClose, 16 | ...props 17 | }: IModalProps) => { 18 | const {assets, colors, sizes} = useTheme(); 19 | const modalStyles = StyleSheet.flatten([style, {}]) as ViewStyle; 20 | 21 | // generate component testID or accessibilityLabel based on Platform.OS 22 | const modalID = 23 | Platform.OS === 'android' ? {accessibilityLabel: id} : {testID: id}; 24 | 25 | return ( 26 | 33 | 34 | 35 | 42 | 46 | {children} 47 | 48 | 49 | 50 | 51 | ); 52 | }; 53 | 54 | export default React.memo(Modal); 55 | -------------------------------------------------------------------------------- /src/components/Product.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {TouchableOpacity} from 'react-native'; 3 | 4 | import Block from './Block'; 5 | import Image from './Image'; 6 | import Text from './Text'; 7 | import {IProduct} from '../constants/types'; 8 | import {useTheme, useTranslation} from '../hooks/'; 9 | 10 | const Product = ({image, title, type, linkLabel}: IProduct) => { 11 | const {t} = useTranslation(); 12 | const {assets, colors, sizes} = useTheme(); 13 | 14 | const isHorizontal = type !== 'vertical'; 15 | const CARD_WIDTH = (sizes.width - sizes.padding * 2 - sizes.sm) / 2; 16 | 17 | return ( 18 | 24 | 32 | 37 | 38 | {title} 39 | 40 | 41 | 42 | 48 | {linkLabel || t('common.readArticle')} 49 | 50 | 51 | 52 | 53 | 54 | 55 | ); 56 | }; 57 | 58 | export default Product; 59 | -------------------------------------------------------------------------------- /src/components/Switch.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useEffect, useRef, useState} from 'react'; 2 | import { 3 | Animated, 4 | Pressable, 5 | Platform, 6 | ViewStyle, 7 | StyleSheet, 8 | } from 'react-native'; 9 | import * as Haptics from 'expo-haptics'; 10 | 11 | import {ISwitchProps} from '../constants/types'; 12 | import useTheme from '../hooks/useTheme'; 13 | 14 | const Switch = ({ 15 | id = 'Switch', 16 | checked = false, 17 | thumbColor = 'white', 18 | activeFillColor, 19 | inactiveFillColor, 20 | duration = 250, 21 | thumbStyle, 22 | switchStyle, 23 | style, 24 | onPress, 25 | haptic = true, 26 | ...props 27 | }: ISwitchProps) => { 28 | const [isChecked, setChecked] = useState(checked); 29 | const {colors, sizes} = useTheme(); 30 | const activeColor = activeFillColor || colors.switchOn; 31 | const inactiveColor = inactiveFillColor || colors.switchOff; 32 | 33 | const animation = useRef(new Animated.Value(isChecked ? 28 : 2)).current; 34 | 35 | const handleToggle = useCallback(() => { 36 | setChecked(!isChecked); 37 | onPress?.(!isChecked); 38 | 39 | /* haptic feedback onPress */ 40 | if (haptic) { 41 | Haptics.selectionAsync(); 42 | } 43 | }, [isChecked, haptic, setChecked, onPress]); 44 | 45 | useEffect(() => { 46 | Animated.timing(animation, { 47 | duration, 48 | useNativeDriver: false, 49 | toValue: isChecked ? 28 : 2, 50 | }).start(); 51 | }, [isChecked, animation, duration]); 52 | 53 | /* update local state for isChecked when checked prop is updated */ 54 | useEffect(() => { 55 | if (isChecked !== checked) { 56 | setChecked(checked); 57 | } 58 | }, [isChecked, checked]); 59 | 60 | const bgColor = animation.interpolate({ 61 | inputRange: [2, 28], 62 | outputRange: [String(inactiveColor), String(activeColor)], 63 | }); 64 | 65 | const switchStyles = StyleSheet.flatten([ 66 | { 67 | justifyContent: 'center', 68 | alignContent: 'center', 69 | backgroundColor: bgColor, 70 | height: sizes.switchHeight, 71 | }, 72 | switchStyle, 73 | ]) as ViewStyle; 74 | 75 | const thumbStyles = StyleSheet.flatten([ 76 | thumbStyle, 77 | { 78 | width: sizes.switchThumb, 79 | height: sizes.switchThumb, 80 | backgroundColor: thumbColor, 81 | shadowColor: colors.shadow, 82 | shadowOffset: { 83 | width: sizes.shadowOffsetWidth, 84 | height: sizes.shadowOffsetHeight, 85 | }, 86 | shadowOpacity: sizes.shadowOpacity, 87 | shadowRadius: sizes.shadowRadius, 88 | elevation: sizes.elevation, 89 | borderRadius: sizes.switchThumb / 2, 90 | transform: [{translateX: animation}], 91 | }, 92 | ]) as ViewStyle; 93 | 94 | const containerStyles = StyleSheet.flatten([ 95 | style, 96 | { 97 | overflow: 'hidden', 98 | width: sizes.switchWidth, 99 | height: sizes.switchHeight, 100 | borderRadius: sizes.switchHeight, 101 | }, 102 | ]) as ViewStyle; 103 | 104 | // generate component testID or accessibilityLabel based on Platform.OS 105 | const switchID = 106 | Platform.OS === 'android' ? {accessibilityLabel: id} : {testID: id}; 107 | 108 | return ( 109 | 115 | 116 | 117 | 118 | 119 | ); 120 | }; 121 | 122 | export default React.memo(Switch); 123 | -------------------------------------------------------------------------------- /src/components/Text.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Platform, StyleSheet, Text, TextStyle} from 'react-native'; 3 | import {LinearGradient} from 'expo-linear-gradient'; 4 | import MaskedView from '@react-native-masked-view/masked-view'; 5 | 6 | import useTheme from '../hooks/useTheme'; 7 | import {ITextProps} from '../constants/types'; 8 | 9 | const Typography = (props: ITextProps) => { 10 | const { 11 | id = 'Text', 12 | children, 13 | style, 14 | center, 15 | gradient, 16 | color, 17 | opacity, 18 | // predefined colors 19 | primary, 20 | secondary, 21 | tertiary, 22 | black, 23 | white, 24 | gray, 25 | danger, 26 | warning, 27 | success, 28 | info, 29 | size, 30 | bold, 31 | semibold, 32 | weight, 33 | h1, 34 | h2, 35 | h3, 36 | h4, 37 | h5, 38 | p, 39 | font, 40 | align, 41 | transform, 42 | lineHeight, 43 | position, 44 | right, 45 | left, 46 | top, 47 | bottom, 48 | start, 49 | end, 50 | marginBottom, 51 | marginTop, 52 | marginHorizontal, 53 | marginVertical, 54 | marginRight, 55 | marginLeft, 56 | paddingBottom, 57 | paddingTop, 58 | paddingHorizontal, 59 | paddingVertical, 60 | paddingRight, 61 | paddingLeft, 62 | ...rest 63 | } = props; 64 | const {colors, sizes, lines, weights, fonts} = useTheme(); 65 | 66 | const colorIndex = primary 67 | ? 'primary' 68 | : secondary 69 | ? 'secondary' 70 | : tertiary 71 | ? 'tertiary' 72 | : black 73 | ? 'black' 74 | : white 75 | ? 'white' 76 | : gray 77 | ? 'gray' 78 | : danger 79 | ? 'danger' 80 | : warning 81 | ? 'warning' 82 | : success 83 | ? 'success' 84 | : info 85 | ? 'info' 86 | : null; 87 | const textColor = color 88 | ? color 89 | : colorIndex 90 | ? colors?.[colorIndex] 91 | : undefined; 92 | 93 | const textStyles = StyleSheet.flatten([ 94 | style, 95 | { 96 | color: colors.text, 97 | fontSize: sizes.text, 98 | lineHeight: lines.text, 99 | fontWeight: weights.text, 100 | fontFamily: fonts.text, 101 | ...(textColor && {color: textColor}), 102 | ...(h1 && { 103 | fontSize: sizes.h1, 104 | lineHeight: lines.h1, 105 | fontWeight: weights.h1, 106 | fontFamily: fonts.h1, 107 | }), 108 | ...(h2 && { 109 | fontSize: sizes.h2, 110 | lineHeight: lines.h2, 111 | fontWeight: weights.h2, 112 | fontFamily: fonts.h2, 113 | }), 114 | ...(h3 && { 115 | fontSize: sizes.h3, 116 | lineHeight: lines.h3, 117 | fontWeight: weights.h3, 118 | fontFamily: fonts.h3, 119 | }), 120 | ...(h4 && { 121 | fontSize: sizes.h4, 122 | lineHeight: lines.h4, 123 | fontWeight: weights.h4, 124 | fontFamily: fonts.h4, 125 | }), 126 | ...(h5 && { 127 | fontSize: sizes.h5, 128 | lineHeight: lines.h5, 129 | fontWeight: weights.h5, 130 | fontFamily: fonts.h5, 131 | }), 132 | ...(p && { 133 | fontSize: sizes.p, 134 | lineHeight: lines.p, 135 | fontWeight: weights.p, 136 | fontFamily: fonts.p, 137 | }), 138 | ...(marginBottom && {marginBottom}), 139 | ...(marginTop && {marginTop}), 140 | ...(marginHorizontal && {marginHorizontal}), 141 | ...(marginVertical && {marginVertical}), 142 | ...(marginRight && {marginRight}), 143 | ...(marginLeft && {marginLeft}), 144 | ...(paddingBottom && {paddingBottom}), 145 | ...(paddingTop && {paddingTop}), 146 | ...(paddingHorizontal && {paddingHorizontal}), 147 | ...(paddingVertical && {paddingVertical}), 148 | ...(paddingRight && {paddingRight}), 149 | ...(paddingLeft && {paddingLeft}), 150 | ...(center && {textAlign: 'center'}), 151 | ...(align && {textAlign: align}), 152 | ...(bold && {fontFamily: fonts.bold}), 153 | ...(semibold && {fontFamily: fonts.semibold}), 154 | ...(weight && {fontWeight: weight}), 155 | ...(transform && {textTransform: transform}), 156 | ...(font && {fontFamily: font}), 157 | ...(size && {fontSize: size}), 158 | ...(color && {color}), 159 | ...(opacity && {opacity}), 160 | ...(lineHeight && {lineHeight}), 161 | ...(position && {position}), 162 | ...(right !== undefined && {right}), 163 | ...(left !== undefined && {left}), 164 | ...(top !== undefined && {top}), 165 | ...(bottom !== undefined && {bottom}), 166 | }, 167 | ]) as TextStyle; 168 | 169 | /* 170 | * Calculate gradient height container based on text lineHeight or fontSize 171 | * add an extra value from marginVertical or marginTop or marginBottom 172 | */ 173 | const gradientHeight = 174 | Number(textStyles?.lineHeight || textStyles?.fontSize || 0) + 175 | Number( 176 | textStyles?.marginVertical || 177 | textStyles?.marginTop || 178 | textStyles?.marginBottom || 179 | 0, 180 | ); 181 | 182 | // generate component testID or accessibilityLabel based on Platform.OS 183 | const textID = 184 | Platform.OS === 'android' ? {accessibilityLabel: id} : {testID: id}; 185 | 186 | if (gradient) { 187 | return ( 188 | 191 | {children} 192 | 193 | }> 194 | 200 | 201 | ); 202 | } 203 | 204 | return ( 205 | 206 | {children} 207 | 208 | ); 209 | }; 210 | 211 | export default React.memo(Typography); 212 | -------------------------------------------------------------------------------- /src/components/index.tsx: -------------------------------------------------------------------------------- 1 | import Block from './Block'; 2 | import Button from './Button'; 3 | import Input from './Input'; 4 | import Text from './Text'; 5 | import Modal from './Modal'; 6 | import Switch from './Switch'; 7 | import Checkbox from './Checkbox'; 8 | import Image from './Image'; 9 | import Article from './Article'; 10 | import Product from './Product'; 11 | 12 | export { 13 | Block, 14 | Button, 15 | Input, 16 | Text, 17 | Switch, 18 | Checkbox, 19 | Image, 20 | Article, 21 | Product, 22 | Modal, 23 | }; 24 | -------------------------------------------------------------------------------- /src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export {default as mocks} from './mocks'; 2 | export {THEME as light} from './light'; 3 | -------------------------------------------------------------------------------- /src/constants/light.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ITheme, 3 | ThemeColors, 4 | ThemeGradients, 5 | ThemeSizes, 6 | ThemeSpacing, 7 | } from './types'; 8 | 9 | import {THEME as commonTheme} from './theme'; 10 | 11 | export const COLORS: ThemeColors = { 12 | // default text color 13 | text: '#252F40', 14 | 15 | // base colors 16 | /** UI color for #primary */ 17 | primary: '#CB0C9F', 18 | /** UI color for #secondary */ 19 | secondary: '#627594', // '#8392AB', 20 | /** UI color for #tertiary */ 21 | tertiary: '#E8AE4C', 22 | 23 | // non-colors 24 | black: '#252F40', 25 | white: '#FFFFFF', 26 | 27 | dark: '#252F40', 28 | light: '#E9ECEF', 29 | 30 | // gray variations 31 | /** UI color for #gray */ 32 | gray: '#A7A8AE', 33 | 34 | // colors variations 35 | /** UI color for #danger */ 36 | danger: '#EA0606', 37 | /** UI color for #warning */ 38 | warning: '#FFC107', 39 | /** UI color for #success */ 40 | success: '#82D616', 41 | /** UI color for #info */ 42 | info: '#17C1E8', 43 | 44 | /** UI colors for navigation & card */ 45 | card: '#FFFFFF', 46 | background: '#E9ECEF', 47 | 48 | /** UI color for shadowColor */ 49 | shadow: '#000000', 50 | overlay: 'rgba(0,0,0,0.3)', 51 | 52 | /** UI color for input borderColor on focus */ 53 | focus: '#E293D3', 54 | input: '#252F40', 55 | 56 | /** UI color for switch checked/active color */ 57 | switchOn: '#3A416F', 58 | switchOff: '#E9ECEF', 59 | 60 | /** UI color for checkbox icon checked/active color */ 61 | checkbox: ['#3A416F', '#141727'], 62 | checkboxIcon: '#FFFFFF', 63 | 64 | /** social colors */ 65 | facebook: '#3B5998', 66 | twitter: '#55ACEE', 67 | dribbble: '#EA4C89', 68 | 69 | /** icon tint color */ 70 | icon: '#8392AB', 71 | 72 | /** blur tint color */ 73 | blurTint: 'light', 74 | 75 | /** product link color */ 76 | link: '#CB0C9F', 77 | }; 78 | 79 | export const GRADIENTS: ThemeGradients = { 80 | primary: ['#FF0080', '#7928CA'], 81 | secondary: ['#A8B8D8', '#627594'], 82 | info: ['#21D4FD', '#2152FF'], 83 | success: ['#98EC2D', '#17AD37'], 84 | warning: ['#FBCF33', '#F53939'], 85 | danger: ['#FF667C', '#EA0606'], 86 | 87 | light: ['#EBEFF4', '#CED4DA'], 88 | dark: ['#3A416F', '#141727'], 89 | 90 | white: [String(COLORS.white), '#EBEFF4'], 91 | black: [String(COLORS.black), '#141727'], 92 | 93 | divider: ['rgba(255,255,255,0.3)', 'rgba(102, 116, 142, 0.6)'], 94 | menu: [ 95 | 'rgba(255, 255, 255, 0.2)', 96 | 'rgba(112, 125, 149, 0.5)', 97 | 'rgba(255, 255, 255, 0.2)', 98 | ], 99 | }; 100 | 101 | export const SIZES: ThemeSizes = { 102 | // global sizes 103 | base: 8, 104 | text: 14, 105 | radius: 4, 106 | padding: 20, 107 | 108 | // font sizes 109 | h1: 44, 110 | h2: 40, 111 | h3: 32, 112 | h4: 24, 113 | h5: 18, 114 | p: 16, 115 | 116 | // button sizes 117 | buttonBorder: 1, 118 | buttonRadius: 8, 119 | socialSize: 64, 120 | socialRadius: 16, 121 | socialIconSize: 26, 122 | 123 | // button shadow 124 | shadowOffsetWidth: 0, 125 | shadowOffsetHeight: 7, 126 | shadowOpacity: 0.07, 127 | shadowRadius: 4, 128 | elevation: 2, 129 | 130 | // input sizes 131 | inputHeight: 46, 132 | inputBorder: 1, 133 | inputRadius: 8, 134 | inputPadding: 12, 135 | 136 | // card sizes 137 | cardRadius: 16, 138 | cardPadding: 10, 139 | 140 | // image sizes 141 | imageRadius: 14, 142 | avatarSize: 32, 143 | avatarRadius: 8, 144 | 145 | // switch sizes 146 | switchWidth: 50, 147 | switchHeight: 24, 148 | switchThumb: 20, 149 | 150 | // checkbox sizes 151 | checkboxWidth: 18, 152 | checkboxHeight: 18, 153 | checkboxRadius: 5, 154 | checkboxIconWidth: 10, 155 | checkboxIconHeight: 8, 156 | 157 | // product link size 158 | linkSize: 12, 159 | 160 | /** font size multiplier: for maxFontSizeMultiplier prop */ 161 | multiplier: 2, 162 | }; 163 | 164 | export const SPACING: ThemeSpacing = { 165 | /** xs: 4px */ 166 | xs: SIZES.base * 0.5, 167 | /** s: 8px */ 168 | s: SIZES.base * 1, 169 | /** sm: 16px */ 170 | sm: SIZES.base * 2, 171 | /** m: 24px */ 172 | m: SIZES.base * 3, 173 | /** md: 32px */ 174 | md: SIZES.base * 4, 175 | /** l: 40px */ 176 | l: SIZES.base * 5, 177 | /** xl: 48px */ 178 | xl: SIZES.base * 6, 179 | /** xxl: 56px */ 180 | xxl: SIZES.base * 7, 181 | }; 182 | 183 | export const THEME: ITheme = { 184 | ...commonTheme, 185 | colors: COLORS, 186 | gradients: GRADIENTS, 187 | sizes: {...SIZES, ...commonTheme.sizes, ...SPACING}, 188 | }; 189 | -------------------------------------------------------------------------------- /src/constants/regex.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * name validation 3 | * accepted: letters & spaces, minimum 3 chars, maximum 15 chars 4 | */ 5 | export const name: RegExp = /[a-zA-Z\ ]{3,15}/; 6 | 7 | /* 8 | * email validation 9 | */ 10 | export const email: RegExp = /^[^\s@]+@[^\s@]+\.([^\s@]{2,})+$/; 11 | 12 | /* 13 | * password validation, should contain: 14 | * (?=.*\d): at least one digit 15 | * (?=.*[a-z]): at least one lower case 16 | * (?=.*[A-Z]): at least one uppercase case 17 | * [0-9a-zA-Z]{6,}: at least 6 from the mentioned characters 18 | */ 19 | export const password: RegExp = 20 | /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{6,}$/; 21 | -------------------------------------------------------------------------------- /src/constants/theme.ts: -------------------------------------------------------------------------------- 1 | import {Dimensions, Platform} from 'react-native'; 2 | import { 3 | ICommonTheme, 4 | ThemeAssets, 5 | ThemeFonts, 6 | ThemeIcons, 7 | ThemeLineHeights, 8 | ThemeWeights, 9 | } from './types'; 10 | 11 | const {width, height} = Dimensions.get('window'); 12 | 13 | // Naming source: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping 14 | export const WEIGHTS: ThemeWeights = { 15 | text: 'normal', 16 | h1: Platform.OS === 'ios' ? '700' : 'normal', 17 | h2: Platform.OS === 'ios' ? '700' : 'normal', 18 | h3: Platform.OS === 'ios' ? '700' : 'normal', 19 | h4: Platform.OS === 'ios' ? '700' : 'normal', 20 | h5: Platform.OS === 'ios' ? '600' : 'normal', 21 | p: 'normal', 22 | 23 | thin: Platform.OS === 'ios' ? '100' : 'normal', 24 | extralight: Platform.OS === 'ios' ? '200' : 'normal', 25 | light: Platform.OS === 'ios' ? '300' : 'normal', 26 | normal: Platform.OS === 'ios' ? '400' : 'normal', 27 | medium: Platform.OS === 'ios' ? '500' : 'normal', 28 | semibold: Platform.OS === 'ios' ? '600' : 'normal', 29 | bold: Platform.OS === 'ios' ? '700' : 'normal', 30 | extrabold: Platform.OS === 'ios' ? '800' : 'normal', 31 | black: Platform.OS === 'ios' ? '900' : 'normal', 32 | }; 33 | 34 | export const ICONS: ThemeIcons = { 35 | apple: require('../assets/icons/apple.png'), 36 | google: require('../assets/icons/google.png'), 37 | facebook: require('../assets/icons/facebook.png'), 38 | arrow: require('../assets/icons/arrow.png'), 39 | articles: require('../assets/icons/articles.png'), 40 | basket: require('../assets/icons/basket.png'), 41 | bell: require('../assets/icons/bell.png'), 42 | calendar: require('../assets/icons/calendar.png'), 43 | chat: require('../assets/icons/chat.png'), 44 | check: require('../assets/icons/check.png'), 45 | clock: require('../assets/icons/clock.png'), 46 | close: require('../assets/icons/close.png'), 47 | components: require('../assets/icons/components.png'), 48 | document: require('../assets/icons/document.png'), 49 | documentation: require('../assets/icons/documentation.png'), 50 | extras: require('../assets/icons/extras.png'), 51 | flight: require('../assets/icons/flight.png'), 52 | home: require('../assets/icons/home.png'), 53 | hotel: require('../assets/icons/hotel.png'), 54 | image: require('../assets/icons/image.png'), 55 | location: require('../assets/icons/location.png'), 56 | menu: require('../assets/icons/menu.png'), 57 | more: require('../assets/icons/more.png'), 58 | notification: require('../assets/icons/notification.png'), 59 | office: require('../assets/icons/office.png'), 60 | payment: require('../assets/icons/payment.png'), 61 | profile: require('../assets/icons/profile.png'), 62 | register: require('../assets/icons/register.png'), 63 | rental: require('../assets/icons/rental.png'), 64 | search: require('../assets/icons/search.png'), 65 | settings: require('../assets/icons/settings.png'), 66 | star: require('../assets/icons/star.png'), 67 | train: require('../assets/icons/train.png'), 68 | users: require('../assets/icons/users.png'), 69 | warning: require('../assets/icons/warning.png'), 70 | }; 71 | 72 | export const ASSETS: ThemeAssets = { 73 | // fonts 74 | OpenSansLight: require('../assets/fonts/OpenSans-Light.ttf'), 75 | OpenSansRegular: require('../assets/fonts/OpenSans-Regular.ttf'), 76 | OpenSansSemiBold: require('../assets/fonts/OpenSans-SemiBold.ttf'), 77 | OpenSansExtraBold: require('../assets/fonts/OpenSans-ExtraBold.ttf'), 78 | OpenSansBold: require('../assets/fonts/OpenSans-Bold.ttf'), 79 | 80 | // backgrounds/logo 81 | logo: require('../assets/images/logo.png'), 82 | header: require('../assets/images/header.png'), 83 | background: require('../assets/images/background.png'), 84 | ios: require('../assets/images/ios.png'), 85 | android: require('../assets/images/android.png'), 86 | 87 | // cards 88 | card1: require('../assets/images/card1.png'), 89 | card2: require('../assets/images/card2.png'), 90 | card3: require('../assets/images/card3.png'), 91 | card4: require('../assets/images/card4.png'), 92 | card5: require('../assets/images/card5.png'), 93 | 94 | // gallery photos 95 | photo1: require('../assets/images/photo1.png'), 96 | photo2: require('../assets/images/photo2.png'), 97 | photo3: require('../assets/images/photo3.png'), 98 | photo4: require('../assets/images/photo4.png'), 99 | photo5: require('../assets/images/photo5.png'), 100 | photo6: require('../assets/images/photo6.png'), 101 | carousel1: require('../assets/images/carousel1.png'), 102 | 103 | // avatars 104 | avatar1: require('../assets/images/avatar1.png'), 105 | avatar2: require('../assets/images/avatar2.png'), 106 | 107 | // cars 108 | x5: require('../assets/images/x5.png'), 109 | gle: require('../assets/images/gle.png'), 110 | tesla: require('../assets/images/tesla.png'), 111 | }; 112 | 113 | export const FONTS: ThemeFonts = { 114 | // based on font size 115 | text: 'OpenSans-Regular', 116 | h1: 'OpenSans-Bold', 117 | h2: 'OpenSans-Bold', 118 | h3: 'OpenSans-Bold', 119 | h4: 'OpenSans-Bold', 120 | h5: 'OpenSans-SemiBold', 121 | p: 'OpenSans-Regular', 122 | 123 | // based on fontWeight 124 | thin: 'OpenSans-Light', 125 | extralight: 'OpenSans-Light', 126 | light: 'OpenSans-Light', 127 | normal: 'OpenSans-Regular', 128 | medium: 'OpenSans-SemiBold', 129 | semibold: 'OpenSans-SemiBold', 130 | bold: 'OpenSans-Bold', 131 | extrabold: 'OpenSans-ExtraBold', 132 | black: 'OpenSans-ExtraBold', 133 | }; 134 | 135 | export const LINE_HEIGHTS: ThemeLineHeights = { 136 | // font lineHeight 137 | text: 22, 138 | h1: 60, 139 | h2: 55, 140 | h3: 43, 141 | h4: 33, 142 | h5: 24, 143 | p: 22, 144 | }; 145 | 146 | export const THEME: ICommonTheme = { 147 | icons: ICONS, 148 | assets: {...ICONS, ...ASSETS}, 149 | fonts: FONTS, 150 | weights: WEIGHTS, 151 | lines: LINE_HEIGHTS, 152 | sizes: {width, height}, 153 | }; 154 | -------------------------------------------------------------------------------- /src/constants/translations/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "common": { 3 | "appDetails": "App Details", 4 | "appName": "App name", 5 | "appVersion": "App version", 6 | "buildVersion": "Build version", 7 | "expoVersion": "Expo version", 8 | "about": "About", 9 | "visit": "Visit", 10 | "posted": "Posted on {{date}}", 11 | "recommended": "Recommended for you", 12 | "viewall": "View All", 13 | "more": "More", 14 | "follow": "Follow", 15 | "followed": "Followed", 16 | "search": "Search", 17 | "night": "night", 18 | "day": "day", 19 | "booknow": "Book Now", 20 | "selectDate": "Select date", 21 | "checkInOut": "Check-In & Check-Out", 22 | "adults": "Adults", 23 | "roomType": "Room Type", 24 | "luxury": "Luxury", 25 | "message": "Enter your message", 26 | "album": "Album", 27 | "or": "or", 28 | "name": "Name", 29 | "namePlaceholder": "Enter your full name", 30 | "email": "Email", 31 | "emailPlaceholder": "Enter your email address", 32 | "password": "Password", 33 | "passwordPlaceholder": "Enter a password", 34 | "agree": "I agree with the ", 35 | "terms": "Terms and Conditions", 36 | "signup": "Sign Up", 37 | "signin": "Sign In", 38 | "goBack": "Go back", 39 | "inStock": "In stock", 40 | "outStock": "Out of stock", 41 | "addToCart": "Add to cart", 42 | "checkout": "Proceed to checkout", 43 | "readArticle": "Read Article", 44 | "send": "Send", 45 | "guests": { 46 | "one": "1 guest", 47 | "other": "{{count}} guests", 48 | "zero": "0 Guests" 49 | } 50 | }, 51 | "app": { 52 | "name": "Soft UI", 53 | "fullname": "Soft UI Kit", 54 | "native": "React Native", 55 | "link": "creative-tim.com" 56 | }, 57 | "darkMode": "Dark Mode", 58 | "screens": { 59 | "home": "Home", 60 | "components": "Components", 61 | "articles": "Articles", 62 | "rental": "Rental", 63 | "profile": "Profile", 64 | "settings": "Settings", 65 | "register": "Create account", 66 | "extra": "Extra - Automotive" 67 | }, 68 | "navigation": { 69 | "home": "Soft UI", 70 | "components": "Components", 71 | "articles": "Soft UI", 72 | "rentals": "Soft UI", 73 | "rental": "Best Deal", 74 | "booking": "Booking", 75 | "chat": "Chat", 76 | "profile": "Profile", 77 | "settings": "Settings", 78 | "notifications": "Notifications", 79 | "agreement": "User Agreement", 80 | "about": "About", 81 | "privacy": "Privacy", 82 | "register": "Register", 83 | "login": "Login", 84 | "extra": "Automotive", 85 | "shopping": "Shopping Cart" 86 | }, 87 | "menu": { 88 | "started": "Getting Started", 89 | "documentation": "Documentation" 90 | }, 91 | "home": { 92 | "title": "Soft UI", 93 | "following": "Following", 94 | "trending": "Trending" 95 | }, 96 | "register": { 97 | "title": "Welcome", 98 | "subtitle": "Register with" 99 | }, 100 | "profile": { 101 | "title": "Profile", 102 | "posts": "Posts", 103 | "followers": "Followers", 104 | "following": "Following", 105 | "aboutMe": "About me" 106 | }, 107 | "pro": { 108 | "title": "Soft UI PRO", 109 | "alert": "This feature is available in PRO version", 110 | "components": "• {{count} Components (Buttons, Inputs, Cards, etc)", 111 | "screens": "• {{count} Screens (Shopping, Notifications, Chat, etc)", 112 | "support": "• Premium Support included", 113 | "takeAdvantage": "Take advantage of all the features and screens coded on React Native for both", 114 | "appTemplate": "Soft UI PRO React Native is an innovative app template that will help you built stunning mobile applications in no time. It features a huge number of components and screens built to fit together and look amazing:", 115 | "saveTime": "This modern app template will save you a lot of time going from prototyping to full-functional code, because all elements are implemented. We wanted the design process to be seamless, so switching from image to the real page is very easy to do!", 116 | "buyNow": "Buy now" 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/constants/translations/index.ts: -------------------------------------------------------------------------------- 1 | import * as en from './en.json'; 2 | 3 | export default { 4 | en, 5 | }; 6 | -------------------------------------------------------------------------------- /src/constants/types/index.ts: -------------------------------------------------------------------------------- 1 | import i18n from 'i18n-js'; 2 | import {ImageSourcePropType} from 'react-native'; 3 | import {ITheme} from './theme'; 4 | 5 | export * from './components'; 6 | export * from './theme'; 7 | 8 | export interface IUser { 9 | id: number | string; 10 | name?: string; 11 | department?: string; 12 | avatar?: string; 13 | stats?: {posts?: number; followers?: number; following?: number}; 14 | social?: {twitter?: string; dribbble?: string}; 15 | about?: string; 16 | } 17 | 18 | export interface ICategory { 19 | id?: number; 20 | name?: string; 21 | } 22 | export interface IArticleOptions { 23 | id?: number; 24 | title?: string; 25 | description?: string; 26 | type?: 'room' | 'apartment' | 'house'; // private room | entire apartment | entire house 27 | sleeping?: {total?: number; type?: 'sofa' | 'bed'}; 28 | guests?: number; 29 | price?: number; 30 | user?: IUser; 31 | image?: string; 32 | } 33 | export interface IArticle { 34 | id?: number; 35 | title?: string; 36 | description?: string; 37 | category?: ICategory; 38 | image?: string; 39 | location?: ILocation; 40 | rating?: number; 41 | user?: IUser; 42 | offers?: IProduct[]; 43 | options?: IArticleOptions[]; 44 | timestamp?: number; 45 | onPress?: (event?: any) => void; 46 | } 47 | 48 | export interface IProduct { 49 | id?: number; 50 | title?: string; 51 | description?: string; 52 | image?: string; 53 | timestamp?: number; 54 | linkLabel?: string; 55 | type: 'vertical' | 'horizontal'; 56 | } 57 | export interface ILocation { 58 | id?: number; 59 | city?: string; 60 | country?: string; 61 | } 62 | export interface IUseData { 63 | isDark: boolean; 64 | handleIsDark: (isDark?: boolean) => void; 65 | theme: ITheme; 66 | setTheme: (theme?: ITheme) => void; 67 | user: IUser; 68 | users: IUser[]; 69 | handleUser: (data?: IUser) => void; 70 | handleUsers: (data?: IUser[]) => void; 71 | basket: IBasket; 72 | handleBasket: (data?: IBasket) => void; 73 | following: IProduct[]; 74 | setFollowing: (data?: IProduct[]) => void; 75 | trending: IProduct[]; 76 | setTrending: (data?: IProduct[]) => void; 77 | categories: ICategory[]; 78 | setCategories: (data?: ICategory[]) => void; 79 | recommendations: IArticle[]; 80 | setRecommendations: (data?: IArticle[]) => void; 81 | articles: IArticle[]; 82 | setArticles: (data?: IArticle[]) => void; 83 | article: IArticle; 84 | handleArticle: (data?: IArticle) => void; 85 | notifications: INotification[]; 86 | handleNotifications: (data?: INotification[]) => void; 87 | } 88 | 89 | export interface ITranslate { 90 | locale: string; 91 | setLocale: (locale?: string) => void; 92 | t: (scope?: i18n.Scope, options?: i18n.TranslateOptions) => string; 93 | translate: (scope?: i18n.Scope, options?: i18n.TranslateOptions) => string; 94 | } 95 | export interface IExtra { 96 | id?: number; 97 | name?: string; 98 | time?: string; 99 | image: ImageSourcePropType; 100 | saved?: boolean; 101 | booked?: boolean; 102 | available?: boolean; 103 | onBook?: () => void; 104 | onSave?: () => void; 105 | onTimeSelect?: (id?: number) => void; 106 | } 107 | 108 | export interface IBasketItem { 109 | id?: number; 110 | image?: string; 111 | title?: string; 112 | description?: string; 113 | stock?: boolean; 114 | price?: number; 115 | qty?: number; 116 | qtys?: number[]; 117 | size?: number | string; 118 | sizes?: number[] | string[]; 119 | } 120 | 121 | export interface IBasket { 122 | subtotal?: number; 123 | items?: IBasketItem[]; 124 | recommendations?: IBasketItem[]; 125 | } 126 | 127 | export interface INotification { 128 | id?: number; 129 | subject?: string; 130 | message?: string; 131 | read?: boolean; 132 | business?: boolean; 133 | createdAt?: number | Date; 134 | type: 135 | | 'document' 136 | | 'documentation' 137 | | 'payment' 138 | | 'notification' 139 | | 'profile' 140 | | 'extras' 141 | | 'office'; 142 | } 143 | -------------------------------------------------------------------------------- /src/constants/types/theme.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | ColorValue, 4 | FlexStyle, 5 | ImageSourcePropType, 6 | ScaledSize, 7 | TextStyle, 8 | } from 'react-native'; 9 | 10 | // Spacing types 11 | export interface ISpacing 12 | extends Pick< 13 | FlexStyle, 14 | | 'margin' 15 | | 'marginVertical' 16 | | 'marginHorizontal' 17 | | 'marginLeft' 18 | | 'marginRight' 19 | | 'marginTop' 20 | | 'marginBottom' 21 | | 'padding' 22 | | 'paddingVertical' 23 | | 'paddingHorizontal' 24 | | 'paddingLeft' 25 | | 'paddingRight' 26 | | 'paddingTop' 27 | | 'paddingBottom' 28 | > {} 29 | 30 | export type TWeight = 31 | /** fontWeight: 400 */ 32 | | 'normal' 33 | /** fontWeight: 100 */ 34 | | 'thin' 35 | /** fontWeight: 200 */ 36 | | 'extralight' 37 | /** fontWeight: 300 */ 38 | | 'light' 39 | /** fontWeight: 500 */ 40 | | 'medium' 41 | /** fontWeight: 600 */ 42 | | 'semibold' 43 | /** fontWeight: 700 */ 44 | | 'bold' 45 | /** fontWeight: 800 */ 46 | | 'extrabold' 47 | /** fontWeight: 900 */ 48 | | 'black'; 49 | 50 | export interface ITheme { 51 | colors: ThemeColors; 52 | gradients: ThemeGradients; 53 | sizes: ThemeSizes & ThemeSpacing & ICommonTheme['sizes']; 54 | assets: ThemeAssets & ThemeIcons; 55 | icons: ThemeIcons; 56 | fonts: ThemeFonts; 57 | weights: ThemeWeights; 58 | lines: ThemeLineHeights; 59 | } 60 | export interface ICommonTheme { 61 | assets: ThemeAssets & ThemeIcons; 62 | icons: ThemeIcons; 63 | fonts: ThemeFonts; 64 | weights: ThemeWeights; 65 | lines: ThemeLineHeights; 66 | sizes: { 67 | width: ScaledSize['width']; 68 | height: ScaledSize['height']; 69 | }; 70 | } 71 | 72 | export interface IThemeProvider { 73 | children?: React.ReactNode; 74 | theme?: ITheme; 75 | setTheme?: (theme?: ITheme) => void; 76 | } 77 | 78 | export interface ThemeColors { 79 | text: ColorValue; 80 | primary: ColorValue; 81 | secondary: ColorValue; 82 | tertiary: ColorValue; 83 | black: ColorValue; 84 | white: ColorValue; 85 | light: ColorValue; 86 | dark: ColorValue; 87 | gray: ColorValue; 88 | danger: ColorValue; 89 | warning: ColorValue; 90 | success: ColorValue; 91 | info: ColorValue; 92 | card: ColorValue; 93 | background: ColorValue; 94 | shadow: ColorValue; 95 | overlay: ColorValue; 96 | focus: ColorValue; 97 | input: ColorValue; 98 | switchOn: ColorValue; 99 | switchOff: ColorValue; 100 | checkbox: string[]; 101 | checkboxIcon: ColorValue; 102 | facebook: ColorValue; 103 | twitter: ColorValue; 104 | dribbble: ColorValue; 105 | icon: ColorValue; 106 | blurTint: 'light' | 'dark' | 'default'; 107 | link: ColorValue; 108 | } 109 | 110 | export interface ThemeGradients { 111 | primary?: string[]; 112 | secondary?: string[]; 113 | tertiary?: string[]; 114 | black?: string[]; 115 | white?: string[]; 116 | light?: string[]; 117 | dark?: string[]; 118 | gray?: string[]; 119 | danger?: string[]; 120 | warning?: string[]; 121 | success?: string[]; 122 | info?: string[]; 123 | divider?: string[]; 124 | menu?: string[]; 125 | } 126 | 127 | export interface ThemeSizes { 128 | base: number; 129 | text: number; 130 | radius: number; 131 | padding: number; 132 | 133 | h1: number; 134 | h2: number; 135 | h3: number; 136 | h4: number; 137 | h5: number; 138 | p: number; 139 | 140 | buttonBorder: number; 141 | buttonRadius: number; 142 | socialSize: number; 143 | socialRadius: number; 144 | socialIconSize: number; 145 | 146 | inputHeight: number; 147 | inputBorder: number; 148 | inputRadius: number; 149 | inputPadding: number; 150 | 151 | shadowOffsetWidth: number; 152 | shadowOffsetHeight: number; 153 | shadowOpacity: number; 154 | shadowRadius: number; 155 | elevation: number; 156 | 157 | cardRadius: number; 158 | cardPadding: number; 159 | 160 | imageRadius: number; 161 | avatarSize: number; 162 | avatarRadius: number; 163 | 164 | switchWidth: number; 165 | switchHeight: number; 166 | switchThumb: number; 167 | 168 | checkboxWidth: number; 169 | checkboxHeight: number; 170 | checkboxRadius: number; 171 | checkboxIconWidth: number; 172 | checkboxIconHeight: number; 173 | 174 | linkSize: number; 175 | 176 | multiplier: number; 177 | } 178 | 179 | export interface ThemeSpacing { 180 | xs: number; 181 | s: number; 182 | sm: number; 183 | m: number; 184 | md: number; 185 | l: number; 186 | xl: number; 187 | xxl: number; 188 | } 189 | 190 | export interface ThemeWeights { 191 | text: TextStyle['fontWeight']; 192 | h1?: TextStyle['fontWeight']; 193 | h2?: TextStyle['fontWeight']; 194 | h3?: TextStyle['fontWeight']; 195 | h4?: TextStyle['fontWeight']; 196 | h5?: TextStyle['fontWeight']; 197 | p?: TextStyle['fontWeight']; 198 | 199 | thin: TextStyle['fontWeight']; 200 | extralight: TextStyle['fontWeight']; 201 | light: TextStyle['fontWeight']; 202 | normal: TextStyle['fontWeight']; 203 | medium: TextStyle['fontWeight']; 204 | semibold?: TextStyle['fontWeight']; 205 | bold?: TextStyle['fontWeight']; 206 | extrabold?: TextStyle['fontWeight']; 207 | black?: TextStyle['fontWeight']; 208 | } 209 | export interface ThemeIcons { 210 | apple: ImageSourcePropType; 211 | google: ImageSourcePropType; 212 | facebook: ImageSourcePropType; 213 | arrow: ImageSourcePropType; 214 | articles: ImageSourcePropType; 215 | basket: ImageSourcePropType; 216 | bell: ImageSourcePropType; 217 | calendar: ImageSourcePropType; 218 | chat: ImageSourcePropType; 219 | check: ImageSourcePropType; 220 | clock: ImageSourcePropType; 221 | close: ImageSourcePropType; 222 | components: ImageSourcePropType; 223 | document: ImageSourcePropType; 224 | documentation: ImageSourcePropType; 225 | extras: ImageSourcePropType; 226 | flight: ImageSourcePropType; 227 | home: ImageSourcePropType; 228 | hotel: ImageSourcePropType; 229 | image: ImageSourcePropType; 230 | location: ImageSourcePropType; 231 | menu: ImageSourcePropType; 232 | more: ImageSourcePropType; 233 | notification: ImageSourcePropType; 234 | office: ImageSourcePropType; 235 | payment: ImageSourcePropType; 236 | profile: ImageSourcePropType; 237 | register: ImageSourcePropType; 238 | rental: ImageSourcePropType; 239 | search: ImageSourcePropType; 240 | settings: ImageSourcePropType; 241 | star: ImageSourcePropType; 242 | train: ImageSourcePropType; 243 | users: ImageSourcePropType; 244 | warning: ImageSourcePropType; 245 | } 246 | 247 | export interface ThemeAssets { 248 | OpenSansLight?: any; 249 | OpenSansRegular?: any; 250 | OpenSansSemiBold?: any; 251 | OpenSansExtraBold?: any; 252 | OpenSansBold?: any; 253 | 254 | logo: ImageSourcePropType; 255 | header: ImageSourcePropType; 256 | background: ImageSourcePropType; 257 | 258 | card1: ImageSourcePropType; 259 | card2: ImageSourcePropType; 260 | card3: ImageSourcePropType; 261 | card4: ImageSourcePropType; 262 | card5: ImageSourcePropType; 263 | 264 | photo1: ImageSourcePropType; 265 | photo2: ImageSourcePropType; 266 | photo3: ImageSourcePropType; 267 | photo4: ImageSourcePropType; 268 | photo5: ImageSourcePropType; 269 | photo6: ImageSourcePropType; 270 | carousel1: ImageSourcePropType; 271 | 272 | avatar1: ImageSourcePropType; 273 | avatar2: ImageSourcePropType; 274 | 275 | x5: ImageSourcePropType; 276 | gle: ImageSourcePropType; 277 | tesla: ImageSourcePropType; 278 | 279 | ios: ImageSourcePropType; 280 | android: ImageSourcePropType; 281 | } 282 | 283 | export interface ThemeFonts { 284 | text: string; 285 | h1: string; 286 | h2: string; 287 | h3: string; 288 | h4: string; 289 | h5: string; 290 | p: string; 291 | thin: string; 292 | extralight: string; 293 | light: string; 294 | normal: string; 295 | medium: string; 296 | bold: string; 297 | semibold: string; 298 | extrabold: string; 299 | black: string; 300 | } 301 | 302 | export interface ThemeLineHeights { 303 | text: number; 304 | h1: number; 305 | h2: number; 306 | h3: number; 307 | h4: number; 308 | h5: number; 309 | p: number; 310 | } 311 | -------------------------------------------------------------------------------- /src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export {ThemeContext, ThemeProvider, default as useTheme} from './useTheme'; 2 | export {DataContext, DataProvider, useData} from './useData'; 3 | export {default as useScreenOptions} from './useScreenOptions'; 4 | export { 5 | TranslationContext, 6 | TranslationProvider, 7 | useTranslation, 8 | } from './useTranslation'; 9 | -------------------------------------------------------------------------------- /src/hooks/useData.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useContext, useEffect, useState} from 'react'; 2 | import Storage from '@react-native-async-storage/async-storage'; 3 | 4 | import { 5 | IArticle, 6 | ICategory, 7 | IProduct, 8 | IUser, 9 | IUseData, 10 | ITheme, 11 | } from '../constants/types'; 12 | 13 | import { 14 | USERS, 15 | FOLLOWING, 16 | TRENDING, 17 | CATEGORIES, 18 | ARTICLES, 19 | } from '../constants/mocks'; 20 | import {light} from '../constants'; 21 | 22 | export const DataContext = React.createContext({}); 23 | 24 | export const DataProvider = ({children}: {children: React.ReactNode}) => { 25 | const [isDark, setIsDark] = useState(false); 26 | const [theme, setTheme] = useState(light); 27 | const [user, setUser] = useState(USERS[0]); 28 | const [users, setUsers] = useState(USERS); 29 | const [following, setFollowing] = useState(FOLLOWING); 30 | const [trending, setTrending] = useState(TRENDING); 31 | const [categories, setCategories] = useState(CATEGORIES); 32 | const [articles, setArticles] = useState(ARTICLES); 33 | const [article, setArticle] = useState({}); 34 | 35 | // get isDark mode from storage 36 | const getIsDark = useCallback(async () => { 37 | // get preferance gtom storage 38 | const isDarkJSON = await Storage.getItem('isDark'); 39 | 40 | if (isDarkJSON !== null) { 41 | // set isDark / compare if has updated 42 | setIsDark(JSON.parse(isDarkJSON)); 43 | } 44 | }, [setIsDark]); 45 | 46 | // handle isDark mode 47 | const handleIsDark = useCallback( 48 | (payload: boolean) => { 49 | // set isDark / compare if has updated 50 | setIsDark(payload); 51 | // save preferance to storage 52 | Storage.setItem('isDark', JSON.stringify(payload)); 53 | }, 54 | [setIsDark], 55 | ); 56 | 57 | // handle users / profiles 58 | const handleUsers = useCallback( 59 | (payload: IUser[]) => { 60 | // set users / compare if has updated 61 | if (JSON.stringify(payload) !== JSON.stringify(users)) { 62 | setUsers({...users, ...payload}); 63 | } 64 | }, 65 | [users, setUsers], 66 | ); 67 | 68 | // handle user 69 | const handleUser = useCallback( 70 | (payload: IUser) => { 71 | // set user / compare if has updated 72 | if (JSON.stringify(payload) !== JSON.stringify(user)) { 73 | setUser(payload); 74 | } 75 | }, 76 | [user, setUser], 77 | ); 78 | 79 | // handle Article 80 | const handleArticle = useCallback( 81 | (payload: IArticle) => { 82 | // set article / compare if has updated 83 | if (JSON.stringify(payload) !== JSON.stringify(article)) { 84 | setArticle(payload); 85 | } 86 | }, 87 | [article, setArticle], 88 | ); 89 | 90 | // get initial data for: isDark & language 91 | useEffect(() => { 92 | getIsDark(); 93 | }, [getIsDark]); 94 | 95 | // change theme based on isDark updates 96 | useEffect(() => { 97 | setTheme(isDark ? light : light); 98 | }, [isDark]); 99 | 100 | const contextValue = { 101 | isDark, 102 | handleIsDark, 103 | theme, 104 | setTheme, 105 | user, 106 | users, 107 | handleUsers, 108 | handleUser, 109 | following, 110 | setFollowing, 111 | trending, 112 | setTrending, 113 | categories, 114 | setCategories, 115 | articles, 116 | setArticles, 117 | article, 118 | handleArticle, 119 | }; 120 | 121 | return ( 122 | {children} 123 | ); 124 | }; 125 | 126 | export const useData = () => useContext(DataContext) as IUseData; 127 | -------------------------------------------------------------------------------- /src/hooks/useScreenOptions.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {TouchableOpacity} from 'react-native'; 3 | import { 4 | StackHeaderTitleProps, 5 | CardStyleInterpolators, 6 | } from '@react-navigation/stack'; 7 | import {useNavigation} from '@react-navigation/core'; 8 | import {DrawerActions} from '@react-navigation/native'; 9 | import {StackHeaderOptions} from '@react-navigation/stack/lib/typescript/src/types'; 10 | 11 | import {useData} from './useData'; 12 | import {useTranslation} from './useTranslation'; 13 | 14 | import Image from '../components/Image'; 15 | import Text from '../components/Text'; 16 | import useTheme from '../hooks/useTheme'; 17 | import Button from '../components/Button'; 18 | import Block from '../components/Block'; 19 | 20 | export default () => { 21 | const {t} = useTranslation(); 22 | const {user} = useData(); 23 | const navigation = useNavigation(); 24 | const {icons, colors, gradients, sizes} = useTheme(); 25 | 26 | const menu = { 27 | headerStyle: {elevation: 0}, 28 | headerTitleAlign: 'left', 29 | headerTitleContainerStyle: {marginLeft: -sizes.sm}, 30 | headerLeftContainerStyle: {paddingLeft: sizes.s}, 31 | headerRightContainerStyle: {paddingRight: sizes.s}, 32 | cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, 33 | headerTitle: ({children}: StackHeaderTitleProps) => ( 34 | {children} 35 | ), 36 | headerLeft: () => ( 37 | 40 | ), 41 | headerRight: () => ( 42 | 43 | 46 | navigation.navigate('Screens', { 47 | screen: 'Pro', 48 | }) 49 | }> 50 | 51 | 60 | 61 | 63 | navigation.navigate('Screens', { 64 | screen: 'Pro', 65 | }) 66 | }> 67 | 68 | 79 | 80 | 3 81 | 82 | 83 | 84 | 85 | ), 86 | } as StackHeaderOptions; 87 | 88 | const options = { 89 | stack: menu, 90 | components: { 91 | ...menu, 92 | headerTitle: () => ( 93 | 94 | {t('navigation.components')} 95 | 96 | ), 97 | headerRight: () => null, 98 | headerLeft: () => ( 99 | 103 | ), 104 | }, 105 | pro: { 106 | ...menu, 107 | headerTransparent: true, 108 | headerTitle: () => ( 109 | 110 | {t('pro.title')} 111 | 112 | ), 113 | headerRight: () => null, 114 | headerLeft: () => ( 115 | 119 | ), 120 | }, 121 | back: { 122 | ...menu, 123 | headerRight: () => null, 124 | headerLeft: () => ( 125 | 135 | ), 136 | }, 137 | profile: { 138 | ...menu, 139 | headerRight: () => ( 140 | 141 | 144 | navigation.navigate('Screens', { 145 | screen: 'Notifications', 146 | }) 147 | }> 148 | 149 | 158 | 159 | 161 | navigation.dispatch( 162 | DrawerActions.jumpTo('Screens', {screen: 'Profile'}), 163 | ) 164 | }> 165 | 171 | 172 | 173 | ), 174 | }, 175 | }; 176 | 177 | return options; 178 | }; 179 | -------------------------------------------------------------------------------- /src/hooks/useTheme.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {light} from '../constants/'; 4 | import {ITheme, IThemeProvider} from '../constants/types'; 5 | 6 | export const ThemeContext = React.createContext({ 7 | theme: light, 8 | setTheme: () => {}, 9 | }); 10 | 11 | export const ThemeProvider = ({ 12 | children, 13 | theme = light, 14 | setTheme = () => {}, 15 | }: IThemeProvider) => { 16 | return ( 17 | 18 | {children} 19 | 20 | ); 21 | }; 22 | 23 | export default function useTheme(): ITheme { 24 | const {theme} = React.useContext(ThemeContext); 25 | return theme; 26 | } 27 | -------------------------------------------------------------------------------- /src/hooks/useTranslation.tsx: -------------------------------------------------------------------------------- 1 | import i18n from 'i18n-js'; 2 | import * as Localization from 'expo-localization'; 3 | import Storage from '@react-native-async-storage/async-storage'; 4 | import React, {useCallback, useContext, useEffect, useState} from 'react'; 5 | 6 | import translations from '../constants/translations/'; 7 | import {ITranslate} from '../constants/types'; 8 | 9 | export const TranslationContext = React.createContext({}); 10 | 11 | export const TranslationProvider = ({ 12 | children, 13 | }: { 14 | children: React.ReactNode; 15 | }) => { 16 | const [locale, setLocale] = useState('en'); 17 | 18 | // Set the locale once at the beginning of your app. 19 | i18n.locale = locale; 20 | // Set the key-value pairs for the different languages you want to support. 21 | i18n.translations = translations; 22 | // When a value is missing from a language it'll fallback to another language with the key present. 23 | i18n.fallbacks = true; 24 | 25 | const t = useCallback( 26 | (scope: i18n.Scope, options?: i18n.TranslateOptions) => { 27 | return i18n.t(scope, {...options, locale}); 28 | }, 29 | [locale], 30 | ); 31 | 32 | // get locale from storage 33 | const getLocale = useCallback(async () => { 34 | // get preferance gtom storage 35 | const localeJSON = await Storage.getItem('locale'); 36 | 37 | // set Locale / compare if has updated 38 | setLocale(localeJSON !== null ? localeJSON : Localization.locale); 39 | }, [setLocale]); 40 | 41 | useEffect(() => { 42 | getLocale(); 43 | }, [getLocale]); 44 | 45 | useEffect(() => { 46 | // save preferance to storage 47 | Storage.setItem('locale', locale); 48 | }, [locale]); 49 | 50 | const contextValue = { 51 | t, 52 | locale, 53 | setLocale, 54 | translate: t, 55 | }; 56 | 57 | return ( 58 | 59 | {children} 60 | 61 | ); 62 | }; 63 | 64 | /* 65 | * useTranslation hook based on i18n-js 66 | * Source: https://github.com/fnando/i18n-js 67 | */ 68 | export const useTranslation = () => 69 | useContext(TranslationContext) as ITranslate; 70 | -------------------------------------------------------------------------------- /src/navigation/App.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect} from 'react'; 2 | import {Platform, StatusBar} from 'react-native'; 3 | import {useFonts} from 'expo-font'; 4 | import {NavigationContainer, DefaultTheme} from '@react-navigation/native'; 5 | import * as SplashScreen from 'expo-splash-screen'; 6 | import Menu from './Menu'; 7 | import {useData, ThemeProvider, TranslationProvider} from '../hooks'; 8 | 9 | // Keep the splash screen visible while we fetch resources 10 | SplashScreen.preventAutoHideAsync(); 11 | export default () => { 12 | const {isDark, theme, setTheme} = useData(); 13 | 14 | /* set the status bar based on isDark constant */ 15 | useEffect(() => { 16 | Platform.OS === 'android' && StatusBar.setTranslucent(true); 17 | StatusBar.setBarStyle(isDark ? 'light-content' : 'dark-content'); 18 | return () => { 19 | StatusBar.setBarStyle('default'); 20 | }; 21 | }, [isDark]); 22 | 23 | // load custom fonts 24 | const [fontsLoaded] = useFonts({ 25 | 'OpenSans-Light': theme.assets.OpenSansLight, 26 | 'OpenSans-Regular': theme.assets.OpenSansRegular, 27 | 'OpenSans-SemiBold': theme.assets.OpenSansSemiBold, 28 | 'OpenSans-ExtraBold': theme.assets.OpenSansExtraBold, 29 | 'OpenSans-Bold': theme.assets.OpenSansBold, 30 | }); 31 | 32 | if (fontsLoaded) { 33 | const hideSplash = async () => { 34 | await SplashScreen.hideAsync(); 35 | }; 36 | hideSplash(); 37 | } 38 | 39 | if (!fontsLoaded) { 40 | return null; 41 | } 42 | 43 | const navigationTheme = { 44 | ...DefaultTheme, 45 | dark: isDark, 46 | colors: { 47 | ...DefaultTheme.colors, 48 | border: 'rgba(0,0,0,0)', 49 | text: String(theme.colors.text), 50 | card: String(theme.colors.card), 51 | primary: String(theme.colors.primary), 52 | notification: String(theme.colors.primary), 53 | background: String(theme.colors.background), 54 | }, 55 | }; 56 | 57 | return ( 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | ); 66 | }; 67 | -------------------------------------------------------------------------------- /src/navigation/Menu.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useEffect, useRef, useState} from 'react'; 2 | import {Alert, Animated, Linking, StyleSheet} from 'react-native'; 3 | 4 | import { 5 | useIsDrawerOpen, 6 | createDrawerNavigator, 7 | DrawerContentComponentProps, 8 | DrawerContentOptions, 9 | DrawerContentScrollView, 10 | } from '@react-navigation/drawer'; 11 | 12 | import Screens from './Screens'; 13 | import {Block, Text, Switch, Button, Image} from '../components'; 14 | import {useData, useTheme, useTranslation} from '../hooks'; 15 | 16 | const Drawer = createDrawerNavigator(); 17 | 18 | /* drawer menu screens navigation */ 19 | const ScreensStack = () => { 20 | const {colors} = useTheme(); 21 | const isDrawerOpen = useIsDrawerOpen(); 22 | const animation = useRef(new Animated.Value(0)).current; 23 | 24 | const scale = animation.interpolate({ 25 | inputRange: [0, 1], 26 | outputRange: [1, 0.88], 27 | }); 28 | 29 | const borderRadius = animation.interpolate({ 30 | inputRange: [0, 1], 31 | outputRange: [0, 16], 32 | }); 33 | 34 | const animatedStyle = { 35 | borderRadius: borderRadius, 36 | transform: [{scale: scale}], 37 | }; 38 | 39 | useEffect(() => { 40 | Animated.timing(animation, { 41 | duration: 200, 42 | useNativeDriver: true, 43 | toValue: isDrawerOpen ? 1 : 0, 44 | }).start(); 45 | }, [isDrawerOpen, animation]); 46 | 47 | return ( 48 | 58 | {/* */} 59 | 60 | 61 | ); 62 | }; 63 | 64 | /* custom drawer menu */ 65 | const DrawerContent = ( 66 | props: DrawerContentComponentProps, 67 | ) => { 68 | const {navigation} = props; 69 | const {t} = useTranslation(); 70 | const {isDark, handleIsDark} = useData(); 71 | const [active, setActive] = useState('Home'); 72 | const {assets, colors, gradients, sizes} = useTheme(); 73 | const labelColor = colors.text; 74 | 75 | const handleNavigation = useCallback( 76 | (to) => { 77 | setActive(to); 78 | navigation.navigate(to); 79 | }, 80 | [navigation, setActive], 81 | ); 82 | 83 | const handleWebLink = useCallback((url) => Linking.openURL(url), []); 84 | 85 | // screen list for Drawer menu 86 | const screens = [ 87 | {name: t('screens.home'), to: 'Home', icon: assets.home}, 88 | {name: t('screens.components'), to: 'Components', icon: assets.components}, 89 | {name: t('screens.articles'), to: 'Articles', icon: assets.document}, 90 | {name: t('screens.rental'), to: 'Pro', icon: assets.rental}, 91 | {name: t('screens.profile'), to: 'Profile', icon: assets.profile}, 92 | {name: t('screens.settings'), to: 'Pro', icon: assets.settings}, 93 | {name: t('screens.register'), to: 'Register', icon: assets.register}, 94 | {name: t('screens.extra'), to: 'Pro', icon: assets.extras}, 95 | ]; 96 | 97 | return ( 98 | 104 | 105 | 106 | 114 | 115 | 116 | {t('app.name')} 117 | 118 | 119 | {t('app.native')} 120 | 121 | 122 | 123 | 124 | {screens?.map((screen, index) => { 125 | const isActive = active === screen.to; 126 | return ( 127 | 154 | ); 155 | })} 156 | 157 | 164 | 165 | 166 | {t('menu.documentation')} 167 | 168 | 169 | 198 | 199 | 200 | {t('darkMode')} 201 | { 204 | handleIsDark(checked); 205 | Alert.alert(t('pro.title'), t('pro.alert')); 206 | }} 207 | /> 208 | 209 | 210 | 211 | ); 212 | }; 213 | 214 | /* drawer menu navigation */ 215 | export default () => { 216 | const {gradients} = useTheme(); 217 | 218 | return ( 219 | 220 | } 225 | drawerStyle={{ 226 | flex: 1, 227 | width: '60%', 228 | borderRightWidth: 0, 229 | backgroundColor: 'transparent', 230 | }}> 231 | 232 | 233 | 234 | ); 235 | }; 236 | -------------------------------------------------------------------------------- /src/navigation/Screens.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {createStackNavigator} from '@react-navigation/stack'; 3 | 4 | import {Articles, Components, Home, Profile, Register, Pro} from '../screens'; 5 | import {useScreenOptions, useTranslation} from '../hooks'; 6 | 7 | const Stack = createStackNavigator(); 8 | 9 | export default () => { 10 | const {t} = useTranslation(); 11 | const screenOptions = useScreenOptions(); 12 | 13 | return ( 14 | 15 | 20 | 21 | 26 | 27 | 32 | 33 | 34 | 35 | 40 | 41 | 46 | 47 | ); 48 | }; 49 | -------------------------------------------------------------------------------- /src/screens/Articles.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} from 'react'; 2 | import {FlatList} from 'react-native'; 3 | 4 | import {useData, useTheme} from '../hooks/'; 5 | import {IArticle, ICategory} from '../constants/types'; 6 | import {Block, Button, Article, Text} from '../components/'; 7 | 8 | const Articles = () => { 9 | const data = useData(); 10 | const [selected, setSelected] = useState(); 11 | const [articles, setArticles] = useState([]); 12 | const [categories, setCategories] = useState([]); 13 | const {colors, gradients, sizes} = useTheme(); 14 | 15 | // init articles 16 | useEffect(() => { 17 | setArticles(data?.articles); 18 | setCategories(data?.categories); 19 | setSelected(data?.categories[0]); 20 | }, [data.articles, data.categories]); 21 | 22 | // update articles on category change 23 | useEffect(() => { 24 | const category = data?.categories?.find( 25 | (category) => category?.id === selected?.id, 26 | ); 27 | 28 | const newArticles = data?.articles?.filter( 29 | (article) => article?.category?.id === category?.id, 30 | ); 31 | 32 | setArticles(newArticles); 33 | }, [data, selected, setArticles]); 34 | 35 | return ( 36 | 37 | {/* categories list */} 38 | 39 | 45 | {categories?.map((category) => { 46 | const isSelected = category?.id === selected?.id; 47 | return ( 48 | 64 | ); 65 | })} 66 | 67 | 68 | 69 | `${item?.id}`} 73 | style={{paddingHorizontal: sizes.padding}} 74 | contentContainerStyle={{paddingBottom: sizes.l}} 75 | renderItem={({item}) =>
} 76 | /> 77 | 78 | ); 79 | }; 80 | 81 | export default Articles; 82 | -------------------------------------------------------------------------------- /src/screens/Components.tsx: -------------------------------------------------------------------------------- 1 | import React, {useLayoutEffect, useState} from 'react'; 2 | import {FlatList, TouchableOpacity} from 'react-native'; 3 | 4 | import {useNavigation} from '@react-navigation/core'; 5 | import {useHeaderHeight} from '@react-navigation/stack'; 6 | 7 | import {useTheme} from '../hooks/'; 8 | import {Block, Button, Input, Image, Switch, Modal, Text} from '../components/'; 9 | 10 | // buttons example 11 | const Buttons = () => { 12 | const [showModal, setModal] = useState(false); 13 | const [quantity, setQuantity] = useState('01'); 14 | const {assets, colors, gradients, sizes} = useTheme(); 15 | 16 | return ( 17 | 18 | 19 | Buttons 20 | 21 | 22 | 27 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 66 | 86 | 91 | 96 | 97 | 98 | setModal(false)}> 99 | `${index}`} 101 | data={['01', '02', '03', '04', '05']} 102 | renderItem={({item}) => ( 103 | 113 | )} 114 | /> 115 | 116 | 117 | ); 118 | }; 119 | 120 | // texts example 121 | const Typography = () => { 122 | const {sizes} = useTheme(); 123 | 124 | return ( 125 | 126 | 127 | Typography 128 | 129 | 130 | Heading 1 131 | Heading 2 132 | Heading 3 133 | Heading 4 134 | Heading 5 135 | Paragraph 136 | Text 137 | 138 | 139 | ); 140 | }; 141 | 142 | // inputs example 143 | const Inputs = () => { 144 | const {colors, sizes} = useTheme(); 145 | 146 | return ( 147 | 152 | 153 | Inputs 154 | 155 | 156 | 157 | 158 | 164 | 165 | 166 | 167 | 168 | 169 | ); 170 | }; 171 | 172 | // switch example 173 | const Switches = () => { 174 | const {colors, sizes} = useTheme(); 175 | const [switch1, setSwitch1] = useState(true); 176 | const [switch2, setSwitch2] = useState(false); 177 | 178 | return ( 179 | 183 | 184 | Switches 185 | 186 | 187 | 188 | Switch is {switch1 ? 'ON' : 'OFF'} 189 | setSwitch1(checked)} 192 | /> 193 | 194 | 200 | Switch is {switch2 ? 'ON' : 'OFF'} 201 | setSwitch2(checked)} 204 | /> 205 | 206 | 207 | 208 | ); 209 | }; 210 | 211 | // social example 212 | const Social = () => { 213 | const {sizes} = useTheme(); 214 | 215 | return ( 216 | 217 | 218 | Social 219 | 220 | 221 | 425 | 426 | 427 | 436 | 445 | 454 | 463 | 472 | 481 | 482 | 483 | 484 | {/* vertical image */} 485 | 486 | 487 | 488 | Album 2 489 | 490 | 495 | 496 | 497 | 505 | 506 | 515 | 523 | 524 | 525 | 526 | 527 | ); 528 | }; 529 | 530 | const Components = () => { 531 | const {assets, sizes} = useTheme(); 532 | const navigation = useNavigation(); 533 | const headerHeight = useHeaderHeight(); 534 | 535 | useLayoutEffect(() => { 536 | navigation.setOptions({ 537 | headerBackground: () => ( 538 | 545 | ), 546 | }); 547 | }, [assets.header, navigation, sizes.width, headerHeight]); 548 | 549 | return ( 550 | 551 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | ); 567 | }; 568 | 569 | export default Components; 570 | -------------------------------------------------------------------------------- /src/screens/Home.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useState} from 'react'; 2 | 3 | import {useData, useTheme, useTranslation} from '../hooks/'; 4 | import {Block, Button, Image, Input, Product, Text} from '../components/'; 5 | 6 | const Home = () => { 7 | const {t} = useTranslation(); 8 | const [tab, setTab] = useState(0); 9 | const {following, trending} = useData(); 10 | const [products, setProducts] = useState(following); 11 | const {assets, colors, fonts, gradients, sizes} = useTheme(); 12 | 13 | const handleProducts = useCallback( 14 | (tab: number) => { 15 | setTab(tab); 16 | setProducts(tab === 0 ? following : trending); 17 | }, 18 | [following, trending, setTab, setProducts], 19 | ); 20 | 21 | return ( 22 | 23 | {/* search input */} 24 | 25 | 26 | 27 | 28 | {/* toggle products list */} 29 | 36 | 54 | 61 | 83 | 84 | 85 | {/* products list */} 86 | 91 | 92 | {products?.map((product) => ( 93 | 94 | ))} 95 | 96 | 97 | 98 | ); 99 | }; 100 | 101 | export default Home; 102 | -------------------------------------------------------------------------------- /src/screens/Pro.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useEffect} from 'react'; 2 | import {Linking, StatusBar} from 'react-native'; 3 | 4 | import {useTheme, useTranslation} from '../hooks/'; 5 | import {Block, Button, Image, Text} from '../components/'; 6 | 7 | const Pro = () => { 8 | const {t} = useTranslation(); 9 | const {assets, colors, gradients, sizes} = useTheme(); 10 | 11 | useEffect(() => { 12 | StatusBar.setBarStyle('light-content'); 13 | return () => { 14 | StatusBar.setBarStyle('dark-content'); 15 | }; 16 | }, []); 17 | 18 | const handleWebLink = useCallback((url) => Linking.openURL(url), []); 19 | 20 | return ( 21 | 26 | 27 | 28 | 29 | {t('pro.title')} 30 | 31 | 32 | {t('pro.appTemplate')} 33 | 34 | {t('pro.components', {count: 11})} 35 | {t('pro.screens', {count: 18})} 36 | {t('pro.support')} 37 | 38 | {t('pro.saveTime')} 39 | 40 | {t('pro.takeAdvantage')} 41 | 42 | 47 | 52 | 57 | 58 | 59 | 70 | 71 | 72 | 73 | ); 74 | }; 75 | 76 | export default Pro; 77 | -------------------------------------------------------------------------------- /src/screens/Profile.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback} from 'react'; 2 | import {Platform, Linking} from 'react-native'; 3 | import {Ionicons} from '@expo/vector-icons'; 4 | import {useNavigation} from '@react-navigation/core'; 5 | 6 | import {Block, Button, Image, Text} from '../components/'; 7 | import {useData, useTheme, useTranslation} from '../hooks/'; 8 | 9 | const isAndroid = Platform.OS === 'android'; 10 | 11 | const Profile = () => { 12 | const {user} = useData(); 13 | const {t} = useTranslation(); 14 | const navigation = useNavigation(); 15 | const {assets, colors, sizes} = useTheme(); 16 | 17 | const IMAGE_SIZE = (sizes.width - (sizes.padding + sizes.sm) * 2) / 3; 18 | const IMAGE_VERTICAL_SIZE = 19 | (sizes.width - (sizes.padding + sizes.sm) * 2) / 2; 20 | const IMAGE_MARGIN = (sizes.width - IMAGE_SIZE * 3 - sizes.padding * 2) / 2; 21 | const IMAGE_VERTICAL_MARGIN = 22 | (sizes.width - (IMAGE_VERTICAL_SIZE + sizes.sm) * 2) / 2; 23 | 24 | const handleSocialLink = useCallback( 25 | (type: 'twitter' | 'dribbble') => { 26 | const url = 27 | type === 'twitter' 28 | ? `https://twitter.com/${user?.social?.twitter}` 29 | : `https://dribbble.com/${user?.social?.dribbble}`; 30 | 31 | try { 32 | Linking.openURL(url); 33 | } catch (error) { 34 | alert(`Cannot open URL: ${url}`); 35 | } 36 | }, 37 | [user], 38 | ); 39 | 40 | return ( 41 | 42 | 47 | 48 | 55 | 72 | 73 | 79 | 80 | {user?.name} 81 | 82 | 83 | {user?.department} 84 | 85 | 86 | 104 | 117 | 129 | 130 | 131 | 132 | 133 | {/* profile: stats */} 134 | 141 | 152 | 153 | {user?.stats?.posts} 154 | {t('profile.posts')} 155 | 156 | 157 | {(user?.stats?.followers || 0) / 1000}k 158 | {t('profile.followers')} 159 | 160 | 161 | {(user?.stats?.following || 0) / 1000}k 162 | {t('profile.following')} 163 | 164 | 165 | 166 | 167 | {/* profile: about me */} 168 | 169 | 170 | {t('profile.aboutMe')} 171 | 172 | 173 | {user?.about} 174 | 175 | 176 | 177 | {/* profile: photo album */} 178 | 179 | 180 | 181 | {t('common.album')} 182 | 183 | 188 | 189 | 190 | 198 | 199 | 208 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | ); 223 | }; 224 | 225 | export default Profile; 226 | -------------------------------------------------------------------------------- /src/screens/Register.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useEffect, useState} from 'react'; 2 | import {Linking, Platform} from 'react-native'; 3 | import {useNavigation} from '@react-navigation/core'; 4 | 5 | import {useData, useTheme, useTranslation} from '../hooks/'; 6 | import * as regex from '../constants/regex'; 7 | import {Block, Button, Input, Image, Text, Checkbox} from '../components/'; 8 | 9 | const isAndroid = Platform.OS === 'android'; 10 | 11 | interface IRegistration { 12 | name: string; 13 | email: string; 14 | password: string; 15 | agreed: boolean; 16 | } 17 | interface IRegistrationValidation { 18 | name: boolean; 19 | email: boolean; 20 | password: boolean; 21 | agreed: boolean; 22 | } 23 | 24 | const Register = () => { 25 | const {isDark} = useData(); 26 | const {t} = useTranslation(); 27 | const navigation = useNavigation(); 28 | const [isValid, setIsValid] = useState({ 29 | name: false, 30 | email: false, 31 | password: false, 32 | agreed: false, 33 | }); 34 | const [registration, setRegistration] = useState({ 35 | name: '', 36 | email: '', 37 | password: '', 38 | agreed: false, 39 | }); 40 | const {assets, colors, gradients, sizes} = useTheme(); 41 | 42 | const handleChange = useCallback( 43 | (value) => { 44 | setRegistration((state) => ({...state, ...value})); 45 | }, 46 | [setRegistration], 47 | ); 48 | 49 | const handleSignUp = useCallback(() => { 50 | if (!Object.values(isValid).includes(false)) { 51 | /** send/save registratin data */ 52 | console.log('handleSignUp', registration); 53 | } 54 | }, [isValid, registration]); 55 | 56 | useEffect(() => { 57 | setIsValid((state) => ({ 58 | ...state, 59 | name: regex.name.test(registration.name), 60 | email: regex.email.test(registration.email), 61 | password: regex.password.test(registration.password), 62 | agreed: registration.agreed, 63 | })); 64 | }, [registration, setIsValid]); 65 | 66 | return ( 67 | 68 | 69 | 70 | 77 | 94 | 95 | 96 | {t('register.title')} 97 | 98 | 99 | 100 | {/* register form */} 101 | 105 | 111 | 120 | 121 | {t('register.subtitle')} 122 | 123 | {/* social buttons */} 124 | 125 | 133 | 141 | 149 | 150 | 157 | 165 | 166 | {t('common.or')} 167 | 168 | 176 | 177 | {/* form inputs */} 178 | 179 | handleChange({name: value})} 187 | /> 188 | handleChange({email: value})} 197 | /> 198 | handleChange({password: value})} 205 | success={Boolean(registration.password && isValid.password)} 206 | danger={Boolean(registration.password && !isValid.password)} 207 | /> 208 | 209 | {/* checkbox terms */} 210 | 211 | handleChange({agreed: value})} 215 | /> 216 | 217 | {t('common.agree')} 218 | { 221 | Linking.openURL('https://www.creative-tim.com/terms'); 222 | }}> 223 | {t('common.terms')} 224 | 225 | 226 | 227 | 237 | 248 | 249 | 250 | 251 | 252 | 253 | ); 254 | }; 255 | 256 | export default Register; 257 | -------------------------------------------------------------------------------- /src/screens/index.ts: -------------------------------------------------------------------------------- 1 | export {default as About} from './Pro'; 2 | export {default as Agreement} from './Pro'; 3 | export {default as Articles} from './Articles'; 4 | export {default as Chat} from './Pro'; 5 | export {default as Components} from './Components'; 6 | export {default as Extras} from './Pro'; 7 | export {default as Home} from './Home'; 8 | export {default as Notifications} from './Pro'; 9 | export {default as NotificationsSettings} from './Pro'; 10 | export {default as Privacy} from './Pro'; 11 | export {default as Profile} from './Profile'; 12 | export {default as Register} from './Register'; 13 | export {default as Login} from './Pro'; 14 | export {default as Rental} from './Pro'; 15 | export {default as Rentals} from './Pro'; 16 | export {default as Booking} from './Pro'; 17 | export {default as Settings} from './Pro'; 18 | export {default as Shopping} from './Pro'; 19 | export {default as Pro} from './Pro'; 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "esModuleInterop": true, 5 | "strict": true 6 | } 7 | } 8 | --------------------------------------------------------------------------------