mengto / react-native-for-designers Goto Github PK

React Native for Designers course

Home Page: https://designcode.io/react-native-for-designers

JavaScript 100.00%

react-native-for-designers's Introduction

React Native for Designers

React Native is a popular Javascript framework that builds on top of React by using native components to create a real mobile app indistinguishable from one made using Xcode or Android Studio. The main difference with native development is that you get to use CSS, hot-reload, Javascript and other familiar techniques that the Web has grown over the past decades. Most importantly, you're building for both iOS and Android using the same codebase.

Course Files

Install Node

Before starting, you'll need the Node package manager (NPM) for installing React and Expo. To install Node, you need to head to their site and download the version appropriate to your system. You can also install node using Homebrew (Mac only) if you prefer.

Install Xcode

If you're on a Mac, I highly recommend installing Xcode for the required Command Line Tools and for using the iOS Simulator. Xcode also comes with Git, which is wonderful for development.

Install Expo

Expo will allow us to have a development environment for creating our app. Go to Terminal and type this command and press Enter.

sudo npm install expo-cli --global

Go to their Quick Start guide for more detailed instructions.

Go to your new project's folder and start the environment.

expo start

Install Libraries

npm install

react-native-for-designers's People

Contributors

Stargazers

Watchers

Forkers

djalfirevic tomasovic aaronbesson rustan-id caironm handsomechad alexpcol androks1 moustafabayommy drkimpatrick pdugan20 github-clonner seebgar archerspins suretarget bespokett edwardizraitel vannina777 saltrose webpest calstu99 amircodes kamote apache123 pedrocarlos-ti endeavor5 pankajit yudawardana94 tanbui gitfdy puma555 teejay-codes farro97 quyenluu wangbing0417 askari01 ioprea joseandreceron zealachi etarget1 lalaiam frankhn abhinandansharma cadrewj s-yuriev mptmadhushan likern imooccodejesse vishnuvaradaraj linadinh2602 rupinder-kumar abduljeleelng ccraig09 itstarun andrekovac darkangelkid sanswet920 bilalmarifet mtkuyucu thoughtlinks josephkabemba sayyidisal slugger1205 maartenkeizer kdbinmc17 erlichliu condefranck jnmrles edidevs sherlinee rahuldmk jpduvenhage alanschwarz bryanskovich hddhoangducdat jessicadosseh devils-own wangyu6 rjcrz88 olasupoodebiyi elinez19 hy88883 saurabharch ritec sprakashnet1 sarfaraz-ahmad leilahacom angelibz001 andaeiii jaskaran-online ajimae 15239939087 parameshvadivel satyamak6 code5linger hienhaobn ner0ne wiggiddywags mrchrisrobinson edmondniy

react-native-for-designers's Issues

Unable to get this to work on SDK 36

After doing an expo upgrade I had to manually install react-native-svg and another library.

Then I get the following error:

TypeError: undefined is not an object (evaluating 'Component.propTypes')

Any ideas?

Unable to get this to work

I have tried this a ton of different ways and I am unable to get this to run in expo.

Doing a git clone and a yarn install, I get a bunch of errors relating to a make build error with gyp.

make: *** [Release/obj.target/fse/fsevents.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:223:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 19.2.0
gyp ERR! command \"/usr/local/bin/node\" \"/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"build\" \"--fallback-to-build\" \"--module=/Users/jeff/projects/personal/react-native-for-designers/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node\" \"--module_name=fse\" \"--module_path=/Users/jeff/projects/personal/react-native-for-designers/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64\" \"--napi_version=5\" \"--node_abi_napi=napi\"
gyp ERR! cwd /Users/jeff/projects/personal/react-native-for-designers/node_modules/fsevents
gyp ERR! node -v v12.14.1
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/jeff/projects/personal/react-native-for-designers/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node --module_name=fse --module_path=/Users/jeff/projects/personal/react-native-for-designers/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64 --napi_version=5 --node_abi_napi=napi' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/jeff/projects/personal/react-native-for-designers/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:223:5)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:1021:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
node-pre-gyp ERR! System Darwin 19.2.0
node-pre-gyp ERR! command \"/usr/local/bin/node\" \"/Users/jeff/projects/personal/react-native-for-designers/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp\" \"install\" \"--fallback-to-build\"
node-pre-gyp ERR! cwd /Users/jeff/projects/personal/react-native-for-designers/node_modules/fsevents
node-pre-gyp ERR! node -v v12.14.1
node-pre-gyp ERR! node-pre-gyp -v v0.10.3
node-pre-gyp ERR! not ok```

If I ignore that and do a `yarn start`, I get the following error on my iPhone:

```The experience you requested uses Expo SDK v(null) but this copy of Expo client requires at least v33.0.0.  The author should update their experience to a newer Expo SDK version```

If I try to update (`expo update 34.0.0`), then I get the same build errors as above.  When running, I start a chain of missing dependencies:

``` Unable to resolve module 'react-native-svg'```

I am unable to get this to run.  Please help!

Getting an error from metro bundler about react-navigation

Error:

ERROR
17:57
While trying to resolve module `@react-navigation/native` from file `/Users/yashatreya/Desktop/react-native-for-designers/node_modules/react-navigation/src/index.js`, the package `/Users/yashatreya/Desktop/react-native-for-designers/node_modules/@react-navigation/native/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/yashatreya/Desktop/react-native-for-designers/node_modules/@react-navigation/native/lib/module/index.js`. Indeed, none of these files exist:

  * /Users/yashatreya/Desktop/react-native-for-designers/node_modules/@react-navigation/native/lib/module/index.js(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.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|.ios.wasm|.native.wasm|.wasm)
  * /Users/yashatreya/Desktop/react-native-for-designers/node_modules/@react-navigation/native/lib/module/index.js/index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.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|.ios.wasm|.native.wasm|.wasm)
ERROR
17:57
Building JavaScript bundle: error

Help would be very much appreciated

Expo SDK outdated?

When running on the iOS Simulator (running on iOS 13.1), I'm getting the error:

this copy of expo client requires at least v33.0.0

It seems like the current Expo SDK version is at v32.0.0. When upgrading to Expo SDK v35.0.0 using expo upgrade, I'm getting this warning:

The following packages were not updated. You should check the READMEs for those repositories to determine what version is compatible with your new set of packages:
apollo-boost, firebase, graphql, react-apollo, react-native-showdown, react-navigation, react-redux, redux, styled-components

Background Image Bug on Card Loop, resolved

Hi!
I am not sure if this is a solution, but once I changed the background images from your assets folder to my own images I noticed the bug was gone. (Bug: the background changes for a few miliseconds to some other one once the loop is back on start).
I noticed the only change I made was that all my image assets are PNGs. With JPGs I always have this bug, not with PNGs.

I hope this helps :)

Thanks for the great tutorial 🥇