React Native: First Steps
What is React Native?
React Native is a collection of special React components that allows you to compile to a real native mobile application. React Native allows for developers to create applications for both Android and iOS using JavaScript code through React. The code is then rendered out into the native language of the mobile platform.
Why Am I Learning React Native?
I have always been interested in trying to utilize as many platforms as possible for applications. This allows for more users and it doesn’t require a user to have a certain platform to utilize my applications. React Native allows me to code in JavaScript, which I already know, to build mobile applications for Android and iOS. This cuts out the time of learning different languages to build applications for these platforms and allows me to jump right into building applications.
My First App
I have been following a tutorial that I found on YouTube to build my first app. So, it was very hand-holdy. However, I have been utilizing Notion to take notes while going through the video. I have written a blog about how I efficiently write my programming notes in Notion.
I created my first application using Expo. Expo is very similar to Create React App where it creates a lot of the boilerplate code for you. This makes it very easy to just jump right into development. The app is very simple. It is a goal tracking app that allows you to view, add, and delete your goals.
One of the largest benefit of using React Native is that it uses the same structure as React. This means that you are writing code in JSX and have the ability to utilize popular React conventions like hooks. When creating my app, I utilized useState in many different sections. I had to manage the state for the goals array, check if in the adding mode, and for the goal text input. This may seem trivial, but being able to do state management easily with something I already knew was actually incredible.
This app was meant to really just teach the basics of how React Native differs and is similar to React. For example, an <input> in React would be a <TextInput> in React Native or a <div> would be a <View>.
However, I learned some interesting things about mobile that differ from web that you may not think about. Mobile doesn’t automatically scroll. If you want a view to scroll, you have to implement that through a <ScrollView> or <FlatList>. Also on mobile, you have to specify if you want something to be touchable. If you want a non-button to be touchable, you have to wrap it in a <Touchable> component.
My Future Plans With React Native
Learning a new skill takes a lot of time and practice. I plan to work with React Native as often as I can to try to learn and memorize what I lean. To do this, I have to utilize it a lot. So, I have set myself a goal to complete my current course, build a very well-rounded app from scratch, and then look into creating a mobile version of my previous projects (to allow for more cross-platform availability). I believe it is very important to be able to reach out to as many platforms/users as possible by not limiting my app usage to only one platform and React Native is a tool that can do just that for me. So, will you be using React Native? Or do you have something else you would suggest for mobile development? I’d love to hear!
