Start with React Native: Build an Expo Application Part 1
expo application

April 29, 2021

Start with React Native: Build an Expo Application Part 1

Patryk Kluczak

Frontend Developer
SHARE
frontend app(4)

Introduction

Hello, My name is Patrick, and I really want to show you the basic steps for React Native. Firstly what is React Native, so it’s an open-source mobile framework created by Facebook. It used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP.

In my mini-series, I will focus on the application of the IOS and describe the basic changes between React and React Native. I decided to use an Expo framework, for me it’s quite better especially when it comes to using API references like camera or gyroscope. Framework Expo has its own SDK library and for the basic app, you don’t have to install external plugins or create your own features in native languages like Java or Objective-C.

Sneak peak about React Native

React Native is a very cool app writing tool, but can you do anything with it? The answer is yes and no. It depends on whether we want to use Expo or not. If you decide to use Expo you should remember about restrictions to the native possibilities but on other hand allows you to write native apps without Java or Objective-C. However if you have knowledge about the language mentioned above and have more patient to configure the dev environment better solution will be React Natve without expo extension, but for the more complicated problems, you will have to find a plugin or write a missing part of the code in native language for IOS and Android. So you have to decides what will be better for you

When should you create a React Native app?

Definitely if you have a web app created in React. The huge part of logic or design will be the same or realy similar. When you want to only expand possibilities of existing web apps. The last argument but not the least is when you are a frontend developer and the app is not demanding very advanced device possibilities.

Installation the first app

So let’s begin.

First of all, we have to install the expo framework just put this line in the terminal. npm install —global expo-cli

It will take a while but don’t worry worth it. :)

After successful installation, we can create a new app. Like before use terminal and put

expo init app-name where app-name is a project named.

At Fronted House we use TypeScript to provide better security in our apps. I recommend this solution, so I choose the second option.

typescript image

When Instalator finished you see a similar file structure to the basic React app but not all elements are the same.

Starting developer server is very similar to a normal React app but we have to put the expo start in the command line.

Now, the browser should open a new page with localhost content. The default port is 19000 but if it occupied local server will take the next free number.

The manage panel has few options and allows sharing projects in an easy way or test on physical devices.

If you want to deploy on android select first option but remember firstly you have to install Android Studio with the newest Android SDK-Build-Tools

Expo allows to display results in the browser too, click on the third link “Run in web browser” and wait a little. On the new page will see the result.

Deploy on physical devices is simply too. Open mobile browser and put the exp address or easier use QR code, but remember you will need a Expo GO application. You can download it from AppStore and GooglePlay.

We focus on the iOS simulator. Just click on the correct label like on the screen below: expo go image

Basic React Native Component

Basic components to create app:

  • View
  • Text
  • Image
  • Button
  • TouchableOpacity

Like you see the names are unambiguous and very easy to remember.

In the beginning, I want to show you how to add your own CSS to components. The workflow is the same as on React. By default we have two options, we can create a class or add style inline. Some examples below:

 export default function BasicHome() {
  return (
    <View style={styles.container}>
      <Image
        source={logo}
        style={{
          width: 300,
          height: 155,
          marginBottom: 30,
          resizeMode: 'contain',
        }}
      />
      <Text style={styles.intro>
        Welcome 
    </Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    height: '100%',
  },
  intro: {
    color: '#3E1CA1',
    fontSize: 28,
    fontWeight: '700',
    marginHorizontal: 15,
    marginBottom: 10,
  },
});

Results:

expo go image

Like you see, both style options work. You may be surprised why I used to display „flex” instead of „block”, so it’s one of the differences to the standard React. In native we have two options: flex or none. If you don't feel confident with flex keep the article

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ok, it's all for now. In the next part of the article, I will show you how to manage view, create navigation, and more. See you soon.

What do you think? Share your impressions!

Meet the author

Patryk
Diamond logo icon
Mail logo

Patryk Kluczak

Frontend Developer

I am JS Developer, specialize in creating stucture and implementing solution for multiplatform app.

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.