React Native I Flashcards

Question

**What** is the **StyleSheet Api?**

Answer 1

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.**

Answer 2

Platform module

Answer 3

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**

Answer 4

**Only 3** are **used most of the time!** ## Footnote **App market is incredibly competitive**

Answer 5

**view** looks **roughly the same** across **devices**

Answer 6

update **app.json orientation to "default"** **use hook** from **react-native-community** **always returns updated dimensions** **everytime screen changes, this hook recalculates dimensions**

Answer 7

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**

Answer 8

**flexDirection:** **"row"** align horizonatally **"column"** align veritically

Answer 9

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

Answer 10

**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"**

Answer 11

**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

Answer 12

**alignSelf property**

Answer 13

**noWrap** one or more items **get shrunk** **solution?** **enable wrapping** **flexWrap: "wrap"** **puts additional content on a new line and maintains dimensions**

Answer 14

**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

Answer 15

**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

Answer 16

top bottom left right \*moves **position relative** to **others without affecting overall layout**

Answer 17

**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

Answer 18

**duplication of color codes** **repeated** in **multiple places** **extract** and **put in separate files** **can rebrand** and **use diff colors (single file to modify)**

Answer 19

**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**

Answer 20

setting **borderRadius** to at **least 50% size** ## Footnote **makes a circle**

Answer 21

**iOS** **requires setting three properties** **shadowColor** **shadowOffset** - position of shadow **shadowOpacity** - how dark **Android** **only one property, cannot control much** elevation

Answer 22

**padding** the space inside a component **margin** the space outside a component

Answer 23

padding paddingHorizontal paddingLeft paddingRight margin marginHorizontal marginLeft marginRight

Answer 24

**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

Answer 25

**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

Answer 26

**almost every app uses icons** **expo vector icons** **available (imported) with expo project**

Answer 27

**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**

Answer 28

useful if **want to customize behavior and styles** create separate files for platform specifics **example** - AppText.ios.js, AppText.android.js

Answer 29

create separate files React-Native will automatically know which to insert depending on device!

Answer 30

**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/

Answer 31

**every app** needs to **present a list of data** **Building:** Three new screens a bunch of re-usable components

Answer 32

**used** for **rendering flat lists** ## Footnote **includes:** **headers** **footers** **pull to refresh** **scroll loading**

Answer 33

**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**

Answer 34

an object with a bunch of useful properties device, etc **statusBar Height** 24px android 44px iOS

Answer 35

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

Answer 36

**FlatList component** has an **ItemSeparatorComponent** property

Answer 37

**Chances are...** we will **have another FlatList component in our App** **soln?** **we want** to **extract a re-usable separator component**

Answer 38

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 componen**t Ex. **MessageScreen** should determine what should happen when user taps on a message (ListItem) Soln?

Answer 39

**a library** for **handling gestures** ## Footnote **use swipeable (API docs)** **to incredible left/right swipe features**

Answer 40

**extract renderRightActions logic** **put** this **logic** into a **re-usable component** **ListItemDeleteAction.js**

Answer 41

**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**

Answer 42

useState() takes an initial state returns an array array[0] is variable array[1] is a fn for updating variable

Answer 43

**Where we use the ListItemDeleteAction component** is where **we should define the onPress action (MessagesScreen)** ## Footnote **pass fn into ListItemDeleteAction as a prop (onPress)** **simply delegate onPress to this fn**

Answer 44

**pass additional props to FlatList component** refreshing

Answer 45

**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 componen**t for **myListing/myMessages** create **a view** that **acts as a container for Logout Item**

Answer 46

**render image only if prop given** {image && } basic conditional rendering **wrap in braces using && operator**

Answer 47

declare an additional prop (style) pass an array of styles to the SafeAreaView component

Answer 48

**Before,** **ListItem component** has **no background** **what we see** if background of **screen component** add **backgroundColor to ListItem details**

Answer 49

**Getting input from the user** **Learn:** **input components** available in **React Native core** **Building pretty input boxes** **build** a **custom input** feature **from scratch**

Answer 50

**TextInput component** **useful props:** autocapitalize autocorrect autofocus

Answer 51

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**

Answer 52

**extract style** into a **separate file** **import** into **AppTextInput module**

Answer 53

**setValue** prop to a **state variable** handle **onVariableChange to update state variable**

Answer 54

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**

Answer 55

Going to **take app to next level** ## Footnote **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**

Answer 56

Custom Screen composed of: useState setEmail, setPassword \< Screen \> \< Image /\> \< AppTextInput /\> autoCapitalize autoCorrect icon onChangeText - setEmail / setPassword placeholder secureTextEntry textContentType \< AppButton /\> \< Screen \> rnss

Answer 57

**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!

Answer 58

**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**

Answer 59

**validation library like Joi** **Formik** has **integration with Yup** **chain methods** to **build a complex schema**

Answer 60

**handle** **onBlur event** **add visible** as **another prop**

Answer 61

**In each...** have to handle error message handle onBlur handle onChangeText **refactor...**

Answer 62

**Extract SubmitButton** into a **re-usable component**

Answer 63

**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

Answer 64

**Wraps** Formik Context around **AppPicker component** **Why?** Allows us to **access formik Contex**t for **passing data**

Answer 65

Long Text **Soln?** **Always test** components **with long text**

Answer 66

**apply** maxNumberOfLines **use** bring other props ...otherProps pass { ...otherProps } to Text component

Answer 67

Already **added the ability to pass additional props** to AppText component pass **numberOfLines prop in Card** component

Answer 68

**remove** **"width"** from **AppTextInput component container style**

Answer 69

**re-usable component** **extensible** design of **AppPicker and AppFormPicker** pass a **PickerItemComponent** dynamically **using props** set **CatagoryPicker** as **PickerItemComponent** in **ListingEditScreen**

Answer 70

**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

Answer 71

code -\> preferences -\> snippets