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


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
  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!


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


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.

  • Partial web platform support

    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

    opened by oxyii 24
  • Addition of new Chip Showcase Page

    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:


    This PR is related to this Idea Proposal Issue ( and this Chip Component PR ( on the RNE repository.

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

    opened by Dhananjayan-PN 16
  • Add new components support

    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
    opened by khushal87 16
  • Maintain a expo-free branch

    Maintain a expo-free branch

    Re,, 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.

    opened by ratson 11
  • Error with expo 34.0.0

    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.

    opened by jgutierro 9
  • Extremely slow on real iOS10 device

    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)

    opened by ssssssssssss 9
  • react-native-elements issue

    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

    opened by Ranjithkumartheegala 8
  • Migrating class based components to functional components

    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.


    • 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.

    opened by khushal87 7
  • Addition of Dialogs Page

    Addition of Dialogs Page


    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:

    opened by Dhananjayan-PN 6
  • Deploy RNW app to gh-pages

    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:

    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?

    bug improve 
    opened by Monte9 6
  • Eject Problem occured.

    Eject Problem occured. I have used react-native-elements-app project as reference to build my own app, but i am facing problems when ejecting, need help.

    opened by Biplovkumar 6
  • Cannot run the sourcebase from new clone

    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 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...
        OS: Windows 10 10.0.19042
        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
        Android SDK:
          Android NDK: 18.1.5063045
        Windows SDK:
          AllowDevelopmentWithoutDevLicense: Enabled
          AllowAllTrustedApps: Enabled
        Android Studio: Not Found
        Visual Studio: 16.8.30907.101 (Visual Studio Professional 2019)
        Java: 14.0.1 - /cygdrive/c/Program Files/OpenJDK/jdk-14.0.1/bin/javac
        @react-native-community/cli: Not Found
        react: 16.13.1 => 16.13.1
        react-native: => 0.63.2
        react-native-windows: Not Found


    opened by kelvin-dev 2
  • App fails to start on Apple device

    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 (<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)
    opened by amitrke 6
  • 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!

    opened by Sammybeau 1
  • Can't resolve 'react-native-elements-universe'

    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.
    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".

    opened by asheroto 2
  • Fix strict Typescript issue in the demo-app

    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

    opened by khushal87 0
React Native Elements
React Native Elements
🚀🚀🚀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

Pavel Jacko 1.6k Jan 7, 2023
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

Futurice 4.6k Jan 4, 2023
Barton Hammond 4.6k Jan 2, 2023
React Native Starter App with NativeBase + CodePush + Redux

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

null 1.6k Dec 9, 2022
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

Filipe Dobreira 141 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

Zetta Garcia 77 Jul 24, 2022
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

Amit Mangal 269 Dec 29, 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

Simar 40 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

Mengheang Rat 14 Oct 5, 2022
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

Infinite Red, Inc. 14.7k Jan 5, 2023
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

Spencer Carli 634 Nov 21, 2022
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

TheCodingMachine 3.4k Jan 4, 2023
Get your favorite boilerplate of React Native This repo is used to collect stars for About provides you with a number of React Native B

GeekyAnts 655 Dec 6, 2022
🚀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

Flatlogic 2k Jan 5, 2023
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

Patricio López Juri 362 Nov 21, 2022
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

Ueno: A full-service agency 577 Oct 26, 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

Roman Liutikov 236 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

React Native Community 1.7k Jan 3, 2023
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

Ivan Boldyrev 13 Feb 14, 2022