🧠 Template Structure

Let's get our hands dirty and start making changes to the default starter Expo App!

Folder Structure

Let's have a look at the folder structure. Since I'm using Expo CLI version 4.5.2, your folder structure might look a little different from mine, but most of the core functionality remains the same!

first-app/
├── .expo/
├── .expo-shared/
├── assets/
├── node_modules/
├── .gitignore
├── App.js
├── app.json
├── babel.config.js
├── package.json
└── yarn.lock

We'll change our App.js file to make changes to our application. Let's start by adding a Button and using the useState hook to manage the text that is displayed in the Text component.

App.js

import React, {useState} from 'react';
import {StatusBar} from 'expo-status-bar';
import {StyleSheet, View, Text, Button} from 'react-native';

const App = () => {
  const [text, setText] = useState('Hello React Native!');
  return (
    <View className={styles.container}>
      <Text>{text}</Text>
      <Button title="Change Text" onPress={() => setText('So cool, right?')}/>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

React Native apps are hard work!

Building apps with Expo is easy, since most of the functionality is provided out of the box. Also using other libraries such as Flutter or Ionic, we can easily build native apps since they offer a lot of things out of the box! But building react native apps from scratch, requires a lot of hard work, but then also gives you more power in terms of flexibility!

React Native applications are hard work!

You can have a look at the comparison of different technologies used to create native applications and where they stand with each other in terms of usage and performance, along with other factors that help us determine which technology we should use to create native applications.