# Getting started with Expo App

> **Expo** is a free and open source toolchain built around React Native to help you to build native iOS and Android projects using JavaScript and React.

Since you have already installed Node.js, use npm command to install Expo CLI

```
npm install -g expo-cli
```

Now you can use `expo init` to create new React Native Project

```
expo init helloWorld
```

Then you can choose a template

![Image for post](https://miro.medium.com/max/634/1*UMGIW6qfALLPwTOMOjLJHA.png)

If you want a project with screen navigation, chose *tabs* option. Since we are creating simple hello world app in this blog, I am going to use *blank* option.

To start the development server, move to a project folder and execute npm start.

```
cd helloWorld
npm start
```

Then the server starts and you can see QR code in both browser and terminal  Expo dev tools running on a browser

![Image for post](https://miro.medium.com/max/834/1*_21-Z04ncW4Z27HwZh06iQ.png)

![Image for post](https://miro.medium.com/max/1434/1*I5E1lpcfAvWhSU_D37Q7Rw.png)

### How to Run on Actual Device <a href="#eebe" id="eebe"></a>

To run this application on actual device, First you have to download the Expo app from [Google Play](https://play.google.com/store/apps/details?id=host.exp.exponent\&hl=en) Store or [App Store](https://itunes.apple.com/us/app/expo-client/id982107779?mt=8) (depends on your device)

Next important thing is to make sure your mobile is connected to the **same Network** as your computer.

Then, open Expo app and **scan QR code** in your terminal or browser. Now, you can see your app running on the device.![Image for post](https://miro.medium.com/max/34/1*Alm-1MlUxpk6F4tPrfUVrQ.jpeg?q=20)

![Image for post](https://miro.medium.com/max/1188/1*Alm-1MlUxpk6F4tPrfUVrQ.jpeg)

### Hello world App <a href="#id-52a6" id="id-52a6"></a>

Now, Let’s look at the code.

You can see in the project, you have **app.json** file. You can find all the configurations related to app in there, such as app name, sdk version, icon etc..

And there is **package.json** file with list of dependencies for the app.

Then you have **App.js**. It is the starting point of your app. You can see render method there, it has `View` component which is used to wrap the `Text` component.

In the bottom of App.js file you can see styles object, which defines the styles for your UI components. In react native, moving styles from render method improve the code readability. You can define different styles to different UI components.

Let’s remove the existing code in App.js and write following code to change the **Hello World!** text to **Hello John!** on a button click.

*Remember to import Button from ‘react-native’*

```
export default class App extends React.Component {
   constructor(props){
     super(props);
     this.state = {
     name: 'World!',
     }
   }
   onClick = () => {
     this.setState({
     name: 'John!',
     })
   };
   render() {
   return (
     <View style={styles.container}>
       <Text>Hello {this.state.name}</Text>
       <Button 
            onPress={() => {this.onClick()}} 
            title='Click me'
            color='#4169E1'>
       </Button>
     </View>
   );
   }
}
const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
     alignItems: 'center',
     justifyContent: 'center',
   }, 
   nameText: {
     fontSize: 50,
     padding: 15,
   }
});
```

In the above code, `Text` component will display the name in state. Initial value of `name` in the state is **World!** and pressing **Click me** button will call onClick function which change the value of `name` to **John!**.

In this code I added style *nameText* to `Text` Component, which sets fontSize and add padding to the Text.

When it comes to `Button`, React Native provides very limited options for that component. Button component renders the native button on the platform. Because of this, it does not have `style` prop. It has its own set of props. So in order to change the button color I passed *#4169E1* to color prop.

> If you want more control on appearance, use [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity) instead of button.

![Image for post](https://miro.medium.com/max/1188/1*2xrZasrT6MI_F0RPnkMQCg.jpeg)

I think you got a basic idea about how to work with React Native. So, now you can try your first react native app.


---

# 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://tkssharma.gitbook.io/react-training/react-native-core-fundamental/getting-started-with-expo-app.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.