#  Template Structure

## 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.

{% code title="App.js" %}

```jsx
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;
```

{% endcode %}

## 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!](/files/-McXtOYuc-j3JiE677vd)

You can have a look at the [comparison](https://academind.com/tutorials/react-native-vs-flutter-vs-ionic-vs-nativescript-vs-pwa/) 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sydrawat.gitbook.io/react-native/introduction/template-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.