creativetimofficial / now-ui-react-native

Now UI Pro React Native

Now UI React Native

Now UI React Native is a fully coded app template built over Galio.io, React Native and Expo to allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components in Galio to make it look like Now UI's KIT, minimalistic and easy to use.

Start your development with a badass Design System for React Native inspired by Now UI KIT. If you like Now 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.

FULLY CODED COMPONENTS

Now UI React Native features over 200 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.

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.

Components & Cards

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

View all components/cards here.

Example Screens

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.

View all screens here.

Let us know your thoughts below. And good luck with development!

Table of Contents

• Versions
• Demo
• Quick Start
• Documentation
• File Structure
• OS Support
• Resources
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Versions

HTML	React	Angular

Demo

Home Screen	Profile Screen	Elements Screen	Register Screen

• Start page
• How to install our free demo

View more

Quick start

• Try it out on Expo (Simulator for iOS or even your physical device if you have an Android)
• Download from Creative Tim

Documentation

The documentation for the Now UI React Native is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

now-ui-react-native/
├── App.js
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── app.json
├── assets/
│   ├── css/
│   ├── font/
│   ├── fonts/
│   │   └── nucleo
│   ├── icon.png
│   ├── imgs/
│   ├── nuk-icons/
│   │   ├── png/
│   │   └── svg/
│   └── splash.png
├── babel.config.js
├── components/
│   ├── Button.js
│   ├── Card.js
│   ├── Checkbox.js
│   ├── DrawerItem.js
│   ├── Header.js
│   ├── Icon.js
│   ├── Img.js
│   ├── Input.js
│   ├── Select.js
│   ├── Sliders.js
│   ├── Switch.js
│   ├── Tabs.js
│   └── index.js
├── constants/
│   ├── Images.js
│   ├── Theme.js
│   ├── articles.js
│   ├── index.js
│   ├── tabs.js
│   └── utils.js
├── navigation/
│   ├── Menu.js
│   └── Screens.js
├── package.json
└── screens/
    ├── Articles.js
    ├── Components.js
    ├── Home.js
    ├── Onboarding.js
    ├── Pro.js
    ├── Profile.js
    ├── Register.js
    └── Settings.js

OS Support

At present, we officially aim to support the last two versions of the following operating systems:

Resources

• Demo: https://demos.creative-tim.com/now-ui-react-native
• Download Page: https://www.creative-tim.com/product/now-ui-react-native
• Documentation: https://demos.creative-tim.com/now-ui-react-native/docs
• License Agreement: https://www.creative-tim.com/license
• Support: https://www.creative-tim.com/contact-us
• Issues: Github Issues Page
• Now UI Kit - For Front End Development
• Dashboards:

HTML	React

Angular	Laravel

Reporting Issues

We use GitHub Issues as the official bug tracker for the Now UI React Native. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Now UI React Native.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

• Copyright 2019 Creative Tim (https://www.creative-tim.com/)

• Licensed under MIT (https://github.com/creativetimofficial/now-ui-react-native/blob/master/LICENSE.md)

Useful Links

• Tutorials
• Affiliate Program (earn money)
• Blog Creative Tim
• Free Products from Creative Tim
• Premium Products from Creative Tim
• React Products from Creative Tim
• Angular Products from Creative Tim
• VueJS Products from Creative Tim
• More products from Creative Tim
• Check our Bundles here

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Instagram: https://www.instagram.com/CreativeTimOfficial

now-ui-react-native's Issues

Downloading JavaScript bundle 100% stuck

I have issues after adding await on Font.loadAsync({ 'montserrat-regular': require('./assets/font/Montserrat-Regular.ttf'), 'montserrat-bold': require('./assets/font/Montserrat-Bold.ttf'), });

I've been restarting react-native debugger but still not work, what should I do ?

npm ver 6.14.5
expo ver 3.12.5
expo client ver 2.15.4
PC windows 10
Android ver 9
device Xiaomi A1

Error: Invalid hook call

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

This error is located at:
in DevLoadingView
in DevAppContainer (at AppContainer.js:121)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
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/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at [native code]:null in commitRootImpl
at [native code]:null in performSyncWorkOnRoot
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication
at [native code]:null in callFunctionReturnFlushedQueue

[Bug] Template not running on most recent version of Expo GO app.

Version

1.5.1

Reproduction link

http://thereisntaurl.com/non-applicable

Operating System

iOS

Device

iPhone14

Browser & Version

N/A

Steps to reproduce

NPM i
NPM run start
Open Expo Go on mobile device
**Error, fails to run on development server

What is expected?

The template base project should run with the supported version of expo go.

What is actually happening?

The loading in expo never stops

---

Solution

Update packages as needed to restore Expo Go compatibility.

Additional comments

No url provided as this issue occurs out of the box with the template.

Reason: Cannot find module 'firebase\package.json'

PLEASE HELP!!!! I have been stuck on this error for days and days and can not figure it out.
I am using a managed expo environment in react native and can not get firebase to work...
This is the error I get when I start metro bundler (npm start)

warn Package firebase has been ignored because it contains invalid configuration. Reason: Cannot find module 'firebase\package.json'
Require stack:

• C:\Users\hunte\FlyExpo\node_modules\react-native\node_modules@react-native-community\cli\build\tools\config\resolveNodeModuleDir.js
• C:\Users\hunte\FlyExpo\node_modules\react-native\node_modules@react-native-community\cli\build\tools\releaseChecker\index.js
• C:\Users\hunte\FlyExpo\node_modules\react-native\node_modules@react-native-community\cli\build\commands\start\runServer.js
• C:\Users\hunte\FlyExpo\node_modules\react-native\node_modules@react-native-community\cli\build\commands\start\start.js
• C:\Users\hunte\FlyExpo\node_modules\react-native\node_modules@react-native-community\cli\build\commands\index.js
• C:\Users\hunte\FlyExpo\node_modules\react-native\node_modules@react-native-community\cli\build\index.js
• C:\Users\hunte\FlyExpo\node_modules\react-native\local-cli\cli.js

App.js
import React from "react";
import WelcomeScreen from "./app/screens/WelcomeScreen";
import "react-native-gesture-handler";
import * as firebase from "firebase";

src = "https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js";

var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

export default function App() {
return ;
}

package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-native-firebase/app": "^8.4.2",
"@react-native-firebase/auth": "^9.2.2",
"@react-navigation/bottom-tabs": "^5.8.0",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"apisauce": "^1.1.2",
"axios": "^0.20.0",
"date-fns": "^2.16.1",
"expo": "~38.0.8",
"expo-font": "^8.2.2",
"expo-splash-screen": "^0.5.0",
"expo-status-bar": "^1.0.2",
"expo-updates": "~0.2.8",
"firebase": "7.9.0",
"install": "^0.13.0",
"lodash": "^4.17.20",
"native-base": "^2.13.14",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-gesture-handler": "^1.6.1",
"react-native-platform-touchable": "^1.1.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.7",
"react-native-screens": "^2.9.0",
"react-native-status-bar-height": "^2.5.0",
"react-native-svg": "^12.1.0",
"react-native-tab-view": "^2.15.1",
"react-native-unimodules": "~0.10.1",
"react-native-vector-icons": "^7.0.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-axios-middleware": "^4.0.1",
"redux-persist": "^6.0.0",
"rm": "^0.1.8",
"victory-native": "^35.0.1"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}

Unable to resolve "react-native-gesture-handler" from "node_modules/react-navigation/node_modules/@react-navigation/native/lib/module/Scrollables.js"

Screen: Elements

In sketch acest screen se numeste Components. Imaginile se iau din folderul assets/img din produsul https://www.creative-tim.com/product/now-ui-kit.

Se face totul din screenul de components pana la Cards!!

Iconitele se creaza cu icomoon.io si fonturile se iau din assets/fonts sau ceva de genul din produsul cu linkul de mai sus

TODO

• update EXPO and libraries

• add albums section

• change sidebar styling

Unable to resolve "react-native-screens" from "node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js" Failed building JavaScript bundle.

Unable to resolve "react-native-screens" from "node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js"
Failed building JavaScript bundle.

tried this solution but it doesnt work

" removing node_module, .expo and package-lock.json and then reinstall all the packages and start the project by using the following command: expo r -c"

Node Version - v12.9.0

[Bug] Unable to resolve "react-native/Libraries/vendor/core/isEmpty" from "node_modules\react-native-modal-dropdown\node_modules\deprecated-react-native-listview\index.js"

Version

1.3

Reproduction link

https://github.com/creativetimofficial/now-ui-react-native/releases/tag/v1.3.0

Operating System

windows 10

Device

expo - android

Browser & Version

chrome

Steps to reproduce

https://github.com/creativetimofficial/now-ui-react-native/releases/tag/v1.3.0

What is expected?

Unable to resolve "react-native/Libraries/vendor/core/isEmpty" from "node_modules\react-native-modal-dropdown\node_modules\deprecated-react-native-listview\index.js"

What is actually happening?

Unable to resolve "react-native/Libraries/vendor/core/isEmpty" from "node_modules\react-native-modal-dropdown\node_modules\deprecated-react-native-listview\index.js"

---

Solution

Additional comments

Not working with newer versions of expo SDK

Feature: Sidebar

Imaginile se iau din folderul assets/img din produsul https://www.creative-tim.com/product/now-ui-kit.

Ordinea linkurilor din sidebar este urmatoarea:

• #2 Home
• #3 Profile
• #4 Account
• #5 Elements
• #6 Articles
• Getting Started ( aici se va pune link gol la inceput in faza de dev, iar cand produsul este in faza production se va pune link catre documentatia reala a produsului )
• Log Out ( aici se va pune link direct catre #1 )

Iconitele se creaza cu icomoon.io si fonturile se iau din assets/fonts sau ceva de genul din produsul cu linkul de mai sus

• change sidebar color
• change order of items
• add logout option + go to onboarding page
• rename elements page to components and all references
• change icons for sidebar items

[Bug] You started loading the font "montserrat-regular", but used it before it finished loading.

Version

1.0.1

Reproduction link

https://github.com/creativetimofficial/now-ui-react-native#technical-support-or-questions

Operating System

ANDROID

Device

Redmi 4

Browser & Version

Expo

Steps to reproduce

clone the repository of free code
run npm install
run expo start

What is expected?

should run the app

What is actually happening?

getting error

---

Solution

Additional comments

You started loading the font "montserrat-regular", but used it before it finished loading.

• You need to wait for Font.loadAsync to complete before using the font.

• We recommend loading all fonts before rendering the app, and rendering only Expo.AppLoading while waiting for loading to complete.

Screen: Articles

In sketch acest screen se numeste Components. Imaginile se iau din folderul assets/img din produsul https://www.creative-tim.com/product/now-ui-kit.

Se face din screenul Components de la Cards in jos totul!!

Iconitele se creaza cu icomoon.io si fonturile se iau din assets/fonts sau ceva de genul din produsul cu linkul de mai sus

To do:

• change articles image
• add full articles card

Screen: Onboarding

Imaginea de fundal se ia din folderul assets/img din produsul https://www.creative-tim.com/product/now-ui-kit, acelasi lucru si pentru logo-uri.

• change images
• change text
• add open sans font

Navigate to a different page on Pro.js page

Hi, I need to navigate to register page on Pro.js page the first page, but I am not sure how to do this

in App.js we have flowing NavigationContainer but how to add the register page to it as well?

    <NavigationContainer>
    <GalioProvider theme={nowTheme}>
      <Block flex>
        <Screens />
      </Block>
    </GalioProvider>
    </NavigationContainer>

Then in pro.js page block centre

        <Block center>
          <Button
          textStyle={{ fontFamily: 'montserrat-regular', fontSize: 12 }}
          style={styles.button}
          onPress={() => navigation.navigate("Register")}
        >

When I do above I get below error:

The action 'NAVIGATE' with payload {"name":"Register"} was not handled by any navigator.

Do you have a screen named 'Register'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won't be shown in production.

I am not sure what to change in above to move to register page rather than home page.

Screen: Account

Imaginile se iau din folderul assets/img din produsul https://www.creative-tim.com/product/now-ui-kit.

Iconitele se creaza cu icomoon.io si fonturile se iau din assets/fonts sau ceva de genul din produsul cu linkul de mai sus

• change background image and reference
• set the image as image background
• change icons

Feature: Package.json

Aici trebuie sa te asiguri ca ai toate dependintele la ultima versiune.

• update to expo 34
• update file app.json
• update file App.js

Screen: Profile

Imaginile se iau din folderul assets/img din produsul https://www.creative-tim.com/product/now-ui-kit.

Iconitele se creaza cu icomoon.io si fonturile se iau din assets/fonts sau ceva de genul din produsul cu linkul de mai sus

• change background image and shadow color
• change texts
• styling the page

Feature: Documentation

• install docsify
• generate documentation
• add sidebar
• change text README

warn Package firebase has been ignored because it contains invalid configuration. Reason: Cannot find module 'firebase\package.json'

warn Package firebase has been ignored because it contains invalid configuration. Reason: Cannot find module 'firebase\package.json' Require stack: - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\tools\config\resolveNodeModuleDir.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\tools\releaseChecker\index.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\runServer.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\server.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\commands\index.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\index.js - E:\Expo\base\node_modules\react-native\local-cli\cli.js warn Package react-native-reanimated has been ignored because it contains invalid configuration. Reason: Cannot find module 'react-native-reanimated\package.json' Require stack: - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\tools\config\resolveNodeModuleDir.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\tools\releaseChecker\index.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\runServer.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\server.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\commands\index.js - E:\Expo\base\node_modules\react-native\node_modules@react-native-community\cli\build\index.js - E:\Expo\base\node_modules\react-native\local-cli\cli.js

Kindly help why am getting that error after installing react-navigation, nativebase dependencies.
Before the mentioned dependecies installation expo is not throwing this error while firebase is installed.

Not able to clone in snack.expo.io directly via url

Getting following message when i am trying to import git repo in snack, i have changed SDK to use 36:

An error occurred during import. This could be because the data provided was invalid, or because the repository referenced is not a properly formatted Expo project.

Does not build in expo Web

When trying to launch this template and the argon one. Both do not run in the Expo Web setup.

They are met with

"Uncaught SyntaxError: Unexpected Token '!'" And react-native-web missing deps.

Is there any workaround to this ?

Screen: Home

In sketch acest screen se numeste Article. Imaginile se iau din folderul assets/img din produsul https://www.creative-tim.com/product/now-ui-kit.

Iconitele se creaza cu icomoon.io si fonturile se iau din assets/fonts sau ceva de genul din produsul cu linkul de mai sus

• change old icons with the new icons
• use icommon to generate font and ttf file
• change old icons with the new ones

Converting Expo to React native cli

Hi team,

i am having subscription of creative tim i wanted to convert this expo project to react native.
if you have any guide lines please share