React Native I Flashcards
What are we going to learn?
How to build fast and beautiful apps in react native
learn everything from scratch
all code explained
real world app
selling things you don’t need
login/register
see where item is on map
send message to seller
push notification to seller
can filter lists
can add a new listing
beautiful animation
What should we know to get started?
Javascript
React because React Native is built on top
it targets mobile platforms
components
JSX
props
state
What is React Native?
a framework for building native apps for iOS and Android
build truly native apps
don’t need to know iOS or Android programming
only need iOS/Android if app is complicated, need to talk to their native APIs directly
write all app code in Javascript
a lot of companies prefer to build apps using React Native
don’t need two developers / code bases
Five Apps built using React Native:
Pintrest
Skype
Uber Eats
Use your skills to build a real App in React Native
Can you use React Native to build a serious app?
misconception:
can only build a serious app using native language (iOS or Android)
Five Apps built using React Native:
Pintrest
Skype
Uber Eats
Use your skills to build a real App in React Native
the best tool to use to build native apps
What are the two ways to build React Native apps?
Plain React Native
React Native command line interface
android / ios folders (native projects)
Javascript code on side, can share across
for people with some experience with mobile development
Expo CLI
a set of tools and framework that sits on top of React Native
hides a lot of complexity
makes it incredibly fast and easy
with no experience, can build app in a few minutes
only have Javascript code
cannot work natively with API of iOS and Android
gives a lot of native features
can customize native components by ejecting from Expo
How can we debug our React Native apps inside VSCode?
React Native Tools plugin by Microsoft
React-Native/React/Redux snippets to generate code fast
material Icon theme - files get pretty icons depending on type
What’s in a React-Native project folder?
assets
all images, videos, audio files, etc. to bundle with app
App.js
basic React-Native component
import React, components from React-Native
no HTML elements - use components by React-Native
is like a
when compiled, translated .css like stuff is compiled to the native widgets (iOS / Android)
represent elements in platform independent way
React Native maps to native widgets during compilation
apps built with React Native are real native apps (because compiles to native code)
What is Metro Bundler?
Javascript bundler for React Native
responsible for compiling all JS files into a single file
allows us to publish to expo (no need for App store) for anyone to view app
**only for development / testing (not production)
can send an email for people to view app
can open in expo app to view app
How can we view our React Native app on an iOS simulator?
download xtools
run iOS simulator
fast refresh - can see updates immediately in simulator
control + D to bring up developer menu
How can we setup an android virtual device to run our React Native apps?
during development
easier to run on emulator or simulated device
install Android studio
add export to bash file and .zshrc
https://docs.expo.io/workflow/android-studio-emulator/
How do we test our app on a real device?
simulators are great
but testing on a real app is important
How can we debug our React Native apps in Chrome?
How can we debug our app using chrome developer tools?
How can we debug our React Native apps in VScode?
command + m (android virtual)
enable remote debugging
close browser window
React Native tools (VScode extension)
create a launch.json file
How do we publish or apps in expo?
Hint: $ expo publish
much easier than dealing with App stores
purely for development and testing purposes
can publish in Metro bundler
What fundamental concepts are we going to learn?
The components and core APIs we will use most
learn foundations and learn other components / APIs on your own
full list available:
https://reactnative.dev/docs/components-and-apis
components for building user interfaces
cross platform components
will map to Native equivalent
have specific components for android/iOS
can give us access to Native APIs
What is view component?
Hint: like div
don’t have HTML elements like div, paragraph, etc
have to build UI using React Native components
is most basic / fundamental component
used to group / lay out children
What is the text component?
Second most fundamental component
used for displaying text
always wrap in component
Props:
numberOfLines
numberOfLines = { }
can truncate lines if too long
onPress = {handler}
What should I get used to when building apps in React Native?
Reading React Native docs
gives better understanding of capabilities and limitations of components
What is the image component?
can display local images bundled with app
network images downloaded from internet
Local Images
use .require function ( )
WARNING:
react native packager will include file in bundler (.require)
increases size of app
use if really need to be included (like icon, splash screen)
otherwise download from internet
Network Images
pass an object to image component with property uri: set to URL
manually specify dimensions
Props
blurRadius
loadingIndicatorSource
fadeDuration
resizeMode
if image is different size than what we specify
What are Touchable components?
We can make anything touchable
TouchableOpacity
makes image temporary white fade
TouchableHighlight
makes image temporarily black fade
onPress event
can handle events
What is the component?
What is the alert function( ) ?
alert we display gets map to it’s native equivalent
can customize title, etc. using Alert api
How can we create custom alert messages?
What is the StyleSheet Api?
can define styles below component
convention to define styles below component
Mosh prefers to have style below components
styles are not CSS
inspired by CSS but just javascript properties
essentially passing a plain JS object
React Native will maps component to native counterpart and apply the styles
why use StyleSheet.create ({ })
validates what we pass as styles
returns an object
validates properties ensuring we don’t misspell a word, etc.
How do we detect the platform our app is running and apply custom Native features?
Platform module
What are we going to learn in layouts?
How to create layouts in React native
Will build first two screens of our app
will use material in excercises at end of the section
How many apps do users have these days?
Only 3 are used most of the time!
App market is incredibly competitive
What is density independent pixels?
view looks roughly the same across devices
How do we detect rotation and resize components accordingly?
Hint: npm i @react-native-community/hooks
update app.json orientation to “default”
use hook from react-native-community
always returns updated dimensions
everytime screen changes, this hook recalculates dimensions
What is Flexbox?
library for building complex layouts that work consistently across different screens
How?
setup a view as container
set flexDirection and justifyContent properties
align children inside container
How can we align items along the main or primary access?
Hint: flexDirection
flexDirection:
“row”
align horizonatally
“column”
align veritically
What is “column-reverse” and “row-reverse” flexDirections?
means of aligning content in our container
column-reverse
align across vertical axis (primary) in reverse
row-reverse
align across horizontal axis (primary) in reverse
How do we align items (children) across the primary axis in our container (parent)?
Hint: justifyContent
justifyContent property in our container
sets alignment for children
“center”
align items at center of main access
“flexend” / “flex-start”
align items at end or start of main access
“space-evenly”
How do we align items accross the secondary axis?
Hint: alignItems
alignItems property
aligns across secondary axis
“center”
aligns in center of secondary axis
“baseline”
gives content same baseline
“flex-end”
items appear at end of secondary axis
“stretch”
default behavior aligns all the way across secondary axis
How can we align an individual item in a container?
alignSelf property
What is the default behavior if one or more of our items overflow across the main access?
Hint: noWrap
noWrap
one or more items get shrunk
solution?
enable wrapping
flexWrap: “wrap”
puts additional content on a new line and maintains dimensions
What is the difference between the “alignContent” property and the “alignItems” property?
alignItems
determines alignment of items within each line
if multiple lines, aligns each line according to secondary axis
Ex. second line items are aligned in center!
alignContent
determines alignment of entire content
*only works if we have wrapping
What is flexBasis, flexGrow and flexShrink?
flexBasis
equivalent to setting height / width depending on main axis
flexGrow
item will grow to fit available space
exactly the same as setting flex property in item
flexShrink
not used often
opposite of flexGrow
shrinks item if there is overflow
How do we move items in our container up, down, left or right?
top
bottom
left
right
*moves position relative to others without affecting overall layout
What is relative vs. absolute positioning in react native?
by default, position set to “relative”
move relative to position without layout being affected
absolute
positioned relative to parent
other views move around and are not in original positions
How do we build the welcome screen of our app using React Native?
How do we build the ViewImageScreen in React Native?
How can we refactor this code?
duplication of color codes
repeated in multiple places
extract and put in separate files
can rebrand and use diff colors (single file to modify)
What are we going to learn in the section on styling?
how to build beautiful user interfaces
implement new screen and re-usable components
various style properties
organizing styles
platform-specific styles
icons to build beautiful interfaces
How do we add boarders to our views?
setting borderRadius to at least 50% size
makes a circle
How do we apply a shadow?
iOS
requires setting three properties
shadowColor
shadowOffset - position of shadow
shadowOpacity - how dark
Android
only one property, cannot control much
elevation
What is the difference between padding and margin?
padding
the space inside a component
margin
the space outside a component
How do we apply padding and margins?
padding
paddingHorizontal
paddingLeft
paddingRight
margin
marginHorizontal
marginLeft
marginRight
How do we apply styling to text?
only available for Text
no style inheritance in React Native
fontFamily
have to use Platform API to determine device
iOS and Android have different font types
fontSize
textTransform
textAlign
multiple lines right or left align
fontWeight
lineHeight
space between lines
Platform specific fonts
https://github.com/react-native-training/react-native-fonts
How do we ensure all text looks the same across multiple components?
encapsultating style
encapsulate all styles for text inside a custom text component
create a custom text component
used like a text component
encapsulates all styles
How can we find icons?
almost every app uses icons
expo vector icons
available (imported) with expo project
How can we add icons to our React-Native project?
What is the challenge with this code?
setting many platform specific styles this way is unmaintainable
have to use ‘Platform.OS == android ? x : y’ everytime
duplicating code!
Soln?
Platform.select
takes a key-value pair
returns an object
spread (…) properties into StyleSheet object
How can we separate platform specific behavior?
useful if want to customize behavior and styles
create separate files for platform specifics
example - AppText.ios.js, AppText.android.js
What is another approach for this implementation?
create separate files
React-Native will automatically know which to insert depending on device!
How do we create the login button component?
How can we add the login and register button to our welcome screen?
How do we build the Card component?
How can we build the ListingDetailsScreen?
How do we implement the listing author component (ListItem)?
How do we replace the placeholders with buttons in our ViewImageScreen?
What are UI libraries?
In this course,
you learn how to build UI components from scratch because that’s an essential skill you need to master.
But in a real app,
you may want to use a UI toolkit.
These toolkits are great.
They have beautiful components that you can easily add to your apps.
React Native Elements (My Recommendation):
https://react-native-elements.github.io/react-native-elements/
React Native Paper:
https://callstack.github.io/react-native-paper/
Native Base: https://nativebase.io/
What will we build in the list section?
every app needs to present a list of data
Building:
Three new screens
a bunch of re-usable components
What is Flatlist React Native component?
used for rendering flat lists
includes:
headers
footers
pull to refresh
scroll loading
How do we solve the problem of this list being in the corner of our screen?
SafeAreaView
The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.
Soln
detect OS type and if android, use another option
alt?
expo constants
What is an alternative approach for implementing padding at the top of the MessagesScreen?
What are expo-constants?
Hint: npm i expo-constants
an object with a bunch of useful properties
device, etc
statusBar Height
24px android
44px iOS
What’s the tiny problem with this implementation?
everytime we want to make a new screen with a SafeAreaView
have to re-write code
use Expo constants, etc.
Soln?
Extract a re-usable component
How do we add separation between our items in the list?
FlatList component
has an ItemSeparatorComponent property
What’s the problem with this implementation?
Chances are…
we will have another FlatList component in our App
soln?
we want to extract a re-usable separator component
How do we implement the MessageScreen using re-usable components?
What don’t we want to do here?
handle the logic for the onPress event in ListItem component
Why?
component should be re-usable
in one context, display alert on tap
in another context, take user to another screen
should be determined by consumer of ListItem component
Ex. MessageScreen should determine what should happen when user taps on a message (ListItem)
Soln?
How do we implement the ListItem onPress event in our MessagesScreen?
What is gestureHandler?
a library for handling gestures
use swipeable (API docs)
to incredible left/right swipe features
How do we create the swipe render action?
How can we refactor this?
extract renderRightActions logic
put this logic into a re-usable component
ListItemDeleteAction.js
How do we implement handling a swipe?
How do we implement deleting a message in the MessagesScreen?
Logic for onPress in caller of this component (MessagesScreen)
Why?
So we can re-use the ListItemDelete action component
Also
Hooks for stateless functional components
useState
How can we re-write this code?
Hint: setCount similar to setState but for sfc vs. class components
useState()
takes an initial state
returns an array
array[0] is variable
array[1] is a fn for updating variable
How do we handle deleting an item?
Where we use the ListItemDeleteAction component is where we should define the onPress action (MessagesScreen)
pass fn into ListItemDeleteAction as a prop (onPress)
simply delegate onPress to this fn
How do we implement pull to refresh in our MessagesScreen?
pass additional props to FlatList component
refreshing
How do we create a re-usable Icon component?
How should we approach building this screen?
extract logic into a re-usable component
build a re-usable Icon
create a view that acts as a container for ListItem
add some margin
render a FlatList component for myListing/myMessages
create a view that acts as a container for Logout Item
How can we extend our ListItem component and give ability to render an icon?
render image only if prop given
{image && }
basic conditional rendering
wrap in braces using && operator
How can we change the Screen component to allow alternative styles to be passed as props?
declare an additional prop (style)
pass an array of styles to the SafeAreaView component
How do we make our list items stand out?
Before,
ListItem component has no background
what we see if background of screen component
add backgroundColor to ListItem details
How do we build the account screen?
How do we build the Listings Screen?
What are we going to learn in the section on input components?
Getting input from the user
Learn:
input components available in React Native core
Building pretty input boxes
build a custom input feature from scratch
What component do we use to get text from the user?
TextInput component
useful props:
autocapitalize
autocorrect
autofocus
How do we refactor this code to create a beautiful, re-usable component?
How do we pass props into a composite component?
use spread operator to get all other props
pass this object to composite component
Ex. at first, only desctructured icon props
Then, added …otherProps
so we can pass placeholder prop to TextInput component
How do we create a re-usable input component?
How can we refactor this code?
extract style into a separate file
import into AppTextInput module
What is the Switch component?
setValue prop to a state variable
handle onVariableChange to update state variable
How do we create the foundation of the AppPicker component?
How do we edit this code to display a modal box (to choose elements)?
In user interface design for computer applications, a modal window is a graphical control element subordinate to an application’s main window. It creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it.
Soln?
Wrap in a touchable component to handle onPress event
using hooks, set visible to true during onPress event
How do we implement AppPicker component?
Hint: TouchableWithoutFeedback, Modal,
FlatList, PickerItem
What are we going to build in the forms section?
Going to take app to next level
add login form
add register form
add form to create a new listing
Learn:
how to valid form input data
how to build re-usable form components
popular libraries
How can we build the login screen?
Custom Screen composed of:
useState
setEmail, setPassword
< Screen >
< Image />
< AppTextInput />
autoCapitalize
autoCorrect
icon
onChangeText - setEmail / setPassword
placeholder
secureTextEntry
textContentType
< AppButton />
< Screen >
rnss
What’s the problem with this approach to building forms?
Unmaintainable as we add more fields
Why?
For every new field, must set a state variable (create hook)
have to write code to validate variable
can get painful with a lot of fields
Soln?
Formik
popular library for creating forms
eliminates need to use hooks
tracks our state for us!
What is Formik?
Hint: npm i Formik
Popular library for building forms in React-Native
know what it is and how it works
probably in your next React-Native project
you’ll use it in every project and love it
Why?
Takes care of complexity of building forms
keeps track of form state
gives validation out of box
works with React and React Native
Trusted in production?
Lyft, Walmart, Booking.com, Nasdaq, US Army
How do we refactor this code?
Hint: Formik
What is Yup?
validation library like Joi
Formik has integration with Yup
chain methods to build a complex schema
How do we implement validation using Formik on our LoginScreen?
How do we refactor this code?
How can we show an error message only if the input field has an error & has been touched?
handle onBlur event
add visible as another prop
How do we refactor this code?
In each…
have to handle error message
handle onBlur
handle onChangeText
refactor…
How do we re-factor this code?
Extract SubmitButton into a re-usable component
How do we refactor this code?
How do we re-organize these folders?
How do we build the register screen?
How do we build the Listing Edit screen?
What do we have to do in the final section of React-Native (part one)?
Imagine we got hired as a React-Native developer:
Real world situation:
given a new project build by someone else
have to fix a number of issues
have to implement a new feature
Excercises:
very important
especially the last excercise
Why do we need to create the AppFormPicker component?
Wraps Formik Context around AppPicker component
Why?
Allows us to access formik Context for passing data
How do we refactor this code?
What is an issue that happens frequently in mobile apps?
Long Text
Soln?
Always test components with long text
How can we solve this issue?
apply
maxNumberOfLines
use
bring other props …otherProps
pass { …otherProps } to Text component
How can we fix this code?
Already added the ability to pass additional props to AppText component
pass numberOfLines prop in Card component
How do we dynamically display the price width?
remove “width” from AppTextInput component container style
How do we dynamically set the width of the picker component?
How do we create the CategoryPickerItem component?
re-usable component
extensible design of AppPicker and AppFormPicker
pass a PickerItemComponent dynamically using props
set CatagoryPicker as PickerItemComponent in ListingEditScreen
What is repetative about creating a new component?
Have to do a few steps:
rsf (react stateless function)
rnss (react native stylesheet)
render a
import rn view, stylesheet
apply a style to the view container
Soln?
Custom snippets
How do we create a react snippet?
code -> preferences -> snippets
