Mobile development is important for companies and an opportunity for me.
Article here about difference with flutter. And engineer man’s take here. Uses Dart languages not super popular so yeah, kind of a deal breaker.
Engineer man tips for new React Native devs here. Another similar but longer one here.
Notes from Mosh tutorial (uses Expo CLI) here
React Native seems to offer a similar proposition as NodeJS does. Why learn a whole new language for the backend (java, swift, kotlin, php, python etc.), when you can leverage your current JS skills.
Create a meal tracker, workout tracker, time tracker in a website with quick link on home screen versus a full on react Native mobile app. How do they compare? One example of this is the Mr. Money Mustache website versus his mobile app. It’s a simple blog with comments. What does the mobile app offer versus the website? Is it just a marketing thing I eat to make sure you show up in the search box or is there an actual use case?
The marketing aspect is interesting and I can relate it to something like you to me on Roku or the lack thereof. Linda has a Roku app and udemy does not. You to me may have better content but Roku has better accessibility. I’m pretty sure there’s a decent amount of resources that go into making a Roku channel but that sounds like a separate post.
The benefits to a native-mobile-app over a web application:
Lightning fast access
Don’t necessarily need internet connection
Browser-based versions but need internet
Remember login details
Example I use ANKI, a notecard app, for super quick notes.
Note: Did not use Expo CLI
React is a JS library framework for creating UIs react is agnostic meaning React-DOM is used to render in the browser (web apps) React natives the library that can compile react components into native components / widgets react native allows us to use react to create native iOS and Android applications.
One of the advantages to using react natives that you have a single code base usually in iOS app and Android app are completely separate apps IE Apple built with Swift and Android built with Java/Kotlin. With react native you can create one single code base and build for both platforms This saves a ton of time and money.
Requirements so for Mac you can build compile and test for iOS and Android and if you’re on Windows you can build for iOS and Android but you can only compile or test on Android. For iOS you got the latest xcode and iOS emulator and for Android you got Android studio / SDK / emulator (AVD)
I react native includes built-in components and APIs so there’s basic components: view, text, image, textInput, ScrollView, StyleSheet. UI components: Button, Picker, Slider, Switch. list View Components: Flat List Section List. iOS Components: ActionSheetIOS, AlertIOS, Android: BackHandler, DatePickerAndroid.
If your first website is facebook.gethub.io/react-native/docs
To get started you could use the expo CLI quick start but probably want to use the React Native CLI and you’re going to need a couple things to get started. Android Studio and Android SDK for windows. You can grab this from developer.android.com/studio. Open up Android studio and you’ll see a configure option click SDK Manager and you should have the SDK installed in the example video this was Android 10.0. Need to create an emulator so go back to configure and click AVD manager which is the Android virtual device manager. You can create a new device cuz you want to have one by default click a device then choose your SDK then click next you can rename it if you want to click finish and it will create a virtual device you click the play button and it will launch the emulator. Npm install -g (for Global) react-native-cli. Now you can run react-native init ShoppingList. And it will likely give you run instructions for Android. Install some packages (icons with react-native-vector-icons and uuidv4 to generate ids).
It’ll be a lot of config files like prettier eslint Babel but we won’t go through that in this tutorial.
Start by focusing on app.js files since this is the entry point to your app (15-minute mark of the movie)
Delete and start from scratch
Import view and text from react native and return these components a text component inside a view component. React native with flexbox works a little different. For one it’s a column by default instead of a row.
Instead of inline styles you’re probably going to want to use the style sheet component so import style sheet from react native. At the bottom of your app JS create cons styles equal stylesheet.create and inside curly brackets at a container. And then now up on your view component have a style prop set to styles.container.
Check out the image component which takes in a source prop. And if you want to do round it you can’t do border radius Said to a percentage you have to do 100 / 2.
Create a new components folder and inside of it create a header component to show a shopping list title at the top of your app with a background color of purple.
Start to deal with useState for items and set items and have a default being array then have some hard-coded items as objects and each item should have an ID. Bring in uuidv4. Leverage the FlatList component.
Create a list item component. Bring in TouchableOpacity for your ListItem component. Import icon from React Native vector icons dist font awesome.
Created a deleteItem function in your app.js file and leverage in your list item component using the onPress event. The delete item function is set to an arrow function that takes in a single ID parameter and then runs a set items function which is an arrow function that takes a single prev items parameter and then returns prev items.filter inside of the filter you have an arrow function that takes a single item parameter and returns item.ID does not equal to ID.
Create an AddItem component and bring into appJS. Bring in useState for AddItem Said to a constant text and set text with an empty string as the default down on your text input you need an onChangeText prop or you can call a function called onChange.
Inapp.js create addItem function the same way we created a delete item function. Return an array with everything that was already there using spread operator previous items and then add in front of it a new object with ID set to UUID and the text which is item. Now pass the sin as a prop to add item The same way you did delete item.
Don’t want to be able to add nothing and you want to show an alert if someone tries to do that. Bring in alert into your main app.js file and then add an if statement to your add item function.
Small and simple application but it works.