├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode └── extensions.json ├── .watchmanconfig ├── App.tsx ├── README.md ├── app.json ├── app.web-build.json ├── assets ├── fonts │ ├── Georgia.ttf │ ├── Montserrat-Bold.ttf │ ├── Montserrat-Light.ttf │ ├── Montserrat-Regular.ttf │ ├── Ubuntu-Bold.ttf │ ├── Ubuntu-Light-Italic.ttf │ └── Ubuntu-Light.ttf ├── icons │ ├── icon.png │ └── loading.png ├── images │ ├── avatar1.jpg │ ├── bg_screen1.jpg │ ├── bg_screen2.jpg │ ├── bg_screen3.jpg │ ├── bg_screen4.jpg │ ├── user-cool.png │ ├── user-hp.png │ ├── user-student.png │ ├── wallpaper_1.jpg │ ├── wallpaper_2.jpg │ ├── wallpaper_3.jpg │ └── wallpaper_4.jpg └── mocks │ ├── 4e2c606885b9fb2d8aea70827e4949bf.jpg │ ├── Android-N-new-settings-ui-mockup.jpg │ ├── beautiful-list-ui-for-mobile-app-5.jpg │ └── iOS-10-vs-iOS-11-Settings.jpeg ├── babel.config.js ├── package.json ├── src ├── components │ ├── AppLoading.ts │ ├── AppLoading.web.tsx │ ├── LinearGradient.ts │ └── header.tsx ├── config │ ├── colors.ts │ ├── fonts.ts │ ├── socialColors.ts │ └── stack.ts ├── helpers │ ├── AssetsCaching.tsx │ ├── AssetsCaching.web.tsx │ ├── ThemeReducer.tsx │ ├── vector-fonts.ts │ └── vector-fonts.web.ts ├── images │ ├── logo.png │ ├── rating.png │ ├── shirt.png │ └── water.png ├── navigation │ ├── DrawerNavigator.tsx │ └── RootNavigator.tsx └── views │ ├── Divider.tsx │ ├── avatars.tsx │ ├── badge.tsx │ ├── bottomsheet.tsx │ ├── buttons.tsx │ ├── cards.tsx │ ├── checkbox.tsx │ ├── chips.tsx │ ├── circularSlider.tsx │ ├── dialogs.tsx │ ├── fab.tsx │ ├── fonts.tsx │ ├── image.tsx │ ├── inputs.tsx │ ├── linearProgress.tsx │ ├── lists │ ├── content.tsx │ └── index.tsx │ ├── lists2.tsx │ ├── login │ ├── index.tsx │ ├── screen2.tsx │ └── screen3.tsx │ ├── overlay.tsx │ ├── pricing.tsx │ ├── profile.tsx │ ├── ratings.tsx │ ├── settings.tsx │ ├── sliders.tsx │ ├── social_icons.tsx │ ├── speedDial.tsx │ ├── tabs.tsx │ ├── text.tsx │ ├── tiles.tsx │ ├── tooltip.tsx │ └── whatsappClone.tsx ├── tsconfig.json ├── web ├── favicon.png ├── index.html └── serve.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | web-build -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@react-native-community", 3 | "rules": { 4 | "react-native/no-inline-styles": 0, 5 | "@typescript-eslint/no-unused-vars": [ 6 | "error", 7 | { 8 | "ignoreRestSiblings": true 9 | } 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode 3 | .DS_Store 4 | web-build/ 5 | web-report/ 6 | 7 | node_modules/* 8 | dist/* 9 | .expo/* 10 | npm-debug.* 11 | *.log 12 | 13 | /beta 14 | 15 | .expo-shared/ 16 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.expo 3 | /web 4 | /*.json 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": true 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "rne.snippets" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useReducer, useEffect } from 'react'; 2 | import { ThemeProvider } from 'react-native-elements'; 3 | import { useColorScheme } from 'react-native-appearance'; 4 | import RootNavigator from './src/navigation/RootNavigator'; 5 | import AppLoading from './src/components/AppLoading'; 6 | import { cacheImages, cacheFonts } from './src/helpers/AssetsCaching'; 7 | import vectorFonts from './src/helpers/vector-fonts'; 8 | import { 9 | ThemeReducer, 10 | initialState, 11 | ThemeReducerContext, 12 | } from './src/helpers/ThemeReducer'; 13 | 14 | export default () => { 15 | const [ThemeState, dispatch] = useReducer(ThemeReducer, initialState); 16 | const colorScheme = useColorScheme(); 17 | 18 | useEffect(() => { 19 | if (colorScheme === 'dark') { 20 | dispatch({ type: 'set-theme', payload: 'dark' }); 21 | } 22 | }, [colorScheme]); 23 | 24 | const [isReady, setIsReady] = useState(false); 25 | 26 | const loadAssetsAsync = async () => { 27 | const imageAssets = cacheImages([ 28 | require('./assets/images/bg_screen1.jpg'), 29 | require('./assets/images/bg_screen2.jpg'), 30 | require('./assets/images/bg_screen3.jpg'), 31 | require('./assets/images/bg_screen4.jpg'), 32 | require('./assets/images/user-cool.png'), 33 | require('./assets/images/user-hp.png'), 34 | require('./assets/images/user-student.png'), 35 | require('./assets/images/avatar1.jpg'), 36 | ]); 37 | 38 | const fontAssets = cacheFonts([ 39 | ...vectorFonts, 40 | { georgia: require('./assets/fonts/Georgia.ttf') }, 41 | { regular: require('./assets/fonts/Montserrat-Regular.ttf') }, 42 | { light: require('./assets/fonts/Montserrat-Light.ttf') }, 43 | { bold: require('./assets/fonts/Montserrat-Bold.ttf') }, 44 | { UbuntuLight: require('./assets/fonts/Ubuntu-Light.ttf') }, 45 | { UbuntuBold: require('./assets/fonts/Ubuntu-Bold.ttf') }, 46 | { UbuntuLightItalic: require('./assets/fonts/Ubuntu-Light-Italic.ttf') }, 47 | ]); 48 | await Promise.all([...imageAssets, ...fontAssets]); 49 | }; 50 | 51 | if (!isReady) { 52 | return ( 53 | { 56 | setIsReady(true); 57 | }} 58 | onError={console.warn} 59 | /> 60 | ); 61 | } 62 | 63 | return ( 64 | 65 | 66 | 67 | 68 | 69 | ); 70 | }; 71 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![React Native Elements App](https://user-images.githubusercontent.com/5962998/37248832-a7060286-24b1-11e8-94a8-847ab6ded4ec.png) 2 | 3 | # React Native Elements App 4 | 5 | **[Mobile App](https://expo.io/@monte9/react-native-elements-app)** 6 | 7 | This is the Demo app for [React Native Elements](https://github.com/react-native-elements/react-native-elements) built with [Expo](https://expo.io/). The purpose of this app is to demonstrate the usage of the various UI components that React Native Elements provides out of the box. 8 | 9 | This app also works on the `web` platform using [React Native Web](https://github.com/necolas/react-native-web). You can check out the [live website here](https://react-native-elements.github.io/react-native-elements-app). If you are looking to build a React Native mobile app which can reuse the code to deploy it on the web, this is the right place to begin. We decided to use [Expo](https://expo.io/), which reduces the effort required to build an app once and deploy it anywhere. 10 | 11 | ## Getting Started 12 | 13 | ### Run it locally 14 | 15 | 1. Install [Expo CLI](https://docs.expo.io/versions/latest/workflow/expo-cli/) 16 | 17 | ``` 18 | [sudo] npm install -g expo-cli 19 | ``` 20 | 21 | _If permissions errors then please use `--unsafe-perm=true` flag too [npm/npm#16766](https://github.com/npm/npm/issues/16766)_ 22 | 23 | 2. Clone the project 24 | 25 | ``` 26 | git clone https://github.com/react-native-elements/react-native-elements-app.git 27 | ``` 28 | 29 | 3. Install dependencies 30 | 31 | ``` 32 | cd react-native-elements-app 33 | 34 | # Using yarn 35 | yarn install 36 | 37 | # Using npm 38 | npm install 39 | ``` 40 | 41 | 4. Run the cross-platform app (uses [Expo](https://expo.io/learn)) 42 | 43 | ``` 44 | # Using yarn 45 | yarn start 46 | 47 | # Using npm 48 | npm start 49 | ``` 50 | 51 | ### Deploy Web App 52 | 53 | First you must set correct `publicPath` in `app.web-build.json`. Next you must build the web app using: 54 | 55 | ``` 56 | yarn build:web 57 | ``` 58 | 59 | Once you have built it, you can see generated `web-build` folder. 60 | 61 | This folder can be hosted as static website. For example, you can publish on [Github Pages](https://pages.github.com/) via [gh-pages](https://github.com/tschaub/gh-pages) cli. 62 | 63 | ``` 64 | yarn deploy 65 | ``` 66 | 67 | **Note:** Don't forget to add or change "homepage" key in your package.json! 68 | 69 | ### Ejecting 70 | 71 | The mobile app is built using Expo. If you would like to eject, you can run the following command: 72 | 73 | ``` 74 | # Using Yarn 75 | yarn eject 76 | 77 | # Using npm 78 | npm run eject 79 | ``` 80 | 81 | We highly recommend you read the [official Expo ejection docs](https://docs.expo.io/versions/latest/expokit/eject/) before proceeding, as the action of ejecting is not reversible. 82 | 83 | ## Major contributors: 84 | 85 | - [@oxyii](https://github.com/oxyii) 💪🏼 86 | - [@xavier-villelegier](https://github.com/xavier-villelegier) 🔥 87 | - [@martinezguillaume](https://github.com/martinezguillaume) 🎸 88 | - [@iRoachie](https://github.com/iRoachie) 💯 89 | - [@monte9](https://github.com/monte9) 🤓 90 | 91 | ## React Native Elements 92 | 93 | This app is built using [React Native Elements](https://github.com/react-native-elements/react-native-elements). React Native Elements is a UI toolkit for React Native that provides you with production ready UI components so that you can focus on building the part that makes your app unique as opposed to reinvent the UI wheel. Aiding rapid development and pragmatic design, React Native Elements is the one-stop shop for all your requirements, making your web and mobile apps look more dynamic and professional. 94 | 95 | You can install `react-native-elements` in your app using: 96 | 97 | ``` 98 | # Using yarn 99 | yarn add react-native-elements 100 | 101 | # Using npm 102 | npm install react-native-elements --save 103 | ``` 104 | 105 | ## Feedback 106 | 107 | In case you run into any problems while running this app or have additional questions, please create a new issue on this repo, and we will follow up with you. 108 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "React Native Elements", 4 | "slug": "react-native-elements-app", 5 | "description": "A demo app for React Native Elements UI Library", 6 | "privacy": "public", 7 | "platforms": [ 8 | "ios", 9 | "android", 10 | "web" 11 | ], 12 | "version": "1.1.0", 13 | "orientation": "default", 14 | "primaryColor": "#cccccc", 15 | "icon": "./assets/icons/icon.png", 16 | "splash": { 17 | "image": "./assets/icons/loading.png" 18 | }, 19 | "updates": { 20 | "fallbackToCacheTimeout": 0 21 | }, 22 | "assetBundlePatterns": [ 23 | "**/*" 24 | ], 25 | "ios": { 26 | "supportsTablet": true 27 | }, 28 | "userInterfaceStyle": "automatic", 29 | "android": { 30 | "package": "com.reactnativeelements" 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /app.web-build.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-elements-app", 4 | "slug": "react-native-elements-app", 5 | "description": "A demo app for React Native Elements UI Library", 6 | "privacy": "public", 7 | "sdkVersion": "34.0.0", 8 | "platforms": ["web"], 9 | "version": "1.1.0", 10 | "primaryColor": "#cccccc", 11 | "web": { 12 | "publicPath": "/react-native-elements-app/" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/fonts/Georgia.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/fonts/Georgia.ttf -------------------------------------------------------------------------------- /assets/fonts/Montserrat-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/fonts/Montserrat-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/Montserrat-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/fonts/Montserrat-Light.ttf -------------------------------------------------------------------------------- /assets/fonts/Montserrat-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/fonts/Montserrat-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/Ubuntu-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/fonts/Ubuntu-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/Ubuntu-Light-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/fonts/Ubuntu-Light-Italic.ttf -------------------------------------------------------------------------------- /assets/fonts/Ubuntu-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/fonts/Ubuntu-Light.ttf -------------------------------------------------------------------------------- /assets/icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/icons/icon.png -------------------------------------------------------------------------------- /assets/icons/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/icons/loading.png -------------------------------------------------------------------------------- /assets/images/avatar1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/avatar1.jpg -------------------------------------------------------------------------------- /assets/images/bg_screen1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/bg_screen1.jpg -------------------------------------------------------------------------------- /assets/images/bg_screen2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/bg_screen2.jpg -------------------------------------------------------------------------------- /assets/images/bg_screen3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/bg_screen3.jpg -------------------------------------------------------------------------------- /assets/images/bg_screen4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/bg_screen4.jpg -------------------------------------------------------------------------------- /assets/images/user-cool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/user-cool.png -------------------------------------------------------------------------------- /assets/images/user-hp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/user-hp.png -------------------------------------------------------------------------------- /assets/images/user-student.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/user-student.png -------------------------------------------------------------------------------- /assets/images/wallpaper_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/wallpaper_1.jpg -------------------------------------------------------------------------------- /assets/images/wallpaper_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/wallpaper_2.jpg -------------------------------------------------------------------------------- /assets/images/wallpaper_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/wallpaper_3.jpg -------------------------------------------------------------------------------- /assets/images/wallpaper_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/images/wallpaper_4.jpg -------------------------------------------------------------------------------- /assets/mocks/4e2c606885b9fb2d8aea70827e4949bf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/mocks/4e2c606885b9fb2d8aea70827e4949bf.jpg -------------------------------------------------------------------------------- /assets/mocks/Android-N-new-settings-ui-mockup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/mocks/Android-N-new-settings-ui-mockup.jpg -------------------------------------------------------------------------------- /assets/mocks/beautiful-list-ui-for-mobile-app-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/mocks/beautiful-list-ui-for-mobile-app-5.jpg -------------------------------------------------------------------------------- /assets/mocks/iOS-10-vs-iOS-11-Settings.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/assets/mocks/iOS-10-vs-iOS-11-Settings.jpeg -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-elements-app", 3 | "version": "1.1.0", 4 | "description": "Demo app for React Native Elements UI Library", 5 | "author": "Monte Thakkar", 6 | "private": true, 7 | "homepage": "https://react-native-elements.github.io/react-native-elements-app/", 8 | "main": "node_modules/expo/AppEntry.js", 9 | "scripts": { 10 | "start": "expo start", 11 | "android": "expo start --android", 12 | "ios": "expo start --ios", 13 | "web": "expo start --web", 14 | "eject": "expo eject", 15 | "test": "jest --watchAll", 16 | "build:web": "expo build:web --config ./app.web-build.json --polyfill", 17 | "deploy": "gh-pages -d web-build", 18 | "prettify": "prettier --write . --config ./.prettierrc", 19 | "lint": "eslint --ext js,ts,tsx .", 20 | "clean-install": "rm -rf node_modules && npm cache clean --force && watchman watch-del-all && yarn" 21 | }, 22 | "dependencies": { 23 | "@expo/vector-icons": "^12.0.0", 24 | "@react-native-community/masked-view": "0.1.10", 25 | "@react-navigation/drawer": "^5.11.4", 26 | "@react-navigation/native": "^5.8.10", 27 | "@react-navigation/stack": "^5.12.8", 28 | "expo": "^42.0.0", 29 | "expo-app-loading": "^1.0.1", 30 | "expo-asset": "~8.3.2", 31 | "expo-font": "~9.2.1", 32 | "expo-linear-gradient": "~9.2.0", 33 | "lodash": "^4.17.20", 34 | "prop-types": "^15.7.2", 35 | "react": "16.13.1", 36 | "react-dom": "16.13.1", 37 | "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz", 38 | "react-native-appearance": "~0.3.3", 39 | "react-native-elements": "https://github.com/react-native-elements/react-native-elements#dist", 40 | "react-native-elements-universe": "https://github.com/react-native-elements/react-native-elements-universe#dist", 41 | "react-native-gesture-handler": "~1.10.2", 42 | "react-native-reanimated": "~2.2.0", 43 | "react-native-safe-area-context": "3.2.0", 44 | "react-native-screens": "~3.4.0", 45 | "react-native-svg": "12.1.1", 46 | "react-native-web": "~0.13.12" 47 | }, 48 | "devDependencies": { 49 | "@expo/webpack-config": "~0.12.63", 50 | "@react-native-community/eslint-config": "^2.0.0", 51 | "@types/lodash": "^4.14.168", 52 | "@types/react": "~16.9.35", 53 | "@types/react-native": "~0.63.2", 54 | "babel-preset-expo": "8.3.0", 55 | "eslint": "^7.3.1", 56 | "gh-pages": "^2.1.1", 57 | "jest-expo": "^42.0.0", 58 | "typescript": "~4.0.0" 59 | }, 60 | "jest": { 61 | "preset": "jest-expo" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/components/AppLoading.ts: -------------------------------------------------------------------------------- 1 | import AppLoading from 'expo-app-loading'; 2 | 3 | export default AppLoading; 4 | -------------------------------------------------------------------------------- /src/components/AppLoading.web.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { View, StyleSheet, ActivityIndicator } from 'react-native'; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | flex: 1, 7 | alignItems: 'center', 8 | justifyContent: 'center', 9 | padding: 10, 10 | }, 11 | }); 12 | 13 | const emptyFunc = () => null; 14 | 15 | const callbackHandler = (startAsync, successCb, errorCb) => { 16 | Promise.resolve(startAsync()).then(successCb).catch(errorCb); 17 | }; 18 | 19 | const AppLoading = (props) => { 20 | useEffect(() => { 21 | const { startAsync, onError, onFinish } = props; 22 | const successCb = onFinish || emptyFunc; 23 | const errorCb = onError || emptyFunc; 24 | return !startAsync 25 | ? successCb() 26 | : callbackHandler(startAsync, successCb, errorCb); 27 | }, [props]); 28 | const { startAsync, onError, onFinish, autoHideSplash, ...others } = props; 29 | return ( 30 | 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default AppLoading; 37 | -------------------------------------------------------------------------------- /src/components/LinearGradient.ts: -------------------------------------------------------------------------------- 1 | export { LinearGradient } from 'expo-linear-gradient'; 2 | -------------------------------------------------------------------------------- /src/components/header.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | StyleSheet, 4 | View, 5 | Text, 6 | Linking, 7 | StyleProp, 8 | TextStyle, 9 | ViewStyle, 10 | } from 'react-native'; 11 | import { useNavigation } from '@react-navigation/native'; 12 | import { DrawerNavigationProp } from '@react-navigation/drawer'; 13 | import { Header as HeaderRNE, HeaderProps, Icon } from 'react-native-elements'; 14 | import { TouchableOpacity } from 'react-native-gesture-handler'; 15 | 16 | type HeaderComponentProps = { 17 | title: string; 18 | view?: string; 19 | }; 20 | 21 | type ParamList = { 22 | Detail: { 23 | openDrawer: void; 24 | }; 25 | }; 26 | 27 | const Header: React.FunctionComponent = (props) => { 28 | const navigation = useNavigation>(); 29 | 30 | const docsNavigate = () => { 31 | Linking.openURL(`https://reactnativeelements.com/docs/${props.view}`); 32 | }; 33 | 34 | const playgroundNavigate = () => { 35 | Linking.openURL(`https://react-native-elements.js.org/#/${props.view}`); 36 | }; 37 | 38 | return ( 39 | 48 | 49 | 50 | 51 | 55 | 56 | 57 | 58 | ) 59 | } 60 | centerComponent={{ text: props.title, style: styles.heading }} 61 | /> 62 | ); 63 | }; 64 | 65 | type SubHeaderProps = { 66 | title: string; 67 | textStyle?: StyleProp; 68 | containerStyle?: StyleProp; 69 | }; 70 | 71 | const SubHeader = ({ title, containerStyle, textStyle }: SubHeaderProps) => { 72 | return ( 73 | 74 | {title} 75 | 76 | ); 77 | }; 78 | 79 | const styles = StyleSheet.create({ 80 | headerContainer: { 81 | justifyContent: 'center', 82 | alignItems: 'center', 83 | backgroundColor: '#397af8', 84 | marginBottom: 20, 85 | width: '100%', 86 | paddingVertical: 15, 87 | }, 88 | heading: { 89 | color: 'white', 90 | fontSize: 22, 91 | fontWeight: 'bold', 92 | }, 93 | headerRight: { 94 | display: 'flex', 95 | flexDirection: 'row', 96 | marginTop: 5, 97 | }, 98 | subheaderText: { 99 | color: 'white', 100 | fontSize: 16, 101 | fontWeight: 'bold', 102 | }, 103 | }); 104 | 105 | export { Header, SubHeader }; 106 | -------------------------------------------------------------------------------- /src/config/colors.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | primary: '#397af8', 3 | primary1: '#4d86f7', 4 | primary2: '#6296f9', 5 | secondary: '#8F0CE8', 6 | secondary2: '#00B233', 7 | secondary3: '#00FF48', 8 | grey1: '#43484d', 9 | grey2: '#5e6977', 10 | grey3: '#86939e', 11 | grey4: '#bdc6cf', 12 | grey5: '#e1e8ee', 13 | dkGreyBg: '#232323', 14 | greyOutline: '#cbd2d9', 15 | }; 16 | -------------------------------------------------------------------------------- /src/config/fonts.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | ios: { 3 | regular: 'System', 4 | light: 'System', 5 | lightItalic: 'System', 6 | bold: 'System', 7 | boldItalic: 'System', 8 | black: 'System', 9 | blackItalic: 'System', 10 | }, 11 | android: { 12 | regular: 'Roboto', 13 | italic: 'Roboto-Italic', 14 | thin: 'Roboto-Thin', 15 | thinItalic: 'Roboto-ThinItalic', 16 | light: 'Roboto-Light', 17 | lightItalic: 'Roboto-LightItalic', 18 | medium: 'Roboto-Medium', 19 | mediumItalic: 'Roboto-MediumItalic', 20 | bold: 'Roboto-Bold', 21 | boldItalic: 'Roboto-BoldItalic', 22 | condensed: 'RobotoCondensed-Regular', 23 | condensedItalic: 'RobotoCondensed-Italic', 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /src/config/socialColors.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | facebook: '#3b5998', 3 | twitter: '#00aced', 4 | ['google-plus-official']: '#dd4b39', 5 | pinterest: '#cb2027', 6 | linkedin: '#007bb6', 7 | youtube: '#bb0000', 8 | vimeo: '#aad450', 9 | tumblr: '#32506d', 10 | instagram: '#517fa4', 11 | quora: '#a82400', 12 | foursquare: '#0072b1', 13 | wordpress: '#21759b', 14 | stumbleupon: '#EB4823', 15 | }; 16 | -------------------------------------------------------------------------------- /src/config/stack.ts: -------------------------------------------------------------------------------- 1 | import { Platform } from 'react-native'; 2 | 3 | // Fix scrolls on web platform 4 | 5 | export default Platform.select({ 6 | web: { headerMode: 'screen' }, 7 | default: {}, 8 | }); 9 | -------------------------------------------------------------------------------- /src/helpers/AssetsCaching.tsx: -------------------------------------------------------------------------------- 1 | import { Image } from 'react-native'; 2 | import { loadAsync } from 'expo-font'; 3 | import { Asset } from 'expo-asset'; 4 | 5 | export const cacheFonts = (fonts: string[]) => { 6 | return fonts.map((font) => loadAsync(font)); 7 | }; 8 | 9 | export const cacheImages = (images: string[]) => { 10 | return images.map((image) => { 11 | if (typeof image === 'string') { 12 | return Image.prefetch(image); 13 | } else { 14 | return Asset.fromModule(image).downloadAsync(); 15 | } 16 | }); 17 | }; 18 | -------------------------------------------------------------------------------- /src/helpers/AssetsCaching.web.tsx: -------------------------------------------------------------------------------- 1 | export const cacheImages = () => []; 2 | 3 | interface CacheFontType { 4 | [key: string]: any; 5 | } 6 | let cachedFonts: CacheFontType = {}; 7 | 8 | const cacheFont = (name: string, link: string) => { 9 | const styleBody = `@font-face { src: url(${link}); font-family: ${name}; }`; 10 | const style: HTMLStyleElement = document.createElement('style'); 11 | style.type = 'text/css'; 12 | if (style.style) { 13 | style.style.cssText = styleBody; 14 | } else { 15 | style.appendChild(document.createTextNode(styleBody)); 16 | } 17 | document.head.appendChild(style); 18 | cachedFonts[name] = link; 19 | }; 20 | 21 | export const cacheFonts = (fonts) => { 22 | let jobs = []; 23 | fonts.forEach((a) => { 24 | const fontName: string[] = Object.keys(a); 25 | if (!cachedFonts[fontName[0]]) { 26 | jobs.push(cacheFont(fontName, a[fontName[0]])); 27 | } 28 | }); 29 | return jobs; 30 | }; 31 | -------------------------------------------------------------------------------- /src/helpers/ThemeReducer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const initialState = { themeMode: 'light' }; 4 | export function ThemeReducer( 5 | state: { themeMode: string }, 6 | action: { type: string; payload: string } 7 | ) { 8 | const { payload } = action; 9 | switch (action.type) { 10 | case 'set-theme': 11 | return { ...state, themeMode: payload === 'light' ? 'light' : 'dark' }; 12 | default: 13 | return state; 14 | } 15 | } 16 | 17 | // added null in the create context so that tsc issues are fixed. Refer https://stackoverflow.com/questions/54577865/react-createcontext-issue-in-typescript/54667477 18 | export const ThemeReducerContext = React.createContext({ 19 | ThemeState: { themeMode: 'light' }, 20 | dispatch: ({ type, payload }) => {}, 21 | }); 22 | -------------------------------------------------------------------------------- /src/helpers/vector-fonts.ts: -------------------------------------------------------------------------------- 1 | import { 2 | FontAwesome, 3 | Ionicons, 4 | Entypo, 5 | SimpleLineIcons, 6 | MaterialIcons, 7 | MaterialCommunityIcons, 8 | } from '@expo/vector-icons'; 9 | 10 | export default [ 11 | FontAwesome.font, 12 | Ionicons.font, 13 | Entypo.font, 14 | SimpleLineIcons.font, 15 | MaterialIcons.font, 16 | MaterialCommunityIcons.font, 17 | ]; 18 | -------------------------------------------------------------------------------- /src/helpers/vector-fonts.web.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | FontAwesome: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf'), 4 | }, 5 | { 6 | Ionicons: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf'), 7 | }, 8 | { 9 | Entypo: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Entypo.ttf'), 10 | }, 11 | { 12 | SimpleLineIcons: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/SimpleLineIcons.ttf'), 13 | }, 14 | { 15 | MaterialIcons: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'), 16 | }, 17 | { 18 | MaterialCommunityIcons: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'), 19 | }, 20 | ]; 21 | -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/src/images/logo.png -------------------------------------------------------------------------------- /src/images/rating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/src/images/rating.png -------------------------------------------------------------------------------- /src/images/shirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/src/images/shirt.png -------------------------------------------------------------------------------- /src/images/water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-elements/react-native-elements-app/aff7ecbab0d117348efbe53aa41e16a46d7a5043/src/images/water.png -------------------------------------------------------------------------------- /src/navigation/DrawerNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { View, Image } from 'react-native'; 3 | import { 4 | DrawerContentScrollView, 5 | DrawerItemList, 6 | DrawerContentComponentProps, 7 | DrawerContentOptions, 8 | } from '@react-navigation/drawer'; 9 | import { ThemeContext, Text, Divider, Switch } from 'react-native-elements'; 10 | import { ThemeReducerContext } from '../helpers/ThemeReducer'; 11 | import { SafeAreaView } from 'react-native-safe-area-context'; 12 | 13 | function CustomContentComponent( 14 | props: DrawerContentComponentProps 15 | ) { 16 | const { ThemeState, dispatch } = useContext(ThemeReducerContext); 17 | const { theme } = useContext(ThemeContext); 18 | 19 | return ( 20 | 28 | 35 | 40 | 41 | 42 | 51 | 56 | Dark Mode 57 | 58 | 59 | { 66 | if (val === true) { 67 | dispatch({ type: 'set-theme', payload: 'dark' }); 68 | } else { 69 | dispatch({ type: 'set-theme', payload: 'light' }); 70 | } 71 | }} 72 | /> 73 | 74 | 75 | 76 | 77 | 78 | 79 | ); 80 | } 81 | 82 | function CustomDrawerContent( 83 | props: DrawerContentComponentProps 84 | ) { 85 | return ( 86 | 87 | 88 | 89 | ); 90 | } 91 | 92 | export default CustomDrawerContent; 93 | -------------------------------------------------------------------------------- /src/navigation/RootNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { NavigationContainer } from '@react-navigation/native'; 3 | import { createDrawerNavigator } from '@react-navigation/drawer'; 4 | import { ThemeContext } from 'react-native-elements'; 5 | import { ThemeReducerContext } from '../helpers/ThemeReducer'; 6 | import DrawerNavigator from './DrawerNavigator'; 7 | import Avatars from '../views/avatars'; 8 | import Cards from '../views/cards'; 9 | import Tiles from '../views/tiles'; 10 | import Buttons from '../views/buttons'; 11 | import Chips from '../views/chips'; 12 | import Lists from '../views/lists'; 13 | import Lists2 from '../views/lists2'; 14 | import Inputs from '../views/inputs'; 15 | import Image from '../views/image'; 16 | import LinearProgress from '../views/linearProgress'; 17 | import CircularSlider from '../views/circularSlider'; 18 | import Login from '../views/login'; 19 | import Pricing from '../views/pricing'; 20 | import Ratings from '../views/ratings'; 21 | import Settings from '../views/settings'; 22 | import SpeedDial from '../views/speedDial'; 23 | import Sliders from '../views/sliders'; 24 | import SocialIcons from '../views/social_icons'; 25 | import Fonts from '../views/fonts'; 26 | import BottomSheet from '../views/bottomsheet'; 27 | import Tooltip from '../views/tooltip'; 28 | import Dialogs from '../views/dialogs'; 29 | import Overlay from '../views/overlay'; 30 | import CheckBox from '../views/checkbox'; 31 | import FAB from '../views/fab'; 32 | import Text from '../views/text'; 33 | import Tabs from '../views/tabs'; 34 | import Badge from '../views/badge'; 35 | import WhatsappClone from '../views/whatsappClone'; 36 | import Divider from '../views/Divider'; 37 | 38 | const Drawer = createDrawerNavigator(); 39 | 40 | function RootNavigator() { 41 | const { ThemeState } = useContext(ThemeReducerContext); 42 | const { theme } = useContext(ThemeContext); 43 | 44 | return ( 45 | 59 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | ); 108 | } 109 | 110 | export default RootNavigator; 111 | -------------------------------------------------------------------------------- /src/views/Divider.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { Text, Divider, useTheme } from 'react-native-elements'; 3 | import { ScrollView, StyleSheet, View } from 'react-native'; 4 | import { Header, SubHeader } from '../components/header'; 5 | 6 | type DividerViewTypes = {}; 7 | 8 | const DividerView: React.FunctionComponent = (props) => { 9 | const { theme } = useTheme(); 10 | return ( 11 | <> 12 |
13 | 14 | 15 | 16 | Horizontal Divider 17 | 18 | 19 | Horizontal Divider with width and color 20 | 21 | 22 | 23 | 24 | 25 | 26 | Horizontal Divider with left inset 27 | 28 | 29 | 30 | Horizontal Divider with right inset 31 | 32 | 33 | 34 | Horizontal Divider with middle inset 35 | 36 | 37 | Welcome to RNE App 38 | 39 | 40 | 41 | Left text 42 | 43 | Right text 44 | 45 | 46 | Left text 47 | 48 | Right text 49 | 50 | 51 | 52 | Left text 53 | 58 | Right text 59 | 60 | 61 | 62 | ); 63 | }; 64 | 65 | const styles = StyleSheet.create({ 66 | horizontal: { 67 | marginBottom: 10, 68 | }, 69 | horizontalText: { 70 | textAlign: 'center', 71 | fontSize: 16, 72 | marginVertical: 10, 73 | }, 74 | vertical: { 75 | marginBottom: 10, 76 | display: 'flex', 77 | flexDirection: 'row', 78 | justifyContent: 'space-evenly', 79 | }, 80 | }); 81 | 82 | export default DividerView; 83 | -------------------------------------------------------------------------------- /src/views/avatars.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { View, ScrollView } from 'react-native'; 3 | import _ from 'lodash'; 4 | import { Avatar } from 'react-native-elements'; 5 | import { Header, SubHeader } from '../components/header'; 6 | 7 | type AvatarData = { 8 | image_url: string; 9 | }; 10 | 11 | const dataList: AvatarData[] = [ 12 | { 13 | image_url: 'https://uifaces.co/our-content/donated/6MWH9Xi_.jpg', 14 | }, 15 | { 16 | image_url: 'https://randomuser.me/api/portraits/men/36.jpg', 17 | }, 18 | { 19 | image_url: 20 | 'https://cdn.pixabay.com/photo/2019/11/03/20/11/portrait-4599553__340.jpg', 21 | }, 22 | { 23 | image_url: 24 | 'https://cdn.pixabay.com/photo/2014/09/17/20/03/profile-449912__340.jpg', 25 | }, 26 | { 27 | image_url: 28 | 'https://cdn.pixabay.com/photo/2020/09/18/05/58/lights-5580916__340.jpg', 29 | }, 30 | { 31 | image_url: 32 | 'https://cdn.pixabay.com/photo/2016/11/21/12/42/beard-1845166_1280.jpg', 33 | }, 34 | ]; 35 | 36 | type AvatarComponentProps = {}; 37 | 38 | const Avatars: React.FunctionComponent = () => { 39 | return ( 40 | <> 41 |
42 | 43 | 44 | {_.chunk(dataList, 3).map((chunk, chunkIndex) => ( 45 | 53 | {chunk.map((l, i) => ( 54 | 60 | ))} 61 | 62 | ))} 63 | 64 | 71 | 77 | 83 | 89 | 90 | 97 | 111 | 121 | 131 | 132 | 133 | 134 | 141 | 147 | 153 | 159 | 160 | 161 | 162 | 169 | 175 | 176 | 177 | 184 | 185 | 186 | 187 | 188 | 189 | ); 190 | }; 191 | 192 | export default Avatars; 193 | -------------------------------------------------------------------------------- /src/views/badge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text, View, ScrollView } from 'react-native'; 3 | import { Avatar, Badge, Icon, withBadge } from 'react-native-elements'; 4 | import { Header, SubHeader } from '../components/header'; 5 | 6 | const BadgedIcon = withBadge(15)(Icon); 7 | 8 | const badgeComponent = () => { 9 | return ( 10 | <> 11 |
12 | 13 | 14 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 36 | 37 | 38 | 39 | 40 | 41 | 48 | Success 49 | Error 50 | Primary 51 | Warning 52 | 53 | 54 | 55 | 63 | 64 | 69 | 73 | 74 | 75 | 76 | 83 | 88 | 89 | 90 | 91 | 92 | ); 93 | }; 94 | 95 | export default badgeComponent; 96 | -------------------------------------------------------------------------------- /src/views/bottomsheet.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { BottomSheet, Button, ListItem } from 'react-native-elements'; 3 | import { StyleSheet } from 'react-native'; 4 | import { Header } from '../components/header'; 5 | 6 | type BottomSheetComponentProps = {}; 7 | 8 | const BottomSheetComponent: React.FunctionComponent = () => { 9 | const [isVisible, setIsVisible] = useState(false); 10 | const list = [ 11 | { title: 'List Item 1' }, 12 | { title: 'List Item 2' }, 13 | { 14 | title: 'Cancel', 15 | containerStyle: { backgroundColor: 'red' }, 16 | titleStyle: { color: 'white' }, 17 | onPress: () => setIsVisible(false), 18 | }, 19 | ]; 20 | 21 | return ( 22 | <> 23 |
24 |