|
1 | | -This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). |
| 1 | +# PowerSync React Native Barebones OPSQlite |
2 | 2 |
|
3 | | -# Getting Started |
| 3 | +## Overview |
4 | 4 |
|
5 | | -> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding. |
| 5 | +This is a minimal example demonstrating a barebones react native project using OPSQLite . It shows an update to the local SQLite DB on app launch. |
6 | 6 |
|
7 | | -## Step 1: Start Metro |
8 | 7 |
|
9 | | -First, you will need to run **Metro**, the JavaScript build tool for React Native. |
| 8 | +## Getting Started |
10 | 9 |
|
11 | | -To start the Metro dev server, run the following command from the root of your React Native project: |
| 10 | +In the repo directory, use [pnpm](https://pnpm.io/installation) to install dependencies: |
12 | 11 |
|
13 | | -```sh |
14 | | -# Using npm |
15 | | -npm start |
16 | | - |
17 | | -# OR using Yarn |
18 | | -yarn start |
| 12 | +```bash |
| 13 | +pnpm install |
| 14 | +pnpm build:packages |
19 | 15 | ``` |
20 | 16 |
|
21 | | -## Step 2: Build and run your app |
22 | | - |
23 | | -With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app: |
24 | | - |
25 | | -### Android |
26 | | - |
27 | | -```sh |
28 | | -# Using npm |
29 | | -npm run android |
| 17 | +Then switch into the demo's directory: |
30 | 18 |
|
31 | | -# OR using Yarn |
32 | | -yarn android |
| 19 | +```bash |
| 20 | +cd demos/react-native-barebones-opsqlite |
33 | 21 | ``` |
34 | 22 |
|
35 | | -### iOS |
| 23 | +Run the development server: |
36 | 24 |
|
37 | | -For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). |
38 | | - |
39 | | -The first time you create a new project, run the Ruby bundler to install CocoaPods itself: |
40 | | - |
41 | | -```sh |
42 | | -bundle install |
| 25 | +For iOS: |
| 26 | +```bash |
| 27 | +pnpm start |
| 28 | +pnpm ios |
43 | 29 | ``` |
44 | 30 |
|
45 | | -Then, and every time you update your native dependencies, run: |
46 | | - |
47 | | -```sh |
48 | | -bundle exec pod install |
| 31 | +For Android: |
| 32 | +```bash |
| 33 | +pnpm start |
| 34 | +pnpm android |
49 | 35 | ``` |
50 | 36 |
|
51 | | -For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). |
52 | | - |
53 | | -```sh |
54 | | -# Using npm |
55 | | -npm run ios |
56 | | - |
57 | | -# OR using Yarn |
58 | | -yarn ios |
59 | | -``` |
60 | | - |
61 | | -If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device. |
62 | | - |
63 | | -This is one way to run your app — you can also build it directly from Android Studio or Xcode. |
64 | | - |
65 | | -## Step 3: Modify your app |
66 | | - |
67 | | -Now that you have successfully run the app, let's make changes! |
68 | | - |
69 | | -Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh). |
70 | | - |
71 | | -When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload: |
72 | | - |
73 | | -- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS). |
74 | | -- **iOS**: Press <kbd>R</kbd> in iOS Simulator. |
75 | | - |
76 | | -## Congratulations! :tada: |
77 | | - |
78 | | -You've successfully run and modified your React Native App. :partying_face: |
79 | | - |
80 | | -### Now what? |
81 | | - |
82 | | -- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). |
83 | | -- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started). |
84 | | - |
85 | | -# Troubleshooting |
86 | | - |
87 | | -If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. |
88 | | - |
89 | | -# Learn More |
90 | | - |
91 | | -To learn more about React Native, take a look at the following resources: |
92 | | - |
93 | | -- [React Native Website](https://reactnative.dev) - learn more about React Native. |
94 | | -- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. |
95 | | -- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. |
96 | | -- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. |
97 | | -- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. |
| 37 | +Then press `d` to open dev tools where you will see the console output showing the local SQLite DB insert. |
0 commit comments