Demo app for React Native Elements (w/ React Native Web)

Last update: Jul 30, 2022

React Native Elements App

React Native Elements App

Mobile App

This is the Demo app for React Native Elements built with Expo. The purpose of this app is to demonstrate the usage of the various UI components that React Native Elements provides out of the box.

This app also works on the web platform using React Native Web. You can check out the live website here. 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, which reduces the effort required to build an app once and deploy it anywhere.

Getting Started

Run it locally

  1. Install Expo CLI
[sudo] npm install -g expo-cli

If permissions errors then please use --unsafe-perm=true flag too npm/npm#16766

  1. Clone the project
git clone https://github.com/react-native-elements/react-native-elements-app.git
  1. Install dependencies
cd react-native-elements-app

# Using yarn
yarn install

# Using npm
npm install
  1. Run the cross-platform app (uses Expo)
# Using yarn
yarn start

# Using npm
npm start

Deploy Web App

First you must set correct publicPath in app.web-build.json. Next you must build the web app using:

yarn build:web

Once you have built it, you can see generated web-build folder.

This folder can be hosted as static website. For example, you can publish on Github Pages via gh-pages cli.

yarn deploy

Note: Don't forget to add or change "homepage" key in your package.json!

Ejecting

The mobile app is built using Expo. If you would like to eject, you can run the following command:

# Using Yarn
yarn eject

# Using npm
npm run eject

We highly recommend you read the official Expo ejection docs before proceeding, as the action of ejecting is not reversible.

Major contributors:

React Native Elements

This app is built using 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.

You can install react-native-elements in your app using:

# Using yarn
yarn add react-native-elements

# Using npm
npm install react-native-elements --save

Feedback

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.

GitHub

https://github.com/dabit3/react-native-hackathon-starter
Comments
  • 1. Partial web platform support

    Good news! Still working on native platforms via expo! (Tested on Android 8.1 and iOS 12.1.4)

    1. Rewrited scripts in package.json. Use expo start for native platforms (expo-cli must be installed) and npm start for Web platform.

    2. Fixed 3 icons on Settings screen. I don't know why but the same icons have a separate names. e.g. see ios-plane here and ios-airplane here.

    3. I could not start MaterialCommunityIcons on web (((

    4. I'm surprised that you use icons from react-native-vector-icons instead RNE Icon ))) e.g. here. Fixed.

    5. Updated SDK to v32. I'm confused that in app using expo v32 but RN SDK v31.

    Bad news now

    1. Non usable navigation for web. Address place in browser are not changing by screen changes.

    2. UI. It takes a lot of work (((

    I will return to work on this repo later

    Reviewed by oxyii at 2019-03-06 04:22
  • 2. Addition of new Chip Showcase Page

    Upon implementation of the new Chip component, I have incorporated this into the demo app with a new page dedicated to chips and their different types. Here's a quick look at what it looks like:

    drawing

    This PR is related to this Idea Proposal Issue (https://github.com/react-native-elements/react-native-elements/issues/2879) and this Chip Component PR (https://github.com/react-native-elements/react-native-elements/pull/2890) on the RNE repository.

    Kindly review this PR. Looking forward to a merge :)

    Reviewed by Dhananjayan-PN at 2021-03-20 21:20
  • 3. Add new components support

    There are some of the components which are officially there in the package but not shown in the application so I will to add the support for missing components and define views/add components for them. Thanks and hope this is not assigned to anyone. Components/Views -

    • [x] Checkbox
    • [x] Tooltip
    • [x] Overlay
    • [x] Text Heading
    Reviewed by khushal87 at 2021-03-15 19:08
  • 4. Maintain a expo-free branch

    Re https://github.com/react-native-elements/react-native-elements-app/issues/64, https://github.com/react-native-elements/react-native-elements-app/issues/49, it is clear that people have difficulties using this app without expo.

    Is there any interests having a branch with expo removed? I could prepare a PR if needed.

    Reviewed by ratson at 2019-03-31 16:16
  • 5. Error with expo 34.0.0

    Please provide an updated example of the demo app with the latest expo version 34.0.0. Actually with this version of demo app if you try to upgrade expo There's a lot of errors.

    Reviewed by jgutierro at 2019-08-07 15:42
  • 6. Extremely slow on real iOS10 device

    Dear all,

    I've been running this project on real device, but faced an extremely slow response while clicking side menu and the 3rd tabbar. It looks like it's "rendering" a real large UI set.

    Device: iPhone 6s OS: iOS 10 Toolchain: XCode 8 (Didn't change compile flags)

    Reviewed by ssssssssssss at 2016-09-27 06:05
  • 7. react-native-elements issue

    Hi I am cloning the same code of your git and import visual studio and install "npm install --save" then go to run "yarn start" it is running but it is showing below issue please solve this my problem Sir

    Screenshot from 2019-11-15 12-25-26

    Reviewed by Ranjithkumartheegala at 2019-11-15 07:08
  • 8. Migrating class based components to functional components

    Currently some of the components in the views are Class based as per the latest Pull, Moving to Functional component based approach will be a great stuff and I believe that will be relevant for the application.

    Example:

    • pricing.js
    • ratings.js
    • settings.js(migrating will also solve the switch issue as it will be easy fix)
    • profile.js
    • inputs.js
    • fonts;js
    • button.js
    • login/screen2.js,screen2.js,index.js
    • lists

    As you can notice that some of them are Functional components and some are Class based, so these can be made uniform.

    Reviewed by khushal87 at 2021-03-15 07:40
  • 9. Addition of Dialogs Page

    Summary

    Upon implementation of the new Dialog component, introduced in this Issue and implemented in this PR, I have incorporated this into the demo app with a new page dedicated to dialogs and their different types. Here's a quick look at what it looks like:

    Reviewed by Dhananjayan-PN at 2021-03-25 00:52
  • 10. Deploy RNW app to gh-pages

    Currently, I have it setup so that when you run npm run deploy, it uses the gh-pages npm package to publish the readme to the website here: https://react-native-elements.github.io/react-native-elements-app/

    But we need the RNW project to be deployed on gh-pages instead.

    @oxyii can you own this issue since you have it working on your fork already?

    Reviewed by Monte9 at 2019-03-29 05:59
  • 11. Eject Problem occured.

    https://github.com/react-native-training/react-native-elements-app I have used react-native-elements-app project as reference to build my own app, but i am facing problems when ejecting, need help.

    Reviewed by Biplovkumar at 2018-10-17 19:09
  • 12. Cannot run the sourcebase from new clone

    Hi team, please help revise the README and help resolve the issue;

    Unable to start your application. Please refer to https://expo.fyi/no-registered-application for more information.
    at node_modules\react-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning
    at node_modules\react-native\Libraries\LogBox\LogBox.js:63:8 in warnImpl
    at node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
    at node_modules\expo\build\environment\react-native-logs.fx.js:18:4 in warn
    at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:200:6 in runApplication
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
    at [native code]:null in callFunctionReturnFlushedQueue
    
    TypeError: undefined is not an object (evaluating '_expoModulesCore.NativeModulesProxy.ExpoSplashScreen')
    at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
    at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
    at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
    at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
    at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
    at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
    at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
    at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
    at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
    at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
    at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
    at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
    at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0
    at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
    at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
    at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
    at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
    at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
    at [native code]:null in flushedQueue
    at [native code]:null in invokeCallbackAndReturnFlushedQueue
    
    D:\Demos\react-native-elements-app>react-native info
    info Fetching system and libraries information...
    System:
        OS: Windows 10 10.0.19042
      Binaries:
        Node: 14.17.4 - D:\Program Files\nodejs\node.EXE
        Yarn: 1.22.4 - D:\Roaming\npm\yarn.CMD
        npm: 6.14.5 - D:\Roaming\npm\npm.CMD
        Watchman: Not Found
      SDKs:
        Android SDK:
          Android NDK: 18.1.5063045
        Windows SDK:
          AllowDevelopmentWithoutDevLicense: Enabled
          AllowAllTrustedApps: Enabled
      IDEs:
        Android Studio: Not Found
        Visual Studio: 16.8.30907.101 (Visual Studio Professional 2019)
      Languages:
        Java: 14.0.1 - /cygdrive/c/Program Files/OpenJDK/jdk-14.0.1/bin/javac
      npmPackages:
        @react-native-community/cli: Not Found
        react: 16.13.1 => 16.13.1
        react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
        react-native-windows: Not Found
    

    Cheers,

    Reviewed by kelvin-dev at 2022-01-15 20:38
  • 13. App fails to start on Apple device

    I followed the steps

    1. Cloned repo
    2. Checked the default branch to be next
    3. npm i
    4. npm start

    No errors seen so far, when I scan the QR code from my Apple phone, I see an error on the screen and I see the following error in the console

    Error: Asset not found: /Users/amit/dev/react-native-elements-app/assets/images/icon.png for platform: null
        at /Users/amit/dev/react-native-elements-app/node_modules/metro/src/Assets.js:188:13
        at Generator.next (<anonymous>)
        at asyncGeneratorStep (/Users/amit/dev/react-native-elements-app/node_modules/metro/src/Assets.js:52:24)
        at _next (/Users/amit/dev/react-native-elements-app/node_modules/metro/src/Assets.js:72:9)
    iOS Bundling failed 503ms
    While trying to resolve module `react-native-elements` from file `/Users/amit/dev/react-native-elements-app/App.tsx`, the package `/Users/amit/dev/react-native-elements-app/node_modules/react-native-elements/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/amit/dev/react-native-elements-app/node_modules/react-native-elements/dist/index.js`. Indeed, none of these files exist:
    
      * /Users/amit/dev/react-native-elements-app/node_modules/react-native-elements/dist/index.js(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
      * /Users/amit/dev/react-native-elements-app/node_modules/react-native-elements/dist/index.js/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
    
    Reviewed by amitrke at 2021-09-06 21:38
  • 14. Licensing?

    Hi, I was just wondering if I use this project as a base starting point for my application, is this repo under the same MIT license as react-native-elements? I don't see anything about licenses and how this could be used as a starting point for a commercial product. Thanks!

    Reviewed by Sammybeau at 2021-08-18 18:01
  • 15. Can't resolve 'react-native-elements-universe'

    Followed the steps in order but getting this error when I click "Run in web browser".

    Failed to compile.
    C:/Users/User/Downloads/react-native-elements-app/src/views/circularSlider.tsx
    Module not found: Can't resolve 'react-native-elements-universe' in 'C:\Users\User\Downloads\react-native-elements-app\src\views'
    

    When running on my Android I get "Something went wrong" then "Network response timed out".

    Reviewed by asheroto at 2021-08-10 17:27
  • 16. Fix strict Typescript issue in the demo-app

    Currently, there are 150+ errors/warnings coming up from the app when we run tsc --watch on strict mode true. Therefore, I want to resolve them so that users will have a clean experience in the app.

    Can I work on this issue? @flyingcircle @pranshuchittora

    Reviewed by khushal87 at 2021-04-11 05:36
🚀🚀🚀Build universal cross-platform apps with React Native. Includes latest iOS, tvOS, Android, Android TV, Android Wear, Web, Tizen TV, Tizen Watch, Tizen Mobile, LG webOS, macOS/OSX, Windows, KaiOS, FirefoxOS Firefox TV platforms
🚀🚀🚀Build universal cross-platform apps with React Native. Includes latest iOS, tvOS, Android, Android TV, Android Wear, Web, Tizen TV, Tizen Watch, Tizen Mobile, LG webOS, macOS/OSX, Windows, KaiOS, FirefoxOS Firefox TV platforms

build universal cross-platform apps with react native Introduction Video Quick Start • Features • Templates • Plugins • Integrations • JSON Configurat

Aug 1, 2022
Pepperoni - React Native App Starter Kit for Android and iOS
Pepperoni - React Native App Starter Kit for Android and iOS

Futurice React Native Starter Kit ⚠️ Deprecation Warning Dear community, as time moved on so did React Native and we've not been able to provide conti

Jul 29, 2022
Aug 7, 2022
React Native Starter App with NativeBase + CodePush + Redux
React Native Starter App with NativeBase + CodePush + Redux

Discontinued in favour of ReactNativeSeed.com Native Starter Kit v6.1.0 A Starter Kit for React Native + NativeBase + React Navigation + Redux + CodeP

Jul 24, 2022
Boilerplate for iOS app development with React Native, ES6 and Reflux
Boilerplate for iOS app development with React Native, ES6 and Reflux

react-native, es6 & reflux boilerplate As the very long repo title indicates, this is a boilerplate repository that includes the following: ES6-to-ES5

Apr 5, 2022
cross platform app with react in a monorepo

react-native-web-workspace An minimum boilerplate that has configured a native app running also on the web in the same monorepo. For a thorough discus

Jul 24, 2022
React Native Typescript starter kit / template (Redux Thunk + React Native Navigation v7 + TSLint)
React Native Typescript starter kit / template (Redux Thunk + React Native Navigation v7 + TSLint)

React Native Template - TypeScript An opinionated React Native Starter Kit with React Native Navigation + Redux + Airbnb TSLint to build iOS and Andro

Jul 30, 2022
React Native + React-Redux + Native Base + Code Push

React-Native-Starter-Pack React Native + React-Redux + Native Base + Code Push ##Setting Up Project npm i -g rninit rninit init <new-app-name> --sourc

Feb 14, 2022
React Native Boilerplate - Redux + Saga + Reselect + redux-persist + react-navigation + TypeScript

React Native Boilerplate with Typescript Overview This React Native template for building solid applications through SOC(separation of concerns) betwe

Jul 29, 2022
Infinite Red's cutting edge React Native project boilerplate, along with a CLI, component/model generators, and more!
Infinite Red's cutting edge React Native project boilerplate, along with a CLI, component/model generators, and more!

Ignite - the hottest React Native boilerplate Battle-tested React Native boilerplate The culmination of five years of constant React Native developmen

Aug 9, 2022
React Native Meteor Boilerplate

React Native Meteor Boilerplate This is a simple way to get started building an app with React Native and Meteor. It is opinionated to make it easy fo

Jul 19, 2022
A React Native template for building solid applications, using JavaScript or Typescript (you choose).
A React Native template for building solid applications, using JavaScript or Typescript (you choose).

TheCodingMachine React Native boilerplate This project is a React Native boilerplate that can be used to kickstart a mobile application. The boilerpla

Aug 3, 2022
Get your favorite boilerplate of React Native

ReactNativeSeed.com This repo is used to collect stars for ReactNativeSeed.com. About ReactNativeSeed.com provides you with a number of React Native B

Jul 7, 2022
🚀A powerful react native starter template that bootstraps development of your mobile application
🚀A powerful react native starter template that bootstraps development of your mobile application

React Native Starter ?? View Demo | Download | More templates | Support forum You're viewing the new and updated version of React Native Starter, prev

Aug 7, 2022
Boilerplate of a React Native project in Typescript.
Boilerplate of a React Native project in Typescript.

ReactNativeTS ⚠️ Not maintained anymore, better check Microsoft/TypeScript-React-Native-Starter. Minimal template of a React Native project with Types

Jul 3, 2022
Professional react-native starter kit with everything you'll ever need to deploy rock solid apps
Professional react-native starter kit with everything you'll ever need to deploy rock solid apps

WARNING This starter kit has been deprecated and is no longer being actively maintained by Ueno. React Native Starter The Professional React Native St

Jul 27, 2022
Configuration to build React Native apps with ES6 using webpack and Babel

React Native in ES6 with webpack and Babel DEPRECATED! It's possible to write React Native apps in ES6+ using babel-loader and webpack. Check better a

Feb 14, 2022
👾 Clean and minimalist React Native template for a quick start with TypeScript.

?? React Native Template TypeScript Clean and minimalist React Native template for a quick start with TypeScript. ⭐ Features Elegant usage directly wi

Aug 8, 2022
React Native Airbnb Template

?? React Native Airbnb Template Clean and minimalist React Native template for a quick start. ⭐ Features Elegant usage directly within the React Nativ

Feb 14, 2022