Material Kit React Native

Home Page: https://demos.creative-tim.com/material-kit-react-native/

License: MIT License

JavaScript 100.00%

react-native material-design material android-app ios-app open-source free

material-kit-react-native's Introduction

Material Kit React Native

Material Kit 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 Google's material design, minimalistic and easy to use.

Start your development with a badass material UI Kit for React Native inspired by Material Design. If you like Google's Material Design, you will love this react native kit! It features a huge number of components and screens built to fit together and look amazing.

FULLY CODED COMPONENTS

Material Kit 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

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

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

Versions

HTML	React	Vue

React Native	Figma	WordPress

Demo

Home Screen	Profile Screen	Chat Screen	Product Screen

Quick start

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

Documentation

The documentation for the Material Kit React Native is hosted at our website.

File Structure

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

material-kit-react-native/
├── App.js
├── README.md
├── app.json
├── assets
├── babel.config.js
├── components
│   ├── Button.js
│   ├── Drawer.js
│   ├── Header.js
│   ├── Icon.js
│   ├── Product.js
│   ├── Select.js
│   ├── Switch.js
│   ├── Tabs.js
│   └── index.js
├── constants
│   ├── Images.js
│   ├── Theme.js
│   ├── index.js
│   ├── products.js
│   └── utils.js
├── navigation
│   ├── Menu.js
│   └── Screens.js
├── package-lock.json
├── package.json
├── screens
│   ├── Components.js
│   ├── Home.js
│   ├── Onboarding.js
│   ├── Pro.js
│   ├── Profile.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/material-kit-pro-react-native
Download Page: https://www.creative-tim.com/product/material-kit-react-native
Documentation: https://demos.creative-tim.com/material-kit-react-native/docs
License Agreement: https://www.creative-tim.com/license
Support: https://www.creative-tim.com/contact-us
Issues: Github Issues Page
Material Kit - For Front End Development
Buy our PRO version
Dashboards:

HTML	React	Vue	Angular

HTML Dark	Vuetify

Reporting Issues

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

Make sure that you are using the latest version of the Material Kit React Native.
Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
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/material-kit-react-native/blob/master/LICENSE)

Social Media

Twitter: https://twitter.com/CreativeTim

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

Dribbble: https://dribbble.com/creativetim

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

material-kit-react-native's People

Contributors

Stargazers

Watchers

Forkers

numtostr ubi-mirrors ikeogu alexlecco yildiz kdinesh78987 r3sult comeoninc sasun fork-zone bittencourtal masjidalrahman appbootup yencht bhardwajrahul tetris-native autopilotdrone ilsx stackchain pravinbanjade raviitsoft sandeep821 presleyhank eboot prazvan zahidhussaincs pawan-atl munroallie yatishpro yahongie2014 topseysuave emaitee velys tuxpoll desenvolvedoricotrade anayooleru risez25 galio-toolbox seebgar ksanchez666 prasetyodimas uurtech agungriyanto dealmengor ebinabo marceluphd brendonguedes duannhqb foodmesh-xyz ramzieus onofapolivio dreamer-ahn abdul-hafizh deve0ps chandumunna biggani maxiplux lhutyra koushikbasu tanmoythander otromaximiliano mo-mann smart-developer88 phatdang enriquexl ikumar3 emersiljr ebarahona jhenwei mujahid-software rcastillo9x tridungle ibeakanmaj kennethlynne caiquecoelho engrmahabub bielteknik mango5teen rrymm jhonatanharold trungnguyenbao elizabethhannan zyzmoz prestozer pranaypratyush antonbeletskyforks kingdome4577 vladpaunescu pk500 c-is kohsatrarin meryem-gh jzdev7132 quangtynu gsmith77 dimovdaniel fancydevpro taherhamzaouii threemind jaredude

material-kit-react-native's Issues

iPad Pro Portrait Layout Issue

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

On iPad pro, layout should be visible in landscape and portrait mode.

Current Behavior

What is the current behavior? Landscape mode works fine, but in Portrait, it cuts off the side.

Failure Information (for bugs)

Using Expo, iPad Pro (2nd gen).

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

Clone repo
npm install
expo start
Open in expo in iPad Pro
Rotate screen to portrait mode, and body layout is cut off on both sides (cards, search bar, etc)

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device: iPad Pro
Operating System: iOS 14.2
Browser and Version: Expo

Animation of page navigation not working

When the "get pro version" button is clicked in PRO page, it does not navigate with "slide animation" . But it animation works in that same "get pro version" button when we go to the PRO page from HOME page. This is weird behavior , kindly identify the cause and resolve , so that we could the same fix in our real App which is being built based on this template.

[Question] react-navigation-stack v2 upgrade

Hi there, I would like to ask if there are any plans in the pipeline to upgrade react-navigation-stack to version 2? There are a couple of breaking changes in version 2 that breaks this template.

I'm in no hurry to upgrade it but would like to ask if there are plans to upgrade to use the latest react-navigation and react-navigation-stack. If there isn't, then I would have to figure out the breaking changes myself.

[Bug] Version 1.8.0 Doesn't run anymore

Version

1.8.0

Operating System

Windows 10

Device

Laptop

Browser & Version

Microsoft Edge

Steps to reproduce

Download the Release from here: https://github.com/creativetimofficial/material-kit-react-native
Run npm install to install all the dependencies.
Run expo start

What is expected?

App to start properly

What is actually happening?

› Unversioned @expo/[email protected] is being used. Bundling apps may not work as expected, and is subject to breaking changes. Install expo or set the app.json sdkVersion to use a stable version of @expo/metro-config.

Solution

Probably upgrading the expo version is required.
Even the Expo App throws an error saying the minimum SDK version required is 41.0.0

Additional comments

All the components are older as even the EXPO SDK used is deprecated in this.
Latest version is 44.0.0 where as this is using 40.0.0

goBack() in back navigation does not work

Kindly provide an example screen for back button with the free version

switching tabs with left/right swipe

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting
Support for gesture control in navigation, especially switching tabs in Galio Framework's NavBar component with left/right swipe

Current Behavior

What is the current behavior?
No gesture control is supported, although a dependency to react-native-gesture-handler exists, it's not used.

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

step 1
step 2
you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device:
Operating System:
Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

Duplicate resources for ttf files

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[ Y] I am running the latest version
[ Y] I checked the documentation and found no answer
[ Y] I checked to make sure that this issue has not already been filed
[ Y] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

eas build:android should work like expo build:android

Current Behavior

duplicate resources error is being thrown

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

Run the below command
eas build:android

Context

It is working fine with expo build:android
the problem is occuring with eas build:android

Failure Logs

[raw/assets_fonts_galioextra] /private/var/folders/k9/ht821f996yq6048p9tr5bz8m0000gn/T/eas-build-local-nodejs/ddb6ac6a-c728-46af-a2e4-4e025f695ee4/build/android/app/build/generated/res/react/release/raw/assets_fonts_galioextra.ttf [raw/assets_fonts_galioextra] /private/var/folders/k9/ht821f996yq6048p9tr5bz8m0000gn/T/eas-build-local-nodejs/ddb6ac6a-c728-46af-a2e4-4e025f695ee4/build/android/app/build/generated/res/react/release/raw/assets_fonts_galioextra.json: Error: Duplicate resources

[Bug] _xdl(...).ProjectUtils.readConfigJsonAsync is not a function

Version

last

Reproduction link

http://not_started

Operating System

ubuntu

Device

android

Browser & Version

npm 6.13
expo 3.4.1

Steps to reproduce

expo start

What is expected?

Starting project at material-kit-react-native-master
_xdl(...).ProjectUtils.readConfigJsonAsync is not a function
Set EXPO_DEBUG=true in your env to view the stack trace.

What is actually happening?

i try other native project and error is still

Solution

downgrade expo to 3.0.2

Additional comments

Demo is not working in expo snack ide

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[*] I am running the latest version
[*] I checked to make sure that this issue has not already been filed
[*] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Demo should work in expo and user should able to see exact screens

What is the current behavior?

Demo is not working in expo snack ide and it is showing transparent blank screen.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

Clone git repo into expo Snack IDE
Observe output in device of Snack IDE
you get transparent screen instead of actual screen

Context

expo snack IDE
Android

Failure Logs

Unable resolve module 'module://components/.js'

NPM install error

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting
when i execute npm install evereverything is ok.
With yarn doesn't fail

Current Behavior

❯ npm install
⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⸩ ⠸ idealTree:quebebi: sill idealTree buildDeps
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @react-navigation/[email protected]
npm ERR! node_modules/@react-navigation/native
npm ERR! @react-navigation/native@"^6.0.10" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @react-navigation/native@"^5.0.5" from @react-navigation/[email protected]
npm ERR! node_modules/@react-navigation/compat
npm ERR! @react-navigation/compat@"^5.1.25" from the root project
npm ERR!

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

step 1
step 2
you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device: Macbook Pro
Operating System: MAC OS Catalina
Browser and Version:

Failure Logs

added

Please include any relevant log snippets or files here.

Failed at the [email protected] start script.

I got Err can you help me solve it, this is me err message
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: cross-env REACT_EDITOR=code expo start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mac/.npm/_logs/2020-02-16T09_10_30_649Z-debug.log

my package Json is:
{
"name": "rn-material-kit-free",
"version": "1.4.0",
"description": "Material Kit React Native. Coded by Creative Tim",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "cross-env REACT_EDITOR=code expo start",
"android": "cross-env REACT_EDITOR=code expo start --android",
"ios": "cross-env REACT_EDITOR=code expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^35.0.0",
"expo-asset": "~7.0.0",
"expo-font": "~7.0.0",
"expo-linear-gradient": "~7.0.0",
"galio-framework": "^0.6.3",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-gesture-handler": "~1.3.0",
"react-native-modal-dropdown": "^0.6.2",
"react-navigation": "^3.11.0"
},
"devDependencies": {
"babel-preset-expo": "^7.0.0",
"cross-env": "^5.2.0",
"expo-cli": "^2.4.0",
"jest-expo": "^35.0.0"
},
"bugs": {
"url": "https://github.com/creativetimofficial/material-kit-react-native/issues"
},
"homepage": "https://demos.creative-tim.com/material-kit-react-native/"
}

Is it possible to exclude Expo?

Hello,

I would like to know if there is any version without Expo libraries? or is it possible to use it without Expo?

gg

Tried to register two views with the same name rnsvgpath

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

App should run

Current Behavior

Error: "tried to register two views with the same name rnsvgpath"

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

git clone
npm install
npm start

Context

Last version of Material-kit-react-native
Node: 10.15.0
Expo: ^31.0.2

Device: Samsung J7 Neo (phisical device)
Operating System: W10
Browser and Version: Chrome 71.0.3578.98 x64

icon.png is missing in assets folder

When I enter command expo start, its showing be below error

material-kit-react-native-master/assets/icon.png for platform: null
Error: Asset not found

sizes from materialTheme are undefined unless explicitly defined (not inherited from galio)

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[x ] I am running the latest version
[x ] I checked the documentation and found no answer
[ x] I checked to make sure that this issue has not already been filed
[ x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Before updating to expo SDK 34, I was able to use sizes in style which were imported from galio when not defined in Constants.

Since updated, I see a react native error.

My guess is that variables that are not explicitly defined have changed behaviour in this version of rn (0.59)
Please describe the behavior you are expecting

Current Behavior

when I import materialTheme from 'constants' I can refer to galio variables not explicitly overridden

What is the current behavior?
If a variable from galio SIZES isn't defined I cannot refer to it from materialTheme

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.
Not sure, but I guess that I could provide my package.json

  "main": "./index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "@types/react-navigation": "^3.0.7",
    "axios": "^0.18.0",
    "expo": "^34.0.3",
    "expo-asset": "^6.0.0",
    "expo-constants": "^6.0.0",
    "expo-document-picker": "~6.0.0",
    "expo-font": "^6.0.1",
    "expo-image-picker": "~6.0.0",
    "expo-keep-awake": "~6.0.0",
    "expo-linear-gradient": "~6.0.0",
    "expo-location": "~6.0.0",
    "expo-permissions": "~6.0.0",
    "expo-secure-store": "^6.0.0",
    "expo-web-browser": "^6.0.0",
    "galio-framework": "^0.5.4",
    "jwt-decode": "^2.2.0",
    "lottie-react-native": "^2.6.1",
    "react": "16.8.3",
    "react-devtools": "^3.6.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-animated-loader": "^0.0.7",
    "react-native-config": "^0.11.7",
    "react-native-elements": "^1.1.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-gifted-chat": "^0.9.11",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-keyboard-spacer": "^0.4.1",
    "react-native-linear-gradient": "^2.5.4",
    "react-native-maps": "~0.24.0",
    "react-native-modal": "^11.1.0",
    "react-native-modal-datetime-picker": "^7.4.2",
    "react-native-modal-dropdown": "^0.6.2",
    "react-native-paper": "^2.15.2",
    "react-native-progress": "^3.6.0",
    "react-native-step-indicator": "^0.0.11",
    "react-native-swipe-list-view": "^1.5.5",
    "react-native-vector-icons": "^6.4.2",
    "react-native-video": "^4.4.1",
    "react-native-wizard": "^1.0.1",
    "react-navigation": "^3.11.1",
    "react-navigation-material-bottom-tabs": "^1.0.0",
    "react-redux": "6.0.1",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-form": "^8.2.0",
    "redux-saga": "^1.0.2",
    "redux-thunk": "^2.3.0",
    "tslib": "^1.9.3"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "flow-bin": "^0.100.0",
    "flow-typed": "^2.5.2",
    "jest-expo": "^34.0.0",
    "reactotron-react-native": "^3.6.4",
    "reactotron-redux": "^3.1.1"
  },
  "private": true
}

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device:
Operating System:
Browser and Version:
It seems to be happening on iOS simulator

Failure Logs


This error is located at:
    in RCTView (at View.js:45)
    in View (at Block.js:60)
    in Block (at theme/index.js:33)
    in _class (at TaskBox.js:193)
    in RCTView (at View.js:45)
    in View (at Block.js:60)
    in Block (at theme/index.js:33)
    in _class (at TaskBox.js:192)
    in RCTView (at View.js:45)
    in View (at Block.js:60)
    in Block (at theme/index.js:33)
    in _class (at TaskBox.js:121)
    in TaskBox (created by Context.Consumer)
    in Connect(TaskBox) (at HomeScreen.js:48)
    in RCTView (at View.js:45)
    in View (at VirtualizedList.js:1762)
    in CellRenderer (at VirtualizedList.js:688)
    in RCTScrollContentView (at ScrollView.js:976)
    in RCTScrollView (at ScrollView.js:1115)
    in ScrollView (at createNativeWrapper.js:80)
    in NativeViewGestureHandler (at createNativeWrapper.js:79)
    in ScrollView (at GestureComponents.js:53)
    in VirtualizedList (at FlatList.js:632)
    in FlatList (at GestureComponents.js:50)
    in ForwardRef (at HomeScreen.js:95)
    in RCTView (at View.js:45)
    in View (at Block.js:60)```
Please include any relevant log snippets or files here.

Warning: Failed prop type: Invalid prop `testID` of type `number` supplied to `Text`, expected `string`.

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[ x] I am running the latest version
[ x] I checked the documentation and found no answer
[ x] I checked to make sure that this issue has not already been filed
[ x] I'm reporting the issue to the correct repository (for multi-repository projects)

Warning: Failed prop type: Invalid prop testID of type number supplied to Text, expected string.
at node_modules\react-native\Libraries\LogBox\LogBox.js:173: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\prop-types\checkPropTypes.js:20:6 in printWarning
at node_modules\prop-types\checkPropTypes.js:82:22 in checkPropTypes
at node_modules\react\cjs\react.development.js:1714:20 in validatePropTypes
at node_modules\react\cjs\react.development.js:1813:21 in createElementWithValidation
at node_modules\react-native-modal-dropdown\components\ModalDropdown.js:465:6 in _renderItem
at node_modules\react-native\Libraries\Lists\VirtualizedList.js:2089:20 in CellRenderer#render
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12478:21 in finishClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12403:43 in updateClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19181:22 in beginWork$1
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18085:22 in performUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18013:38 in workLoopSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17977:18 in renderRootSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7267:16 in classComponentUpdater.enqueueSetState
at node_modules\react\cjs\react.development.js:471:2 in Component.prototype.setState
at node_modules\react-native-modal-dropdown\components\ModalDropdown.js:197:9 in show
at node_modules\react-native-modal-dropdown\components\ModalDropdown.js:185:8 in _button.measure$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:462:4 in __invokeCallback
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:127: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:126:4 in invokeCallbackAndReturnFlushedQueue

Failed to compile

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[x ] I am running the latest version
[x ] I checked the documentation and found no answer
[x ] I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Project compiles and displays the material kit UI in browser

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Failed to compile.
../material-kit-react-native-master/node_modules/react-native-modal-dropdown/components/ModalDropdown.js
Module not found: Can't resolve 'react-native-web/dist/exports/ActivityIndicator' in '..\material-kit-react-native-master\node_modules\react-native-modal-dropdown\components'

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

Completed installation steps on https://demos.creative-tim.com/material-kit-react-native/docs/#/install
npm install
expo r -c
In expo GUI, click 'Run in web browser'
(error occurs)

Context

Operating System: Windows 10
Browser and Version: Google Chrome Version 80.0.3987.163 (Official Build) (64-bit)
Expo: 3.17.24
npm: 6.14.4

Failure Logs

Local: http://localhost:19006/
On Your Network: http://192.168.1.17:19006/

Note that the development build is not optimized.

› To create a production build, run expo build:web
› Press Ctrl+C to exit.

Expo Press ? to show a list of all available commands.
Logs for your project will appear below. Press Ctrl+C to exit.
web Failed to compile.
O:/App Projects/RN Test/material-kit-react-native-master/node_modules/react-native-modal-dropdown/components/ModalDropdown.js
Module not found: Can't resolve 'react-native-web/dist/exports/ActivityIndicator' in 'O:\App Projects\RN Test\material-kit-react-native-master\node_modules\react-native-modal-dropdown\components'

Compiling...

× Expo Webpack
Compiled with some errors in 3.97s
web Failed to compile.
O:/App Projects/RN Test/material-kit-react-native-master/node_modules/react-native-modal-dropdown/components/ModalDropdown.js
Module not found: Can't resolve 'react-native-web/dist/exports/ActivityIndicator' in 'O:\App Projects\RN Test\material-kit-react-native-master\node_modules\react-native-modal-dropdown\components'

Issue build apk

Request failed with status code 400
Error: Request failed with status code 400
at createError (/usr/local/lib/node_modules/expo-cli/node_modules/axios/lib/core/createError.js:16:15)
at settle (/usr/local/lib/node_modules/expo-cli/node_modules/axios/lib/core/settle.js:17:12)
at IncomingMessage.handleStreamEnd (/usr/local/lib/node_modules/expo-cli/node_modules/axios/lib/adapters/http.js:237:11)
at IncomingMessage.emit (events.js:203:15)
at endReadableNT (_stream_readable.js:1145:12)
at process._tickCallback (internal/process/next_tick.js:63:19)

Please upgrade to SDK 34 with new expo icons

Metro Bundler process exited with code 1

error Invalid regular expression: /(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class.

Windows 10 - Compile issues on specific modules

Bypassing template since this is a partial question - I'm running Win 10, and already found the bug issues about using node 12.9 or newer - I downgraded to 12.9 to get compilation to work, however I am getting an error on every attempt to open it to a different module.

npm install spits out a plethora of warnings but no errors.

When it warned me about one specific package, looking for support I found that running expo install react-native-screens fixed it, but now I am on another module.

Is this a known issue, or is there a way for me to expo install 'all' modules as needed?

npm start fails

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[*] I am running the latest version
[*] I checked the documentation and found no answer
[*] I checked to make sure that this issue has not already been filed
[*] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When I run npm start after npm install it should start expo server correctly.

Current Behavior

Starting project at material-kit-pro-react-native-v1.4.0
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
ConfigUtils.configFilenameAsync is not a function
Set EXPO_DEBUG=true in your env to view the stack trace.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: cross-env REACT_EDITOR=code expo start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Device: MPBR
Operating System: MacOS 10.15.1
Browser and Version: Node v10.17.0, expo-cli 3.9.1

npm install throws error

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

I expected, that npm i will install all dependencies.

Current Behavior

Error message.

Failure Information (for bugs)

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^16.13.1" from the root project
npm ERR! peer react@"16.13.1" from [email protected]
npm ERR! node_modules/jest-expo
npm ERR! dev jest-expo@"^40.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from [email protected]
npm ERR! node_modules/react-native
npm ERR! peer react-native@"*" from [email protected]
npm ERR! node_modules/jest-expo
npm ERR! dev jest-expo@"^40.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/svenhager/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/svenhager/.npm/_logs/2021-04-24T10_32_57_597Z-debug.log

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

download the package from GitHub
install expo-cli on system
navigate to the directory, and npm install

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device: MBP 2020 intel version
Operating System: MacOS 11.2.3 BigSur
Browser and Version: Not relevant (Chrome/Safari/Firefox all up to date)

Failure Logs

0 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'i', 'react' ]
1 info using [email protected]
2 info using [email protected]
3 timing config:load:defaults Completed in 1ms
4 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 1ms
5 timing config:load:builtin Completed in 1ms
6 timing config:load:cli Completed in 1ms
7 timing config:load:env Completed in 0ms
8 timing config:load:file:/Users/svenhager/Github/material-kit-react-native/.npmrc Completed in 1ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:/Users/svenhager/.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 5ms
19 verbose npm-session c640824fb67a2034
20 timing npm:load Completed in 9ms
21 timing arborist:ctor Completed in 1ms
22 timing arborist:ctor Completed in 1ms
23 timing idealTree:init Completed in 11ms
24 timing idealTree:userRequests Completed in 1ms
25 silly idealTree buildDeps
26 silly fetch manifest babel-preset-expo@^8.3.0
27 http fetch GET 304 https://registry.npmjs.org/babel-preset-expo 1002ms (from cache)
28 silly fetch manifest cross-env@^7.0.0
29 http fetch GET 304 https://registry.npmjs.org/cross-env 71ms (from cache)
30 silly fetch manifest expo-cli@^3.11.7
31 http fetch GET 304 https://registry.npmjs.org/expo-cli 57ms (from cache)
32 silly fetch manifest jest-expo@^40.0.0
33 http fetch GET 200 https://registry.npmjs.org/jest-expo 1129ms
34 silly fetch manifest react@^16.13.1
35 http fetch GET 304 https://registry.npmjs.org/react 66ms (from cache)
36 silly fetch manifest [email protected]
37 silly fetch manifest react-native@*
38 http fetch GET 200 https://registry.npmjs.org/react-native 249ms
39 timing idealTree Completed in 2645ms
40 timing command:i Completed in 2655ms
41 verbose stack Error: unable to resolve dependency tree
41 verbose stack at Arborist.[failPeerConflict] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1157:25)
41 verbose stack at Arborist.[loadPeerSet] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1150:30)
41 verbose stack at Arborist.[nodeFromEdge] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:933:30)
41 verbose stack at async Arborist.[loadPeerSet] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1110:11)
41 verbose stack at async Arborist.[buildDepStep] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:838:11)
41 verbose stack at async Arborist.buildIdealTree (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:209:7)
41 verbose stack at async Promise.all (index 1)
41 verbose stack at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:131:5)
41 verbose stack at async Install.install (/usr/local/lib/node_modules/npm/lib/install.js:120:5)
42 verbose cwd /Users/svenhager/Github/material-kit-react-native
43 verbose Darwin 20.3.0
44 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "react"
45 verbose node v14.16.0
46 verbose npm v7.6.3
47 error code ERESOLVE
48 error ERESOLVE unable to resolve dependency tree
49 error
50 error While resolving: �[1mrn-material-kit-free�[22m@�[1m1.8.0�[22m
50 error Found: �[1mreact�[22m@�[1m16.13.1�[22m�[2m�[22m
50 error �[2mnode_modules/react�[22m
50 error �[1mreact�[22m@"�[1m^16.13.1�[22m" from the root project
50 error �[35mpeer�[39m �[1mreact�[22m@"�[1m16.13.1�[22m" from �[1mjest-expo�[22m@�[1m40.0.2�[22m�[2m�[22m
50 error �[2mnode_modules/jest-expo�[22m
50 error �[33mdev�[39m �[1mjest-expo�[22m@"�[1m^40.0.0�[22m" from the root project
50 error
50 error Could not resolve dependency:
50 error �[35mpeer�[39m �[1mreact�[22m@"�[1m17.0.1�[22m" from �[1mreact-native�[22m@�[1m0.64.0�[22m�[2m�[22m
50 error �[2mnode_modules/react-native�[22m
50 error �[35mpeer�[39m �[1mreact-native�[22m@"�[1m*�[22m" from �[1mjest-expo�[22m@�[1m40.0.2�[22m�[2m�[22m
50 error �[2mnode_modules/jest-expo�[22m
50 error �[33mdev�[39m �[1mjest-expo�[22m@"�[1m^40.0.0�[22m" from the root project
50 error
50 error Fix the upstream dependency conflict, or retry
50 error this command with --force, or --legacy-peer-deps
50 error to accept an incorrect (and potentially broken) dependency resolution.
50 error
50 error See /Users/svenhager/.npm/eresolve-report.txt for a full report.
51 verbose exit 1

Problem with Menu - Active style

For any page i.e settings, profile, .... always the "Home" is active , there is a bug , kindly resolve it

npm install fails

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[yes ] I am running the latest version
[yes ] I checked the documentation and found no answer
[yes ] I checked to make sure that this issue has not already been filed
[yes ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

npm modules to be installed after i hit npm install

Current Behavior

installs some of the files and at some point displays message unexpected end of file and shuts npm install

Failure Information (for bugs)

npm install
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated [email protected]: This module has moved and is now available at @hapi/topo. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated [email protected]: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated [email protected]: The zlib module provides APIs for brotli compression/decompression starting with Node.js v10.16.0, please use it over iltorb
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! code Z_BUF_ERROR

npm ERR! errno -5
npm ERR! zlib: unexpected end of file

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hp\AppData\Roaming\npm-cache_logs\2020-02-27T08_08_17_882Z-debug.log

Context

Downloaded the Material kit starter pack for react native and followed the same steps as mentioned in the documentation

Device: HP au 003tx
Operating System: Windows 10
Browser and Version: Chrome

Failure Logs

Attached above

Header Navbar icon bug fixed

in Header.js leftIconName should be like that otherwise the back icon will become nav icon.
edited:

 return (
      <Block style={headerStyles}>
        <NavBar
          back={back}
          title={title}
          style={styles.navbar}
          transparent={transparent}
          right={this.renderRight()}
          rightStyle={{ alignItems: 'center' }}
          leftStyle={{ paddingVertical: 12, flex: 0.3 }}
          leftIconName={(back ? 'chevron-left' : 'navicon')}
          leftIconColor={white ? theme.COLORS.WHITE : theme.COLORS.ICON}
          titleStyle={[
            styles.title,
            { color: theme.COLORS[white ? 'WHITE' : 'ICON'] },
          ]}
          onLeftPress={this.handleLeftPress}
        />
        {this.renderHeader()}
      </Block>
    );

current code:

return (
      <Block style={headerStyles}>
        <NavBar
          back={back}
          title={title}
          style={styles.navbar}
          transparent={transparent}
          right={this.renderRight()}
          rightStyle={{ alignItems: 'center' }}
          leftStyle={{ paddingVertical: 12, flex: 0.3 }}
          leftIconName="navicon"
          leftIconColor={white ? theme.COLORS.WHITE : theme.COLORS.ICON}
          titleStyle={[
            styles.title,
            { color: theme.COLORS[white ? 'WHITE' : 'ICON'] },
          ]}
          onLeftPress={this.handleLeftPress}
        />
        {this.renderHeader()}
      </Block>
    );

Statusbar not changing, always dark

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

the drawer should be full screen (see picture below, as you can see the statusbar when the drawer opens) this one is from the old material-kit.

Current Behavior

What is the current behavior?

the statusbar is always black(see picture) it is not full screen

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

step 1
clone the repo
step 2
run with expo
you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device: Huawei nova 3i
Operating System: Android

Failure Logs

Please include any relevant log snippets or files here.

annoying border in the header

When the "header" is removed from Login screen , it shows a grey border in the header, kindly help to remove it.

`
const LoginStack = createStackNavigator({
Login: {
screen: LoginScreen,
},

}, {
cardStyle: { backgroundColor: '#d9dfec'},
transitionConfig,
})

const HomeStack = createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
header:

,
})
},
},
{
cardStyle: {
backgroundColor: '#d9dfec', //this is the backgroundColor for the app
},
transitionConfig,
});`

creativetimofficial / material-kit-react-native Goto Github PK

material-kit-react-native's Introduction

FULLY CODED COMPONENTS

Components & Cards

Example Screens

Table of Contents

Versions

Demo

Quick start

Documentation

File Structure

OS Support

Resources

Reporting Issues

Technical Support or Questions

Licensing

Useful Links

Social Media

material-kit-react-native's People

Contributors

Stargazers

Watchers

Forkers

material-kit-react-native's Issues

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Version

Operating System

Device

Browser & Version

Steps to reproduce

What is expected?

What is actually happening?

Solution

Additional comments

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Failure Logs

Prerequisites

Expected Behavior

Current Behavior

Steps to Reproduce

Context

Failure Logs

Version

Reproduction link

Operating System

Device

Browser & Version

Steps to reproduce

What is expected?

What is actually happening?

Solution

Additional comments

Prerequisites

Expected Behavior

Steps to Reproduce

Context

Failure Logs

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Failure Logs

Prerequisites

Expected Behavior

Current Behavior

Steps to Reproduce

Context

Prerequisites