Skip to content

This project contains a simple CRUD cross-platform app built with React Native and WatermelonDB written in TypeScript.

Notifications You must be signed in to change notification settings

felipeozalmeida/hello-world-react-native

Repository files navigation

Hello World React Native

This project contains a simple CRUD cross-platform app built with React Native and WatermelonDB written in TypeScript.

It uses the React Navigation library for managing screen transitions and route definitions.

It doesn't use any component libraries, only vanilla components wrapped around React Native components. The only exception is React Native Picker Select, a library that offers a reasonable component for picking an option among a list of options (like what select does in HTML).

It uses the full-featured WatermelonDB offline database solution for storing records. Also, I've built a custom seeding mechanism for unattended database updates.

Tested in Android only. For learning purposes.

Quick start

  1. Setup your environment.

    Follow the official environment setup guide.

  2. Get the project code.

    Use degit to download this project.

    # Download the project
    npx degit felipeozalmeida/hello-world-react-native hello-world-react-native
  3. Install the dependencies.

    Navigate into the project's directory and install the necessary dependencies.

    # Navigate to the directory
    cd hello-world-react-native/
    
    # Install the dependencies
    yarn
  4. Browse the app.

    Open the app in a mobile operating system of your choice.

    # Open in Android
    yarn android
    
    # Open in iOS
    yarn ios
  5. Debugging the app.

    Use React DevTools for a seamless debugging experience when viewing your app's component tree.

    # Open React DevTools
    yarn react-devtools
  6. Integration with Visual Studio Code.

    Open the Extensions menu, search for React Native Tools from Microsoft and install it. You will be able to run your app using F5 and debug inside the editor.

References

  1. Official React Native Docs
  2. Official React Native Picker Select Docs
  3. Official React Navigation Docs
  4. Official WatermelonDB Docs

About

This project contains a simple CRUD cross-platform app built with React Native and WatermelonDB written in TypeScript.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published