ramyac6 / DoneWithIt

Following a tutorial (https://www.youtube.com/watch?v=0-S5a0eXPoc) to practice React Native skills

DoneWithIt

This code is my work, but done by following a tutorial at https://www.youtube.com/watch?v=0-S5a0eXPoc

Things I've Learned

Debugging

• 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 then Settings.
• Look up react-native.package.port and change to the one that is shown by localhost
• 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

Publishing

• 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.jsonoptional, 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

Components

• 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 image
• loadingIndicatorSource: will display a local image will the actual image is being downloaded
• fadeDuration: fades in the image as it's loaded, only supported in Android
• resizeMode: 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 change
• useDeviceOrientation: 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 of View
• 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 colors
• justifyContent: justifies content along whatever is the main axis
• alignItems: justifies content along whatever is the cross axis
• alignSelf: align just the item
• flexWrap: 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 axis
• flexGrow: same as setting flex
• flexShrink: the opposite of flexGrow, tells code this property can be shrunk if necessary, also same as setting flex to a negative value
• position: 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

Miscellaneous Tips

• 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