Skip to content

Ayush-Navadiya/Getting_Started_with_React_Native-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React-Native-Hello_World-App

First React Native app using Expo CLI


Prerequisite

  1. Download Node JS from : https://nodejs.org/
  2. Install Node JS
  3. Check if installed successfully using commands:
    1. node --version
    2. npm --version

What is View?

The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, android.view, div, etc.

View is designed to be nested inside other views and can have 0 to many children of any type.


How To Run

  1. Open Command Line
  2. Move to project directory
  3. Run command "npm install" to install node modules
  4. Run command "npm start" to start expo cli
  5. Let it get started and select option to run on appropriate device
  6. Make sure that an emulator is running\ or else if you are using your mobile make sure that USB debugging is turned on
  7. You will see the output on the targeted device

Contribute

Give a thanks with coffee Here.
https://www.buymeacoffee.com/ayushnavadiya


Output

Getting started from scratch


Prerequisite

  1. Download Node JS from : https://nodejs.org/
  2. Install Node JS
  3. Check if installed successfully using commands:
    1. node --version
    2. npm --version

Install Expo-cli to start with react native expo app and if already installed skip this installation:

npm install --global expo-cli

Initialize app with the following command:

expo init your-project-name

Note: When You Run the 'expo init' command it will ask you to choose template go with: \

  • blank : a minimal app as clean as an empty canvas

Running Program

  1. Open Command Line
  2. Move to project directory
  3. Run command "npm install" to install node modules
  4. Run command "npm start" to expo cli
  5. Let it get started then select option to run on appropriate device
  6. Make sure that an emulator is running\ or else if you are using your mobile make sure that USB debugging is turned on
  7. You will see the output on the targeted device
  8. To Print Hello World on screen change the app.js code with the code given bellow
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

About

First React Native app using Expo CLI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published