Tools we have installed

you should have know React and you system should have Node JS

npx create-expo-app@latest --template blank ./

npx expo Start

image.png


on you Mobile Device

1- Install Expo Go

2- Scan the QR code from the App

and Here you Go!

Code

<View style={styles.container}>
  <Text>Hi! From Aqib</Text>
  <StatusBar style="auto" />
</View>

1000475989.jpg

and you change something → you will see HotReload → instanly changes on the App


Counter App

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={{ fontSize: 40 }}>{count}</Text>
      
      <Button title="Increase" onPress={() => setCount(count + 1)} />
      
      <Button title="Decrease" onPress={() => setCount(count - 1)} />
      
      <Button title="Reset" onPress={() => setCount(0)} color="red" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 10, // Adds a little space between buttons
  },
});

1000475990.jpg