React Native — An open source framework for building native applications using React

What we know (with ReactJS, Hooks and VanillaJS) — React is a Javascript library/framework for creating optimal UIs.

To begin, React is agnostic. React-DOM is what is used to render in the browser (web application). When we build a web application with ReactJS, the part of it that displays it out to the browser is actually a separate library called React-DOM. React and React-DOM work together to allow us to build front end browser client side applications.

…Well, React Native is something that you use along with the React library that can render out native components to a mobile device (like and iOS or Android). It’s important to understand that whether you’re building a web app with React-DOM or a mobile app with react native, we’re using the same ReactJS library.

One of the biggest advantages of using react native is having a single codebase. What this means, for example is that if there is a company that wants to build a mobile app — in a lot of cases they’d want their app to work on iOS and Android. However, if we’re just building it with the native languages, these will become two completely separate projects. So we might have a Swift project for iOS or a Java or a Kotlin project for an Android App. These would have two different codebases, may have different developers and can become expensive. It’s definitely a good advantage to have one single codebase that can compile to both platforms, saving time and money.

Basic Requirements:

If you’re using a Mac, you can build, compile and test iOS apps and Android apps. If you’re on windows, you can build but can’t compile or test for iOS. (There are ways around it — you can use a physical device or some other software. But, usually if you’re building with react native on windows, you’re going to be building and testing in Android only).

Just like when we build a web app with React and React-DOM, with react native there’s also an essential concept of components. We have our own components that we create, but we’re also given quite a few built in components to help us create native apps and native UIs. These are given to us in different categories such as:

Basic Components: View, Text, Image, TextInput, Scrollview and Stylesheet

UI components: Button, Picker, Slider, Switch

List Views: FlatList, SectionList (for when you want to display items)

Action/Platform Specific

iOS: ActionSheetIOS, AlertIOS, etc

Android: BackHandler, DatePickerAndroid, etc

Everything else that we use in react, such as props and state are all valid in react native. Hooks can also be used with functional components, but class components can be used just as regularly in react native.

To begin..

Expo CLI — works as a wrapper that will abstract out and run your react native application

React Native CLI — must have Android Studio and Android SDK to use for windows and Xcode11 for Mac. This is necessary in order to launch the emulator.

iOS
Android Emulator

In order to get the React Native CLI installed — in your terminal:

npm install -g react-native-cli

Initialize your application with:

react-native init <your-app-name>

Key differences in package.json dependencies:

ReactJS
React Native

File Structure:

Just like with standard ReactJS web applications, App.Js file will be the entry point to our application. App.js will stand as a root component, and then we have other components that we create and embed to App.js.

Next..

Just as if we were using the react library to create a web app, we can use either functional or class components. Within class components, we would use component lifecycle methods and in functional components we can use hooks. However, unlike the standard react applications, we cannot render HTML/JSX in our return section. We have to use react native components, such as view and text components.

ReactJS
React Native

To note: There is no styling by default in react native, you would have to style everything manually. However, you can create styles using the Stylesheet component (all css property keys are camel case):

Passing props, state..

Passing props via components is very much the same.

In the ListItem component:

Destructured
Without destructuring…

Again, there is no default styling, so you can manually add styling right below in the same component:

Adding input..

Component where the state is held:

Pass this function down as props to AddItem component:

Now in AddItem, you can access this as an onPress functionality (note not onClick) :

Different but not so different!

There are built-in components. Backend would work similarly, you can make a request to fetch data and store data.

Long story short — React Native combines the best parts of native development with React.

References:

https://reactnative.dev/

Recent software engineering graduate who enjoys exploring the intersection between business and code.