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.
-
Setup your environment.
Follow the official environment setup guide.
-
Get the project code.
Use degit to download this project.
# Download the project npx degit felipeozalmeida/hello-world-react-native hello-world-react-native
-
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
-
Browse the app.
Open the app in a mobile operating system of your choice.
# Open in Android yarn android # Open in iOS yarn ios
-
Debugging the app.
Use React DevTools for a seamless debugging experience when viewing your app's component tree.
# Open React DevTools yarn react-devtools
-
Integration with Visual Studio Code.
Open the
Extensions
menu, search forReact Native Tools
fromMicrosoft
and install it. You will be able to run your app usingF5
and debug inside the editor.