# react-native-for-designers12

**Repository Path**: del_cideo/react-native-for-designers12

## Basic Information

- **Project Name**: react-native-for-designers12
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Native for Designers
![](https://cl.ly/6338dcbc2dd6/download/1.jpg)
---
[React Native](https://facebook.github.io/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
1. [React Native for Designers](https://github.com/MengTo/react-native-for-designers/tree/fe5f60ae54a47684c94df89e7bf6ec0ba1d21eb9)
2. [Styled Components](https://github.com/MengTo/react-native-for-designers/tree/22ae7d979e1103ad8989515143e90a884488f178)
3. [Props and Icons](https://github.com/MengTo/react-native-for-designers/tree/4656c6507ae60ac56d9c9f7df1da0bc12ae6cbcb)
4. [Static Data and Loop](https://github.com/MengTo/react-native-for-designers/tree/3038c854983ff8488eed13e9516e38be005b0e7c)
5. [States and Animations](https://github.com/MengTo/react-native-for-designers/tree/ccc1897e852fd2d882ab5ba8e4c1c94605865b10)
6. [Redux](https://github.com/MengTo/react-native-for-designers/tree/86b6fc71fc21f9cf56dbdf7ab599a4638163e0bd)
7. [Fetch API Data](https://github.com/MengTo/react-native-for-designers/tree/a1cf9748824d63837180c6df234ec3f92d6b307c)
8. [Screens and Navigation](https://github.com/MengTo/react-native-for-designers/tree/755ac90bd7eaf9083b3b3d11b269698b8d3a25a0)
9. [Passing Data](https://github.com/MengTo/react-native-for-designers/tree/55b3ce02cc5170d66f7542f26df8fc67a9cf4862)
10. [GraphQL with Contentful](https://github.com/MengTo/react-native-for-designers/tree/64f14b70c394e02807acce73ce6bc6b209dd0718)
11. [HTML and Markdown](https://github.com/MengTo/react-native-for-designers/tree/457f2eccefacf06c016d65ff3fe42245f53cdfb5)
12. [Adapting for iPad and Android](https://github.com/MengTo/react-native-for-designers/tree/82cf408881adc82c4a33491f7bd644d8e6652c81)
13. [React Native Gestures](https://github.com/MengTo/react-native-for-designers/commit/b7c5242af86a6849a41d9f60d4e2631c7f840867)
14. [Advanced Gestures](https://github.com/MengTo/react-native-for-designers/commit/60b25cd1cb9fb07caf915e6101c821a05f571053)
15. [Looping the Cards](https://github.com/MengTo/react-native-for-designers/commit/46f65366d3f4176ac9b33f23d13716656f6d55ec)
16. [Animated Transition](https://github.com/MengTo/react-native-for-designers/commit/b7e8011672857fbd2cf9c0fff5a57bb6edef0e38)
17. [Managing Gestures](https://github.com/MengTo/react-native-for-designers/commit/e3e3c32683c9cbf622201141507726a62ce7352e)
18. [Input and Keyboard](https://github.com/MengTo/react-native-for-designers/commit/669fd29cd98749522bd913a0118030347056f380)
19. [Lottie Animation Files](https://github.com/MengTo/react-native-for-designers/commit/ae61dd767142ce35e9a7039904b358863b6ec13b)
20. [Login and Alert](https://github.com/MengTo/react-native-for-designers/commit/73945eca673ef7d6db5159e0ece311ba85b0d719)
21. [Firebase Authentification](https://github.com/MengTo/react-native-for-designers/commit/db251fe1ef5713022ae8bff1746e5c59367e7c4d)
22. [Persistent Data](https://github.com/MengTo/react-native-for-designers/commit/22434246603a6dc6bdef607b30457449ff76ccc5)
23. [AsyncStorage with Redux](https://github.com/MengTo/react-native-for-designers/commit/baefd620c19a28c534ccc37bc1bf77babfa4683a)
24. [Publish to Android and iOS](https://github.com/MengTo/react-native-for-designers/commit/f2cecef183ca03ab0cd9a1ca5bbae6a713ab952a)
Bonus. [Playing Video](https://github.com/MengTo/react-native-for-designers/commit/6b03f5f54b302868b2e3e83d92e0f48a0a7efb35)
Bonus. [Notifications Screen](https://github.com/MengTo/react-native-for-designers/commit/2555db871009f43b23c4d4e1d45347937eaca38d)
Bonus. [Courses Screen](https://github.com/MengTo/react-native-for-designers/commit/f1d760dc6f3e5db683e8cc810a69ed49c511c6cf)

## 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**](https://nodejs.org/en/) the version appropriate to your system. You can also install node using [Homebrew](https://brew.sh) (Mac only) if you prefer.

## Install Xcode

If you're on a Mac, I highly recommend [installing Xcode](https://itunes.apple.com/ca/app/xcode/id497799835?mt=12) for the required **Command Line Tools** and for using the iOS Simulator. Xcode also comes with [Git](https://git-scm.com), which is wonderful for development.

## Install Expo

[Expo](https://expo.io) will allow us to have a development environment for creating our app. Go to Terminal and type this command and press Enter.
```sh
sudo npm install expo-cli --global
```

Go to their Quick Start [guide](https://expo.io/learn) for more detailed instructions.

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

## Install Libraries
```sh
npm install
```