Embedded Files
Entry 1:
Entry 1:
Before starting out, I have to make myself acquainted with the React native docs and some of the other technologies that I’m going to be using (possibly bootstrap components on react).
I’m thinking about using the concept of a to-do list (which I have implemented before), but tweaking it here and there, so that I’m able to make it into a shopping list.
Entry 2:
Entry 2:
React Native does not target the web browser as a platform, but instead, IOS and Android. It uses special components to display data such as View instead of div, TextInput instead of input (and many more). Takeaway, no html elements can be used. Some of the core components include View, Text, Button, TextInput.
Entry 3:
Entry 3:
Basic components have limited styling. Note on styling, certain styles only apply to certain OS. A button may not be a button on IOS, but a highlighted word on IOS. We can combine core components and other built in components to make our own UI. Also, React Native does not use css, it uses something similar (off of js), but definitely not the same. When using components in other files, DO NOT forget to import said component. Also, don’t forget to export each component at the end of the file (so that you can use them in other components).
Entry 4:
Entry 4:
Best way to start the project is by making a components folder inside src file, so that we are able to keep up with each specific component in our app. Everything is rendered off the App component. Styling for each component can be done in line or as an object attribute.
Entry 5:
Entry 5:
In order to jump between screens I need to use the React navigation component.
Link to docs: https://reactnavigation.org/docs/getting-started
Youtube video: https://www.youtube.com/watch?v=OmQCU-3KPms
Entry 6:
Entry 6:
To make a style for a particular component:
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "#eaeaea"
},
title: {
marginTop: 16,
paddingVertical: 8,
borderWidth: 4,
borderColor: "#20232a",
borderRadius: 6,
backgroundColor: "#61dafb",
color: "#20232a",
textAlign: "center",
fontSize: 30,
fontWeight: "bold"
}
});
You make an object and if you want to use a specific style on a component, you would do (inline) style={styles.name_of_attribute}.
Ex: style={styles. marginTop }.
Would apply that style on to the component.
Entry 7:
Entry 7:
Layout and Flexbox
A collection of CSS properties used to control styling/positioning
Properties such as how much space, space between, etc
When writing down attributes, flex expands to occupy available space
FlexDirection controls the orientations of main axis and cross axis
Justify-content (how they are distributed)
Entry 8:
Entry 8:
Button is a component that doesn’t have a styles prop
If a component has a particular prop, the IDE will display a wrench near the word suggestion.
Also, react native buttons do not use onClick, they use onPress for props
Entry 9:
Entry 9:
Will have to use find() or some() function on es6 to conditionally add items to the list
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
Entry 10:
Entry 10:
More on styling:
Styles don’t cascade as they do in css
Certain components are unable to render certain styling options to both Oss
Scrollview is not present by default, you have to wrap your view around the scrollview in order to get your list to scroll up and down.
For dynamic lists, we use flatlists, because it only propagates data as the user scrolls down, not all at once like scrollview.
Entry 11:
Entry 11:
Turns out that I had plenty of trouble trying to figure out how to render my object attributes in my components.
Error Name : Object not valid as react child….
That was the error that kept coming up. Not the clearest error message if you ask me.
After a decent amount of research on the web, I came across this really great article and a really helpful YouTube Video https://blog.expo.dev/react-native-flatlist-made-easy-20fca51e0327
And https://www.youtube.com/watch?v=iMCM1NceGJY I was able to figure the problem.
Conclusion: Object attributes cannot be rendered, period.
Entry 12:
Entry 12:
I had to use react paper icons and surround them with the TouchableOpacity component to make them responsive to touch. So there is another lesson, to make icons “touchable” they need to be wrapped up in this react component. Another note, some of the react paper community icons are broken. A question mark will show up for some of the community created icons.
Entry 13:
Entry 13:
Error names: Tried to get names out of range index Nan, Uncaught Type error: undefined is not a function
I had problems passing down a function to a child component. The following video helped me get a better idea of the logic that I was having problems understanding.
Video link: https://www.youtube.com/watch?v=c05OL7XbwXU
Passing functions to child component: https://bobbyhadz.com/blog/react-pass-function-as-prop
Simple iteration of array object: https://contactmentor.com/javascript-map-array-of-objects/
The solution to the problem involved passing the name of the variable that held the function as a prop. Then, on the child component, I ended up creating a function with the same name that held the props.name_of_my_parent_function. I may be doing a horrible job explaining it, but the video above explains it a bit better. Now, bear in mind, I didn’t do everything exactly the way he did, because our logic is a tad different, but the video definitely helped.
Entry 14:
Entry 14:
About merge requests, It’s best to merge the branches on the GitHub site than it is on the desktop version (You can always do it on the CLI, but I’m not super comfortable doing it that way). Then again, doing that also brings its own set of problems because Git desktop won’t reflect the changes automatically for some reason. Today I learned that you have to do everything I mentioned above, but then click on where it says “fetch origin” for GitHub desktop to reflect the new changes performed on the main branch.
Entry 15:
Entry 15:
I installed an extension to VScode called ES7+ React/Redux/React-Native Snippets that allows you to get a boiler plate of any component by simply typing rnfes and enter.
Entry 16:
Entry 16:
I used https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c as a guide to style buttons on the landing page.
Entry 17:
Entry 17:
I want to make sure that I’m implementing firebase correctly into our project, but one question remains (which is why I have been stuck for the last couple of days). I found my exact question online:
“So am I correct in assuming that I just need to select the 'Web' version and my app would still work for both iOS and android? (I don't need to select the android AND the iOS versions as well)”
Answer: https://stackoverflow.com/questions/69096576/firebase-web-vs-ios-and-android-version-for-react-native-project
Entry 18:
Entry 18:
New error code while working on implementation of firebase authentication
Problem appears to be related to firebase version
https://github.com/expo/expo-cli/issues/3066
Link above was very helpful, problem was resolved by downgrading module from ^9 (point something) to ^8.2.3, I also had to delete other dependencies that installed by mistake.
Link above was very helpful, problem was resolved by downgrading module from ^9 (point something) to ^8.2.3, I also had to delete other dependencies that installed by mistake.
Entry 19:
Entry 19:
Had problems trying to figure out how to pass an array into a function on js. Found out that one of the most efficient ways is to use the spread operator in front of the array name.
This website was very helpful:
https://fjolt.com/article/javascript-passing-arrays-as-function-parameters
Entry 20:
Entry 20:
I was able to update the firebase version on our project. Took lots of debugging and looking up documentation online, but it’s done. My next move is to see if the functions provided by the newer versions make the process of storing and retrieving data more accessible.
Entry 21:
Entry 21:
Asynchronous requests
db.collection(“cafes”).get() ß gets every document in our collection, but this could take half a second or a whole second (or more). Meaning we can’t just store this in a variable.
Instead, we do this: db.collection(“cafes”).get().then( (snapshot) => {
Console.log(snapshot.docs)
})
The lines of code above don’t actually allow us to see the data from the doc, so we have to take another approach.
Note: “Then” is just essentially saying that once we receive the data, we will actually fire the function.
A snapshot is what we received when we called the method mentioned above (a representation of the data).
Solution:
forEach() method: Is a method that allows us to cycle through each of those documents.
db.collection(“cafes”).get().then( (snapshot) => {
Snapshot.docs.forEach( doc => {
Console.log(doc.data())
}
})
Entry 22:
Entry 22:
What is ${} syntax for?
Allows for the introduction of a variable without concatenating (which is what you will use it for in this lesson). This is done using ${var} to add the variable string in-line to your current string.
Example:
let captain = 'Jean-luc'
console.log('Paging ' + captain + ' to report to the bridge.')
console.log(`Paging ${captain} to report to the bridge.`)
Entry 23: Side effects(UseEffect)
Entry 23: Side effects(UseEffect)
Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.
Entry 22: Firebase test mode extension troubleshooting
Entry 22: Firebase test mode extension troubleshooting
https://www.epochconverter.com/
Page updated
Google Sites
Report abuse