This is a Task Manager project, bootstrapped using @react-native-community/cli
.
- WebStorm: 2024.2.3
- Node.js: 23.1.0 (required version >= 18.18, installed using Homebrew)
- Ruby: 3.3.0 (required version >= 3.0.0, installed using Homebrew)
- CocoaPods: 1.16.2
- React Native: 0.76 (if using the New RN Debugger)
- React Native: 0.75.4
- TypeScript: 5.0.4 (required version >= 5.0.0)
Note: Ensure you've completed the React Native 0.75 - Environment Setup instructions up until the "Creating a new application" step before proceeding.
First, you need to install all dependencies.
Run the following commands in the root of the project to install node_modules:
npm install
For pods installation run:
npx pod-install
or
cd ios && pod install && cd ..
Second, start Metro, the JavaScript bundler that ships with React Native.
To start Metro, run one of the following commands from the root of the Task Manager project:
- Without debugger:
npm start
This project uses the New RN Debugger,
which uses React Native v0.76 globally (this will be installed during the process when
you run the command above). If you don’t want to use the debugger, just continue with npm start
.
- With debugger:
npx react-native start --experimental-debugger
Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project and run the following command to start json-server:
json-server --watch db.json --port 3000
You can change the port if needed. To ensure everything works as expected, you should see the following in your terminal:
JSON Server started on PORT :3000
Press CTRL-C to stop
Watching db.json...
♡( ◡‿◡ )
Index:
http://localhost:3000/
Static files:
Serving ./public directory if it exists
Endpoints:
http://localhost:3000/taskList
Now, we can start the application.
Note: This application uses json-server, so to enable the main functionality (task management), please run this application on an iPhone/iPad Simulator or Android Emulator. It may not work correctly on real devices.
Let json-server run in its own terminal. Open a new terminal from the root of the project and run the following command to start your Android or iOS app:
npm run android
npm run ios
If everything is set up correctly, you should see the Task Manager running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.
This is one way to run your app - you can also run it directly from within Android Studio or Xcode.
- Error:
listen EADDRINUSE: address already in use :::[port]
then runjson-server --watch db.json --port 3000
ornpx react-native start --experimental-debugger
that uses port8081
:
Run the following commands in your terminal.
- Find the process using the port
sudo lsof -i :[port]
- Kill the process
kill -9 <PID>
Note: -9 kills the process immediately, and gives it no chance of cleaning up after itself. This may cause problems. Consider using -15 (TERM) or -3 (QUIT) for a softer termination which allows the process to clean up after itself.
- If you encounter any issues with React Native, refer to the Troubleshooting page.
If you have questions, remarks, or need help with setup, feel free to reach out via email: [email protected]