This code is my work, but done by following a tutorial at https://www.youtube.com/watch?v=0-S5a0eXPoc
- Debug code using Chrome Developer Tools
- Shake physical device or
ctrl-m
on emulator to launch developer menu - Enable Remote JS Debugging
ctrl-shift-j
to open Developer Tools- Go to sources tab, pause on caught exceptions
- Disable Remote JS Debugging when done
- Debug code within VSCode
- Go to
launch.json
and add a new configuration - Change port number for VSCode
- Go to
Preferences
and thenSettings
. - Look up
react-native.package.port
and change to the one that is shown bylocalhost
- Close the Chrome Developer Tools window if it's open.
- You can either be debugging with Chrome Developer Tools or VSCode, not both at the same time
- Reload Expo
- When done debugging, disconnect from app and reload.
- Disable Remote JS Debugging when done
- Publish from Metro Bundler
- Click
Publish or Republish project...
- This will start asking you questions
- Name: name found in
app.json
- Slug: slug found in
app.json
, eventually becomes part of the expo URL - GitHub Source URL: githubUrl found in
app.json
optional, but self-explanatory - Description: description found in
app.json
, optional but self-explanatory - This may redirect you to the command line if you are not signed in to an Expo account.
- Publishes your app to
https://expo.io/@{username}/{slug}
- Publish from command line
- Does the same as above, but all in the command line
- View
- Most basic component in React Native
- Functions like a div in HTML
- Text
numberOfLines
- Will truncate a really long line of text
- Without this,
Text
will wrap around onPress
- Executes some function when the element is pressed
- Can use single line function inline or an outside function
- Image
source
- Local images
- Source is written using
requires
:source={require("[insert local path to image]]")}
- React Native reads the metadata of the image to interpret the dimensions
- Network images
- Source is written using
Object
:source={{ width: 200, height: 300, uri: "[insert link to image]" }}
- Need to manually list the dimensions
- Props
blurRadius
: radius of the blur filter to be added to the imageloadingIndicatorSource
: will display a local image will the actual image is being downloadedfadeDuration
: fades in the image as it's loaded, only supported in AndroidresizeMode
: if your specified image dimensions don't match the expected dimensions- Touchable
TouchableWithoutFeedback
onPress
- normal tap
onLongPress
- long tap
TouchableOpacity
- Same function as
TouchableWithoutFeedback
but changes the opacity of the image when touched, makes it lighter TouchableHighlight
- Same function as
TouchableWithoutFeedback
but highlights the image when touched, makes it darker TouchableNativeFeedback
- Only available on Android, gives error on iOS
- Doesn't function well with images but does a cicle expanding thing when tapped on a View or something with a background
- Button
- Fairly straightforward
- On iOS shows up as clickable text, on Android shows up as rectangular button
- Alert
- Not a component but is treated like an API (object with methods)
- Creates an alert in the native OS
Alert.alert
- Displays a method
Alert.prompt
- Diplays a question which we get an answer from, only works on iOS
- Platform
- Can detect what OS the device is running
- Good for adjusting style (e.g.
SafeAreaView
only works on iOS StatusBar
- Can get us the height of the status bar as it varies from Android to Android
- Styling
- Not based on CSS
- Using
StyleSheet.create
allows for validation checking for spelling mistakes and things - Can pass multiple style components, right-most one will override the left-most ones
- Dimensions
- Density-independent Pixels (DIPS)
- Physical Pixels = DIPs x Scale Factor
- So using exact numbers doesn't guarantee the same size across different devices
- Can use percentages to express how much of the screen we wish to cover (e.g.
width: '50%'
) - Dimensions API
Dimensions.get("window" or "screen")
- screen returns the size of the screen, window returns the size of the app window
- both are same on iOS, window is smaller than screen on Android (StatusBar)
- Doesn't get updated when the orientation changes
react-native-community/hooks
- Outside library to interpret screen orientation
useDimensions
: gets the dimensions of the screen and updates on orientation changeuseDeviceOrientation
: returns true/false for portrait vs landscape- Make sure you don't place elements where they could be covered by the iPhone notch
- Import and use
SafeAreaView
in place ofView
- Adds a bit of padding at the top so content isn't covered up by the notch
flex
: when set to 1, means that the view is flexible and will grow both horizontally and vertically to fit the free space- Can nest flex components and they will grow to fit the outer component
- By default components are aligned vertically
- Set
flexDirection
to "row" to align horizontally - Primary access is across the phone, cross axis is up and down
- Set
flexDirection
to "row-reverse" to align horizontally from right - Set
flexDirection
to "column-reverse" to align vertically from the bottom backgroundColor
: the background color, can be set using RGB values like in web apps or named colorsjustifyContent
: justifies content along whatever is the main axisalignItems
: justifies content along whatever is the cross axisalignSelf
: align just the itemflexWrap
: causes the items to wrap around- Causes
alignItems
to operate per line - Using
alignContent
will align all content along the cross axis flexBasis
: sets size of an item along the primary axisflexGrow
: same as settingflex
flexShrink
: the opposite offlexGrow
, tells code this property can be shrunk if necessary, also same as settingflex
to a negative valueposition
: position is by default relative, so it doesn't affect any other component, can be set to absolute, and it moves relative to the parent component
- Multi-cursor Editing:
ctrl-d
when highlighting text lets you edit all the instances of that text at once - Move blocks of code up/down:
alt-[up arrow/down arrow]
after highlighting text lets you move that text up or down - Duplicate code blocks:
shift-alt-down arrow
after highlighting text duplicates the text below it - Show all options for code:
ctrl-space
will bring up a menu of all available things you can type there