# React Native
- after reading react-native docs on how to start then we need to install genymotion. it is faster than the android studio emulator
[Installing genymotion emulator-->Step 4](https://medium.com/@devmrin/complete-how-to-create-react-native-app-with-genymotion-android-emulator-on-windows-10-in-10-3834fd90b074)
- if you want to start with a different version then you ccould do this
`react-native init --version versionNumber nameOfTheApp`
- [Changes and releases of react-native](https://github.com/facebook/react-native/releases)
- [React Native: Under the Hood](https://www.youtube.com/watch?v=hDviGU-57lU)
https://github.com/dabit3/react-native-bootcamp
https://github.com/dabit3/react-native-bootcamp/tree/Day2
https://github.com/dabit3/react-native-bootcamp/tree/Day3
- [MUST READ](https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a)
- [11 Trending React Native UI Components -- LOTTIE with Adobe After Effects animations -- natcho ui, etc..](https://hackernoon.com/11-react-native-ui-components-you-should-know-in-2019-75404e6c9a00)
- [React Native community](https://github.com/react-native-community)
- [You can now use Expo APIs in any React Native app](https://blog.expo.io/you-can-now-use-expo-apis-in-any-react-native-app-7c3a93041331)
- [Ionicons and example of using them](https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance)
- [Managing Configuration in React Native](https://medium.com/differential/managing-configuration-in-react-native-cd2dfb5e6f7b)
- [Good Practices: Why you should use JavaScript whenever possible with React Native](https://blog.expo.io/good-practices-why-you-should-use-javascript-whenever-possible-with-react-native-26478ec22334)
- https://enappd.com/blogcategory/6/
- [React Native Animations — Zero to Hero](https://medium.com/wix-engineering/react-native-animations-zero-to-hero-17ebf7e8be81)
- [Wix RN crash course](https://github.com/wix/react-native-crash-course)
----
- [react native intro](https://reactnative.sataiva.com/reactnative-intro/)
- [React Native Tutorial: Building Android Apps with JavaScript](https://www.raywenderlich.com/247-react-native-tutorial-building-android-apps-with-javascript)
- [React Native Tutorial: Building iOS Apps with JavaScript](https://www.raywenderlich.com/485-react-native-tutorial-building-ios-apps-with-javascript)
- [React Native CRUD](https://www.youtube.com/playlist?list=PLvjHFH8I1eYb066ylBnlcR6LvJf9-6hFC)
- [React native form validation](https://www.youtube.com/playlist?list=PLvjHFH8I1eYac-nv3j8GMbfcGK0hWxVjt)
- [CS50's React Native(expo)](https://www.youtube.com/playlist?list=PLhQjrBD2T382gdfveyad09Ierl_3Jh_wR)
- [Yoga-Visual layout builder](https://yogalayout.com/)
- [BuilderX](https://builderx.io/)
- [Interactive app builder](https://interactiveappbuilder.com/)
- [Awesome-React-Native-Education](https://github.com/hsavit1/Awesome-React-Native-Education)
- [Awesome React Native](http://www.awesome-react-native.com/)
- [React Native Express](http://www.reactnativeexpress.com/)
- [Good tuts collection](https://alligator.io/react/roadmap-react-native-developer/)
- [react native guide](https://www.reactnative.guide/)
- [Quick start](https://rationalappdev.com/react-native-cheat-sheet/)
- [Getting started with React Native: Building UI](https://blog.nativebase.io/getting-started-with-react-native-building-ui-8552dd952589)
- [Style React Native Components](https://rationalappdev.com/style-react-native-components/)
- [Layout React Native Components with Flexbox](https://rationalappdev.com/layout-react-native-components-with-flexbox/)
- [More resources](https://facebook.github.io/react-native/docs/more-resources.html)
- [reactnativecode](https://reactnativecode.com/)
- [aboutreact.com up-to-date with react native latest version](https://aboutreact.com/)
- [Good youtube channel with a complete UI examples](https://www.youtube.com/channel/UCiNWv52iO_OAdZ12kslG4Cg/playlists)
- [kriss.io](https://kriss.io/)
- after going though expo [Cloning Tinder Using React Native Elements and Expo](https://www.sitepoint.com/cloning-tinder-using-react-native-elements-expo/)
- [How I built my first React Native app for my first freelance client
](https://www.freecodecamp.org/news/how-i-built-my-first-react-native-app-for-my-first-freelance-client-d78bdab795e1/)
- [How to structure react-native app](https://www.freecodecamp.org/news/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92/)
- [Env vars](https://www.freecodecamp.org/news/how-to-gracefully-use-environment-variables-in-a-react-native-app/)
- [Easily Build Forms in React Native](https://medium.com/react-native-development/easily-build-forms-in-react-native-9006fcd2a73b)
- [Interesting React-Native projects to learn from](https://medium.com/react-native-development/interesting-react-native-projects-to-learn-from-99d1a0c0117e)
- [Libs, Articles and Tutorials that will help you to make awesome React-Native apps](https://medium.com/react-native-development/libs-articles-and-tutorials-that-will-help-you-to-make-awesome-react-native-apps-24ec1e528d3e)
-----------------
- Talk about react native architecture and that we have v8 engine on android, JSCore on IOS and how react native bridge between the two using RN-bridge.
--[I am not sure if this still the same maybe you can dig deep on this one](https://formidable.com/blog/2019/react-codegen-part-1)
--[react-native-internals](https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html)
- The difference between hyprid apps and react native apps.
## Difference between **View** and **Text** containers
https://facebook.github.io/react-native/docs/text#containers
The <Text> element is unique relative to layout: **everything inside is no longer using the flexbox layout but using text layout**. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
```jsx=
<Text>
<Text>First part and </Text>
<Text>second part</Text>
</Text>
// Text container: the text will be inline if the space allowed it
// |First part and second part|
// otherwise, the text will flow as if it was one
// |First part |
// |and second |
// |part |
<View>
<Text>First part and </Text>
<Text>second part</Text>
</View>
// View container: each text is its own block
// |First part and|
// |second part |
// otherwise, the text will flow in its own block
// |First part |
// |and |
// |second part|
```
---------------------------
`and red` text will inherit the `fontWeight` from his parent `Text`
```jsx=
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>and red</Text>
</Text>
```
while this one won't inherit the `fontWeight` from his parent `View`
```jsx=
<View style={{fontWeight: 'bold'}}>
<Text style={{color: 'red'}}>not bold but red</Text>
</View>
```
---------------------
# Styling and Layout
https://medium.com/better-programming/styling-in-react-native-step-by-step-540f57411566
-- note: we have (layout direction) [direction](https://facebook.github.io/react-native/docs/layout-props#direction) props which works only for ios => ["rtl", "ltr"]
-- [baseline](https://www.youtube.com/watch?v=S4XkQOKOBwo)
-- [alignItems stretch](https://facebook.github.io/react-native/docs/flexbox#align-items)
-- `Align Content` used with `flex wrap`
react-native uses flexbox but the default direction is a column, not row.
* [docs:Layout with Flexbox](http://facebook.github.io/react-native/docs/flexbox.html)
* [layout props](https://facebook.github.io/react-native/docs/layout-props)
* [Cheat Sheet1](https://github.com/vhpoet/react-native-styling-cheat-sheet)
* [Cheat Sheet2](https://github.com/anujjangid/react-native-styling-cheat-sheet)
* [Yoga-Visual layout builder](https://yogalayout.com/)
* [Understanding Flexbox in React Native](https://www.youtube.com/watch?v=7_yRrrDMCwQ)
* [Styling in React Native: Step By Step](https://medium.com/better-programming/styling-in-react-native-step-by-step-540f57411566)
* [Using Flexbox with React Native](https://www.youtube.com/watch?v=c0szQlEbrmA)
* [App layout](https://www.youtube.com/watch?v=fKbuLVv-GMw)
* [React Native FlexBox Explained](https://www.youtube.com/watch?v=tJHcTjcasDI)
* https://www.youtube.com/playlist?list=PL0CFwZ06NyfKR1x7aYBXBwplNMwa2CMFX
---
* [good exercise](https://www.youtube.com/playlist?list=PLdJFHX7u2EFdHCKNP8SUIgwyDHgRAVRYP)
* [exercise:React Native Full Screen Background Image
](https://aboutreact.com/react-native-full-screen-background-image/)
* [exercise:Image Icon in TextInput](https://aboutreact.com/image-icon-with-react-native-textinput/)
* [ Creating Responsive Layouts](https://www.youtube.com/watch?v=9jUtm-GokZI)
* [Calculator exercise](https://www.youtube.com/watch?v=TkYTPSVvMaM&list=PLYxzS__5yYQlHANFLwcsSzt3elIbYTG1h&index=12)
* [Using Images](https://www.youtube.com/watch?v=dEqsPnehMkc)
* [React Native UI Tutorial Instagram](https://www.youtube.com/playlist?list=PLvjHFH8I1eYYp7nAHrzUZRjRlPekFck2b)
* https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123/
* [A Year of React Native: Styling Part 1](https://www.madebymany.com/stories/a-year-of-react-native-styling-part-1)
* [A Year of React Native: Styling Part 2](https://www.madebymany.com/stories/a-year-of-react-native-styling-part-2)
```javascript=
resizeMode: 'contain'
resizeMode: 'cover'
resizeMode: 'center'
resizeMode: 'stretch'
```
When an image is inside a view of particular width and height, you can use any of the above properties to align the image with the parent div.
- contain: It uses the original width and height of the image and aligns it within the parent div.
- cover: It basically fills the whole view with the image. It’s usually best not to use i as it might cut some parts from the image in order to adjust the whole view.
- center: It aligns the image to the center of the parent view — i.e it makes the image very small using padding and it assigns it to the center of the parent view.
- stretch: As the name suggests, it stretches the image and aligns it within the parent view. It’s best not to use it as it alters image quality.
-----------------------
# Buttons and touch events
**NOTE**: we can't add onClick on views so we have to use buttons or touchables
- [**Button:**](https://facebook.github.io/react-native/docs/button) (native platform button) A basic button component that should render nicely on any platform. Supports a minimal level of customization.
(title prop required for the btn to appear)
- **custom buttons** with **Touchable** handlers
those are wrappers for making views respond properly to touches
-- [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity)(contains style prop)
-- [TouchableHighlight](https://facebook.github.io/react-native/docs/touchablehighlight)(contains style prop)
-- [TouchableNativeFeedback](https://facebook.github.io/react-native/docs/touchablenativefeedback) (Android only)
-- [TouchableWithoutFeedback](https://facebook.github.io/react-native/docs/touchablewithoutfeedback) (not recommended, doesn't provide the user with a visual feedback whenever it is clicked)
- also `Text` component has onPress
-------------
# TextInput
- Difference between [onChange](https://facebook.github.io/react-native/docs/textinput#onchange) and [onChangeText](https://facebook.github.io/react-native/docs/textinput#onchangetext)
- explain the other props like `value`, `maxLength` `keyboardType`, `placeholder`, `secureTextEntry`, `autoFocus`, `editable`...
-----------
# ScrollView
- you should point out that we don't have a default scroll like the one with the browser window
- give and example with a long list which flows out of the window and explain how a scroll view can solve this problem
**later you should point out the difference between the `ScrollView` and the `FlatList`**
--- [The introduction here explains the difference between the two](https://facebook.github.io/react-native/docs/scrollview)
--- [Also this one](https://facebook.github.io/react-native/docs/using-a-listview)
-- it is almost the same as the android recyclerView(FlatList) vs the android ListView(consider this as scrollView)
-- Either you go with them through the rest of the lists ([SectionList](https://facebook.github.io/react-native/docs/sectionlist), [VirtualizedList](https://facebook.github.io/react-native/docs/virtualizedlist)) after reading the docs carefully or leave it to them.
- [example: create expandable list view](https://reactnativecode.com/react-native-expandable-listview-in-android-ios/)
--------------
# Picker
- https://facebook.github.io/react-native/docs/picker
- ### `DatePickerIOS/Android` and `TimePickerAndroid` will be deprecated
- [React Native DateTimePicker](https://github.com/react-native-community/react-native-datetimepicker) is the alternative according to the docs or you can create custom one with the picker component
--------------
# SafeAreaView
- you could talk about <SafeAreaView> element which is applicable only to IOS devices. try it on the docs and see the difference with it and without it.
https://facebook.github.io/react-native/docs/safeareaview
- [check this community library](https://github.com/react-native-community/react-native-safe-area-view)
- https://medium.com/react-native-development/react-native-camera-app-with-live-preview-saturation-and-brightness-filters-d34535cc6d14
-------------
# ActivityIndicator
- https://facebook.github.io/react-native/docs/activityindicator
-------------
# Images/ ImageBackground
- talk about different ways of importing images and its own props like resizeMode, onLoad/End/Start and the difference between them, point out that the source object can take the {uri, width, height} of the image or you can use the style sheet to adjust the dimension
- **Note that for network and data images, you will need to manually specify the dimensions of your image!**
- https://facebook.github.io/react-native/docs/image
- https://facebook.github.io/react-native/docs/imagebackground
- [Exercise:React Native Full Screen Background Image
](https://aboutreact.com/react-native-full-screen-background-image/)
- Exercise: create a rounded Image
-------------
# Components and APIs
- https://facebook.github.io/react-native/docs/components-and-apis.html
-------------
# RESPONSIVE
https://blog.expo.io/media-queries-with-react-native-for-ios-android-and-web-e0b73ed5777b
-------------------------------
check the basics and networking from the docs
- https://facebook.github.io/react-native/docs/network
-------------
- may this is time for small apps like login/signup page || small UI pages like the excercise above on the style section
- small TODO app -> this could be a good chance to let them discover the <Switch> element https://facebook.github.io/react-native/docs/switch
- The <Checkbox> is for android only and shouldn't be used because it will be deprecated in the future either you build your own checkbox or use third-barty library like [react-native-elements](https://react-native-elements.github.io/react-native-elements/docs/checkbox.html) or [nativebase](https://docs.nativebase.io/Components.html#checkbox-headref) or even search for one on npm registry...
- at this stage they can do basic navigation by using object with key(page number) and value(as the componnent)
just UI stuff to get comfortable with the component and how to use them
- [This playlist](https://www.youtube.com/playlist?list=PLl6eqve20a7f2lJEw5lHUpqxG9dpOvVPp) has some small UI idea
-------------
# AsyncStorage
maybe you can talk about asyncStorage(localstorage)
and use it with todo app
- (deprecated)https://facebook.github.io/react-native/docs/asyncstorage
- https://github.com/react-native-community/async-storage
------------
# REACT Navigation library(widely used and default one with expo)
* best if you went with a quick video then you can go through the docs
- https://facebook.github.io/react-native/docs/navigation
- https://reactnavigation.org/
- [Complex Navigation Example with React Navigation
](https://www.reactnativeschool.com/complex-navigation-example-with-react-navigation)
------------
maybe it is time to move to expo!!
------------
# Auth
https://www.youtube.com/watch?v=Qt2ohl-hyFw
https://www.youtube.com/watch?v=b6nWmWFxJDU
https://www.youtube.com/watch?v=jGU2I6sYDLE
https://www.youtube.com/watch?v=DgwyEb_n290
--
https://medium.com/react-native-training/react-native-authentication-in-depth-8d8c2e4ad81b
using
- firebase(easy you would deal with it as web firebase)
https://www.youtube.com/watch?v=pNZks2j2Qaw
- [Fun, Fast, and Free Login with React Native
](https://scotch.io/tutorials/fun-fast-and-free-login-with-react-native)
- [okta](https://developer.okta.com/code/react-native/)
- [HANDLING AUTHENTICATION IN REACT NATIVE USING OKTA](https://pusher.com/tutorials/authentication-react-native-okta)
- https://scotch.io/tutorials/build-a-react-native-app-and-authenticate-with-oauth-20
- https://developer.okta.com/blog/2018/03/16/build-react-native-authentication-oauth-2
- [expo auth session](https://levelup.gitconnected.com/react-native-implementing-browser-based-authentication-using-expos-authsession-component-ffee25b50ae8)
- [How Authentication Flow works in React Native apps using React Navigation 4.x](https://heartbeat.fritz.ai/how-authentication-flow-works-in-react-native-apps-using-react-navigation-4-x-a30bb4d9e5d6)
[Firebase & Github Authentication with React Native](https://blog.expo.io/firebase-github-authentication-with-react-native-2543e32697b4)
- https://www.youtube.com/playlist?list=PLE9m_QqEHgX2azRbYX-ZyqLiq03YYldw0
------------
camera
- https://github.com/react-native-community/react-native-image-picker
- https://www.youtube.com/watch?v=Ikgfr9Yot1M&list=PLH66a98tGFoBawtmawLRtWSCI1iEKl3Dj&index=7&t=0s
- [Build a QR Scanner](https://www.toptal.com/react-native/react-native-camera-tutorial)
- [Mastering the React Native Camera Roll](https://www.youtube.com/watch?v=T7NdSiV-DUk)
- [How to pick images from Camera & Gallery in React Native app](https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78/)
- [Uploading Images in React Native](https://www.reactnativeschool.com/uploading-images-in-react-native/installing-react-native-image-picker)
- https://aboutreact.com/example-of-image-picker-in-react-native/
- https://github.com/ivpusic/react-native-image-crop-picker
------------
## [Types of react navigation navigators](https://reactnavigation.org/docs/en/status-bar.html):
1. StackNavigation
2. [DrawerNavigation](https://reactnavigation.org/docs/en/drawer-based-navigation.html)
3. [TabNavigation](https://reactnavigation.org/docs/en/tab-based-navigation.html)
[deep linking](https://reactnavigation.org/docs/en/deep-linking.html)
[Different status bar configuration based on route](https://reactnavigation.org/docs/en/status-bar.html)
[Replacing the title with a custom component](https://reactnavigation.org/docs/en/headers.html#replacing-the-title-with-a-custom-component)
[Header interaction with its screen component](https://reactnavigation.org/docs/en/header-buttons.html#header-interaction-with-its-screen-component)
**StackNavigator**
- The only required configuration for a route is the screen component. You can read more about the other options available in the [StackNavigator reference](https://reactnavigation.org/docs/en/stack-navigator.html).
- The *keys* in the route configuration object are the *route names* and the *values* are the *configuration* for that route
- To specify what the initial route in a stack is, provide an initialRouteName on the stack options object.
- Each time you call *push* we add a new route to the navigation stack. When you call *navigate* it first tries to find an existing route with that name, and only pushes a new route if there isn't yet one on the stack.
- The navigationOptions static property can be an object or a function. When it is a function, it is provided with an object with the navigation prop, screenProps, and navigationOptions on it
- You can set buttons in the header through the headerLeft and headerRight properties in navigationOptions.
- The back button is fully customizable with `headerLef`t, but if you just want to change the title or image, there are other **navigationOptions** for that — `headerBackTitle`, `headerTruncatedBackTitle`, and `headerBackImage`.
Sign in with Wallet
Connect another wallet