React Native: Initial Lessons

Imagine developing a web app and not having to worry about cross platform screen differences…imagine a world where an app can run on a laptop, a desktop, an Apple or Android mobile device using one singular code base. You just imagined react native. I began my journey into this javascript library fairly recently. This article will document some of the key factors of react-native I’ve learned, and go into some of the differences it shares with the react framework. At the end we will go into how to get started on your own react native project. Lets begin!

What Is React Native?

React Native was developed by facebook to allow web apps to be run natively on mobile devices. It does so by converting each component such as Images, Text and View to their native widgets using JSX. This was one of my first initial differences I noted because in React I was still using components that very much resembled HTML to write text. Instead in react native to write hello world you would wrap it in a Text component like:

Import View and Text from react-native

You might notice in the above picture we are passing in a styles object as a style prop. This is how React Native handles styling. It uses an object with camel case CSS naming conventions. This is not CSS however but many of the names and attributes of this object reflect CSS. Each react native component excepts a style prop by default, and it is good practice to define a styles object below the component you intend to use it in. For instance below App it is defined by default like so:

Import Stylesheet from react-native, also the default backgroundColor is not ‘dodgerblue’ I just like it better than white.

react native uses components and containers just like react. Also it can use hooks instead of having to define classes which is a handy feature it shares with react as well.

How to began your first react native app

First off you will need to install react native on your development environment. Do so by entering:

npm i react-native

I usually began my react native projects with expo which is a cli that allows you to start your react native app in different environments including emulated ones! This is handy if your developing with mobile and mind so you don’t have to keep picking up your phone. You can quickly install this by entering:

npm install -g expo-cli

After installation you should navigate to whatever directory you wish to create your react project in and enter:

expo init <name-of-project>

the ‘<name-of-project>’ will be replaced by whatever name you wish your app to be called. You will be presented with several options like basic, typescript etc. You’re gonna wanna pick basic unless you are proficient in typescript. The app usually takes a sec to build but afterwards viola! You’ve taken the first steps into the world of react native!

Conclusion

I hope this has been a good elementary introduction into the world of react native. My understanding of this javascript library is growing and I continue to develop projects in it. Because the possibilities with this framework are so vast I still have much to learn (don’t we all?). I intend to delve deeper into this topic as my knowledge base grows.