04: React Native Notes on some Basics - team-photo-app/photo-app GitHub Wiki

React Native

Has its own components v HTML tags Platform agnostic ==> android/ios ==> "" Still use Javascript, just uses React Native's components

Expo CLI v React Native CLI

Expo:

  • managed app development ex access to camera, etc
  • abstracts some complexity away
  • proprietary limited to expo ecosystem
  • abstracts some complexity away

React Native CLI:

  • Full control
  • Bare Bones, no convenience or utility features

(Just use Expo)

Simulators:

Expo: in browser simulator for both?

Android Install android studio

iOS Install xcode for ios

Time mark:

Simulator 0h47 Basics 1h18 Builtin components, how to style, layout, using touchable Debugging 3h10 Bread & Butter 3h41

Styling

Inline styles vs Stylesheet Objects (Use Stylesheet object)

Inline style

<TextInput style={ {borderColor: black, key: value, key, value, ...} }/>
- don't use quotations around keys ie 'border-color': 'black' is wrong
- style properties are heavily influenced by CSS but are specific to react-native ( border-color is borderColor )
- do use quotations aound values borderColor: 'black'
- camelCased
- look up official docs for a complete list

<TextInput style={{
	borderColor: 'black',
	borderWidth: 1,
	padding: 10
}}

StyleSheet:

automatically adds validation for incorrect styles.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({ key: value, header: { ... }, inputContainer: { ... }, arbitraryName: { ... actual styles ... }, });

Now, import into whichever component and style={styles.arbitaryName}

Now it's -=Modular=-

Layout

React-native makes use of flexbox
Every <View> uses flexbox by default
	By default, flexDirection positioned by column (vertically) not row (horizontal)
With react-native's flexbox there is a main axis and a cross axis.
If main axis is set to row, then it is left to right.
If set to column, then it is top to bottom.
Cross axis is opposite of main axis.
If main axis is row, cross axis is column, and vice versa.
justifyContent is for main axis positioning for children elements
alignItems is for cross axis positioning for children elements
setting both to center will mean centered vertically and horizontally

flex is a property for children elements of a parent using flex positioning (View by default uses flex).

example (using inline style):
<View style={{ // parent
	flexDirection: 'row',
	width: '80%', // Container for all children maxes at 80%
	justifyContent: 'space-around',
	alignItems: 'stretch',
}}>
	<View style={{ // child
		flex: 1, // fraction of awailable space allowed by parent
		justifyContent: 'center',
		alignItems: 'center',
	}}
		<Text>Hi</Text>
	</View>
	<View style={{ // child
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
	}}
		<Text>Hi</Text>
	</View>
</View>

parent style: alignitem: 'center'
children style: flex: 1

In react native's flexbox, if children dont have a flex: number property, then the parent container will only be as high and wide as its tallest and widest children. Adding a flex: number to children will add context to the parent container and allocate space depending on the flex properties of its children.

ScrollView

Scrolling is not default in react native.

import { ScrollView } from 'react-native'

HOWEVER If contents are variable, consider using In other words - use ScrollView for fixed lists (menu)

FlatList

Flatlist replaces mapping over a list of things. To do this is needs a 'data' and a 'renderItem' attribute. data = a data source (ie array of stuff) renderItem = a builtin map function that takes an argument itemData which itself is an object with an item, index and separator property: itemData = { item: {...}, index: number, separator: ??? }

Example:

<FlatList data={todoList} renderItem={itemData => ( {itemData.item.todo} )}

So instead of doing .map((todo, idx) => {}) each individual todo and idx are squeezed itemData in its .item, .index

*** itemData.item._____

FlatList likes to use objects. So instead of giving it an array of strings, give it an array of objects. In each object, it prefers to have a 'key' or 'id' property in addition to whatever else you have:

[
	{ key: (some id here), todo: 'user input string' },
	{ key: ..., todo: '...' },
	{ key: ..., todo: '...' },
	...
]

Using the above array, we would output it as {itemData.item.todo}

*** Handling React's key for listed components

Use attribute keyExtractor={}, this takes a function with arguments similar to map: (item, index) => {item.key/id}
keyExtractor will look through each item object for its key or id property and use that.

<FlatList
	keyExtractor={(item, index) => item.key}
	data={todoList}
	renderItem={itemData => (
		<View>
			<Text>{itemData.item.todo}</Text>
		</View>
	)}

import { FlatList } from 'react-native'

<FlatList data={todoList} renderItem={itemData => ( {itemData.item} )}

Pressables

Touchable / TouchableOpacity / TouchableHighlight

Wrap elements with a

{ TouchableOpacity } from 'react-native'; <TouchableOpacity={0-1} onPress={()=>{}}> ... element to be pressable ...

Modal Components

import { Modal } from 'react-native';

State (functional) review

import { useState } from 'react';

const [outputText, setOutputText] = useState('default state'); outputText = current State snapshot setOutputText = function that allows you to set state to new value

⚠️ **GitHub.com Fallback** ⚠️