React Native Dev Prep

React Native Dev Prep

Nov 18, 2023
react native, development

SoCity Data Collector - Getting Started #

Note: Make sure you have completed the React Native - Environment Setup instructions till “Creating a new application” step, before proceeding.

Step 1: Set up your environment #

  1. Prerequisites:

  1. Align Node Version:

    • Ensure you are using the correct Node.js version for this project:

      nvm use

    • If the correct version is not installed, nvm will prompt you to install it.

  2. Install Dependencies:

    • Install project dependencies:

      yarn install

Step 2: Start your Application #

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android # 

yarn android

For iOS # 

yarn ios

Step 3: Modifying your App #

Now that you have successfully run the app, let’s modify it.

  1. Open App.tsx in your text editor of choice and edit some lines.

  2. For Android: Press the R key twice or select “Reload” from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!

    For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!

Project Structure #

Understanding the structure of this React Native project is essential for efficient navigation and development. Here’s a brief overview of the main components:

  • App.js: Main component and the entry point for the app’s UI.
  • README.md: Provides an overview and documentation of the project.
  • app.json: Configuration file with metadata like name and version.
  • ios/: Contains iOS-specific code, including Xcode project files.
  • android/: Contains Android-specific code like Gradle files and AndroidManifest.
  • node_modules/: Stores all npm dependencies required for the project.
  • vendor/: Optional directory for third-party dependencies not managed by npm.
  • Gemfile & Gemfile.lock: Manage Ruby dependencies, mainly for iOS development tools.
  • __tests__/: Holds the test files for unit or integration testing.
  • babel.config.js: Configuration for Babel to set up JavaScript transformation presets and plugins.
  • jest.config.js: Configuration file for Jest, the framework used for testing JavaScript.
  • package.json: Lists all dependencies and contains various configurations and scripts.
  • yarn.lock: Ensures consistent installation of node modules across different environments.
  • index.js: The application’s entry point, registering the app component from App.js.
  • metro.config.js: Configuration for Metro, the JavaScript bundler used in React Native.
  • src/: Directory for the source code of the project, including components, screens, and other JavaScript/React Native files.

Learn More #

To learn more about React Native, take a look at the following resources: