Intro to Creating Mobile Apps with React Native (Image Gallery) - Software School (2024-06-11)

In this lecture we learn to create a mobile application using the JavaScript programming language with the React Native framework.
We learn that traditionally mobile apps are built for either Android or iOS platform. For Android the programming language used to be Java, but now it is more popular to use the Kotlin language. For iOS, it used to be Objective-C, but today everyone is encouraged to use the Swift programming language instead.
Having to develop two separate applications for either systems is a challenge not only for development teams, but for financial reasons. Small businesses and startups in particular probably don’t have the budget to develop two separate solutions.
In order to target customers from both Android and iOS platforms, technologies were built to make cross-platform possible. Meaning you develop one app and it runs on both platforms without having separate apps. One of the solutions is with the React Native framework. Someone had the idea of why not embracing web development practices in the mobile field? Take the JavaScript programming language (aka Node.js on the server side) and build user interfaces for mobile using the React.js library.
The lecture shows you how to generate a React Native project in the command line using Expo.
Then you learn how to start the development server and load the app on your phone by scanning the QR code with your smartphone Camera app.
You learn how you can shake your phone to bring up options such as Reload.
The lecture goes on to show you how to build a simple image gallery application, where clicking Next brings up the next image in the list.
You learn about React hooks such as useEffect and useState. You can have the effect of loading data initially immediately after the first render. Then you can keep track of information in the state. So React knows to re-render the component whenever the state changes.
You also learn how to retrieve data from an external backend JSON API using the fetch function, just like we do in web development.
The lecture also covers how to debug problems, with a simple console.log as well as through using the browser Developer Tools (aka DevTools). You also get to fix a bug by defining variables on the console and evaluating the expression to see if it’s the expected value.
Source Code: github.com/nbktechworld/using...

[@HassanShahzad-cc9nl]

fantastic video looking forward to more of these. anything to do with joysticks and streaming video with websockets would be great

[@nbktechworld]

Thank you very much. See you on Discord @ www.nbktechworld/discord