{"id":303,"date":"2024-03-09T10:17:16","date_gmt":"2024-03-09T10:17:16","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=303"},"modified":"2024-03-10T14:29:23","modified_gmt":"2024-03-10T14:29:23","slug":"building-your-first-react-native-app-with-nodejs-backend-on-macos","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/building-your-first-react-native-app-with-nodejs-backend-on-macos\/","title":{"rendered":"Developing a Cross-Platform Mobile App on macOS: A Guide to Using React Native and Node.js Without Expo"},"content":{"rendered":"\n<p>When building a cross-platform mobile application from the ground up on macOS, it&#8217;s crucial to have a clear guide that navigates through the setup and development process without relying on Expo&#8217;s managed workflow. This comprehensive tutorial will walk you through creating a user authentication system using React Native for the frontend and Node.js for the backend, all set up and debugged directly on macOS.\n\n\n\n<h2 class=\"wp-block-heading\">Introduction:<\/h2>\n\n\n\n<p>This guide focuses on two main components: <code>AwesomeProject<\/code> for the React Native frontend and <code>NodeAwesomeProject<\/code> for the Node.js backend. The application includes essential features such as user registration, login, and a personalized home screen. Unlike Expo-based projects, this setup offers more control over the development environment and dependencies, crucial for complex applications.\n\n\n\n<p>All the code of frontend <code>AwesomeProject<\/code>, you can get it from below git repo:\n\n\n\n<p><a href=\"https:\/\/github.com\/mesepith\/AwesomeProject\">https:\/\/github.com\/mesepith\/AwesomeProject<\/a>\n\n\n\n<p>and all the code of backend <code>NodeAwesomeProject<\/code>, you can get it from below git repo:\n\n\n\n<p><a href=\"https:\/\/github.com\/mesepith\/AwesomeProject\">https:\/\/github.com\/mesepith\/AwesomeProject<\/a>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h3 class=\"wp-block-heading\">App Functionality<\/h3>\n\n\n\n<p>1. <strong>Registration:<\/strong>&nbsp;A well-designed screen collects the user&#8217;s name, email, and password. This data is securely sent to the Node.js backend for storage. \n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.43.13-576x1024.png\" alt=\"\" class=\"wp-image-318\" width=\"320\" height=\"569\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.43.13-576x1024.png 576w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.43.13-169x300.png 169w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.43.13.png 750w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<p>2. <strong>Login:<\/strong>&nbsp;Users authenticate with their email and password, which is validated by the Node.js backend against data in the MySQL database.\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.46.53-576x1024.png\" alt=\"\" class=\"wp-image-319\" width=\"333\" height=\"592\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.46.53-576x1024.png 576w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.46.53-169x300.png 169w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.46.53.png 750w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p>3. <strong>Home Screen:<\/strong>&nbsp;Successful login redirects to a personalized home screen displaying a welcome message with the user&#8217;s name.\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.50.43-576x1024.png\" alt=\"\" class=\"wp-image-322\" width=\"331\" height=\"588\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.50.43-576x1024.png 576w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.50.43-169x300.png 169w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-09-at-16.50.43.png 750w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/figure>\n\n\n\n<p>4. <strong>Logout:<\/strong>&nbsp;A button ends the user&#8217;s session and returns them to the login screen..\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites:<\/h2>\n\n\n\n<p>Before you start, ensure the following tools and environments are installed and configured on your macOS:\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Xcode:<\/strong> For iOS development and emulator support.<\/li>\n\n\n\n<li><strong>Android Studio:<\/strong> For Android development, including setting up virtual devices.<\/li>\n\n\n\n<li><strong>Node.js and npm:<\/strong> For running the Node.js server and managing packages.<\/li>\n\n\n\n<li><strong>React Native CLI:<\/strong> For creating and managing React Native projects without Expo.<\/li>\n\n\n\n<li><strong>CocoaPods:<\/strong> For managing iOS project dependencies.<\/li>\n\n\n\n<li><strong>Homebrew:<\/strong> Useful for installing packages like Watchman and other dependencies.<\/li>\n<\/ul>\n\n\n\n<p>If you&#8217;re missing any of these tools, follow below article which has given all the instruction with detailed screenshot and all the commands :\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-zahirs-blog wp-block-embed-zahirs-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"XibZu71Hdc\"><a href=\"https:\/\/zahiralam.com\/blog\/react-native-build-ios-android-mac\/\">No More Platform Worries: One Codebase, Two Apps (iOS &amp; Android)<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;No More Platform Worries: One Codebase, Two Apps (iOS &amp; Android)&#8221; &#8212; Zahirs Blog\" src=\"https:\/\/zahiralam.com\/blog\/react-native-build-ios-android-mac\/embed\/#?secret=8YtxtqHLe9#?secret=XibZu71Hdc\" data-secret=\"XibZu71Hdc\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up Your Development Environment<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">React Native Frontend<\/h3>\n\n\n\n<p>1. <strong>React Native Frontend:<\/strong>\n\n\n\n<p>Open Terminal and run the following command to create a new React Native project called <code>AwesomeProject<\/code>:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">npx react-native init AwesomeProject<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20react-native%20init%20AwesomeProject\">\n                            <button class=\"copy-button\" data-label=\"npx react-native init AwesomeProject\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>2. <strong>Install Navigation Libraries:<\/strong>\n\n\n\n<p>Move into your project directory (<code>cd AwesomeProject<\/code>) and install necessary libraries for navigation:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">npm install @react-navigation\/native @react-navigation\/native-stack<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20install%20%40react-navigation%2Fnative%20%40react-navigation%2Fnative-stack\">\n                            <button class=\"copy-button\" data-label=\"npm install @react-navigation\/native @react-navigation\/native-stack\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Don&#8217;t forget to install dependencies specific to React Native:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">npm install react-native-screens react-native-safe-area-context<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20install%20react-native-screens%20react-native-safe-area-context\">\n                            <button class=\"copy-button\" data-label=\"npm install react-native-screens react-native-safe-area-context\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>3. <strong>Install AsyncStorage for storing token:<\/strong>\n\n\n\n<p>Upon successful login, your server should return a JWT. You can store this token using <code>AsyncStorage<\/code> in React Native for persistent storage across app.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-4\">npm install @react-native-async-storage\/async-storage<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20install%20%40react-native-async-storage%2Fasync-storage\">\n                            <button class=\"copy-button\" data-label=\"npm install @react-native-async-storage\/async-storage\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>4. <strong>iOS Dependency Installation:<\/strong>\n\n\n\n<p>Navigate to the <code>ios<\/code> folder within your project and run CocoaPods to install the iOS project dependencies:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-5\">cd ios\npod install<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#cd%20ios%0Apod%20install\">\n                            <button class=\"copy-button\" data-label=\"cd ios\npod install\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Return to the project root directory once installation is complete.\n\n\n\n<p>5. <strong>Change domain host<\/strong>:\n\n\n\n<p>Go to config\/config.ts and search for API_BASE_URL and edit your host name\n\n\n\n<p>\n\n\n\n<h3 class=\"wp-block-heading\">Node.js Backend<\/h3>\n\n\n\n<p>1. <strong>Create and Initialize the Backend Project:<\/strong>\n\n\n\n<p>Open a new Terminal window, create a directory for the Node.js project, and navigate into it:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-6\">mkdir NodeAwesomeProject &amp;&amp; cd NodeAwesomeProject<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#mkdir%20NodeAwesomeProject%20%26%26%20cd%20NodeAwesomeProject\">\n                            <button class=\"copy-button\" data-label=\"mkdir NodeAwesomeProject &amp;&amp; cd NodeAwesomeProject\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Initialize a new Node.js project:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-7\">npm init -y<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20init%20-y\">\n                            <button class=\"copy-button\" data-label=\"npm init -y\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>2. <strong>Install Backend Dependencies:<\/strong>\n\n\n\n<p>While in the <code>NodeAwesomeProject<\/code> directory, install Express for the server, MySQL for database interactions, Bcrypt for password encryption, Body-Parser for parsing incoming request bodies, and <code>jsonwebtoken<\/code> for creating and verifying JWTs :\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-8\">npm install express mysql2 bcrypt body-parser jsonwebtoken<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20install%20express%20mysql2%20bcrypt%20body-parser%20jsonwebtoken\">\n                            <button class=\"copy-button\" data-label=\"npm install express mysql2 bcrypt body-parser jsonwebtoken\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h3 class=\"wp-block-heading\">MySQL Database Setup<\/h3>\n\n\n\n<p>1. Create the&nbsp;<code><strong>awesome_project<\/strong><\/code>&nbsp;database.\n\n\n\n<p>2. Execute the provided SQL script to create the&nbsp;<code>users<\/code>&nbsp;table.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-9\">create database awesome_project;\nuse awesome_project;\n\nCREATE TABLE `users` (\n  `id` int NOT NULL AUTO_INCREMENT,\n  `name` varchar(255) NOT NULL,\n  `email` varchar(255) NOT NULL,\n  `password` varchar(255) NOT NULL,\n  PRIMARY KEY (`id`),\n  UNIQUE KEY `email` (`email`)\n) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#create%20database%20awesome_project%3B%0Ause%20awesome_project%3B%0A%0ACREATE%20TABLE%20%60users%60%20%28%0A%20%20%60id%60%20int%20NOT%20NULL%20AUTO_INCREMENT%2C%0A%20%20%60name%60%20varchar%28255%29%20NOT%20NULL%2C%0A%20%20%60email%60%20varchar%28255%29%20NOT%20NULL%2C%0A%20%20%60password%60%20varchar%28255%29%20NOT%20NULL%2C%0A%20%20PRIMARY%20KEY%20%28%60id%60%29%2C%0A%20%20UNIQUE%20KEY%20%60email%60%20%28%60email%60%29%0A%29%20ENGINE%3DInnoDB%20AUTO_INCREMENT%3D7%20DEFAULT%20CHARSET%3Dutf8mb4%20COLLATE%3Dutf8mb4_0900_ai_ci%3B\">\n                            <button class=\"copy-button\" data-label=\"create database awesome_project;\nuse awesome_project;\n\nCREATE TABLE `users` (\n  `id` int NOT NULL AUTO_INCREMENT,\n  `name` varchar(255) NOT NULL,\n  `email` varchar(255) NOT NULL,\n  `password` varchar(255) NOT NULL,\n  PRIMARY KEY (`id`),\n  UNIQUE KEY `email` (`email`)\n) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Directory Structure<\/h2>\n\n\n\n<p>After setting up both projects, your directory structure should resemble the following:\n\n\n\n<p>\n\n\n\n<h3 class=\"wp-block-heading\">Frontend (<code>AwesomeProject<\/code>):<\/h3>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-10\">AwesomeProject\/\n\u251c\u2500\u2500 App.tsx\n\u251c\u2500\u2500 android\n\u251c\u2500\u2500 config\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 config.ts\n\u251c\u2500\u2500 ios\n\u251c\u2500\u2500 screens\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 HomeScreen.tsx\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 LoginScreen.styles.ts\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 LoginScreen.tsx\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 RegistrationScreen.styles.js\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 RegistrationScreen.tsx\n\u251c\u2500\u2500 services\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 ApiService.ts\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 AuthService.ts\n\u251c\u2500\u2500 utils\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 TokenService.js<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#AwesomeProject%2F%0A%E2%94%9C%E2%94%80%E2%94%80%20App.tsx%0A%E2%94%9C%E2%94%80%E2%94%80%20android%0A%E2%94%9C%E2%94%80%E2%94%80%20config%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20config.ts%0A%E2%94%9C%E2%94%80%E2%94%80%20ios%0A%E2%94%9C%E2%94%80%E2%94%80%20screens%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20HomeScreen.tsx%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20LoginScreen.styles.ts%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20LoginScreen.tsx%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20RegistrationScreen.styles.js%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20RegistrationScreen.tsx%0A%E2%94%9C%E2%94%80%E2%94%80%20services%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%9C%E2%94%80%E2%94%80%20ApiService.ts%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20AuthService.ts%0A%E2%94%9C%E2%94%80%E2%94%80%20utils%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20TokenService.js\">\n                            <button class=\"copy-button\" data-label=\"AwesomeProject\/\n\u251c\u2500\u2500 App.tsx\n\u251c\u2500\u2500 android\n\u251c\u2500\u2500 config\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 config.ts\n\u251c\u2500\u2500 ios\n\u251c\u2500\u2500 screens\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 HomeScreen.tsx\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 LoginScreen.styles.ts\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 LoginScreen.tsx\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 RegistrationScreen.styles.js\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 RegistrationScreen.tsx\n\u251c\u2500\u2500 services\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 ApiService.ts\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 AuthService.ts\n\u251c\u2500\u2500 utils\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 TokenService.js\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>App.tsx<\/code>:<\/strong> The entry point of the application, setting up navigation. Use React Navigation for screen transitions<\/li>\n\n\n\n<li><strong><code>config<\/code><\/strong>\/: Create a <code>config.js<\/code> file, to store your application&#8217;s configuration settings<\/li>\n\n\n\n<li><strong><code>screens\/<\/code>:<\/strong> Contains UI components for registration, login, and home screens.<\/li>\n\n\n\n<li><strong><code>services\/<\/code>:<\/strong> Holds the <code>AuthService.ts<\/code> for API calls related to authentication , ApiService.ts for all secured api calls<\/li>\n\n\n\n<li><strong><code>utils\/:<\/code><\/strong>  Holds the <code>TokenService.js<\/code> for Token Management Utility.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<p><strong>Key Components:<\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Registration and Login Screens:<\/strong> Handle user input for authentication and utilize <code>AuthService.ts<\/code> for backend communication.<\/li>\n\n\n\n<li><strong>Home Screen:<\/strong> Welcomes the user post-login and provides a logout option.<\/li>\n\n\n\n<li><strong>Navigation:<\/strong> Implemented using React Navigation, facilitating movement between screens.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<h3 class=\"wp-block-heading\">Backend (<code>NodeAwesomeProject<\/code>):<\/h3>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-11\">NodeAwesomeProject\/\n\u251c\u2500\u2500 controllers\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 authController.js\n\u251c\u2500\u2500 db.js\n\u251c\u2500\u2500 index.js\n\u251c\u2500\u2500 middleware\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 authMiddleware.js\n\u251c\u2500\u2500 models\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 userModel.js\n\u2514\u2500\u2500 routes\n    \u2514\u2500\u2500 authRoutes.js<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#NodeAwesomeProject%2F%0A%E2%94%9C%E2%94%80%E2%94%80%20controllers%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20authController.js%0A%E2%94%9C%E2%94%80%E2%94%80%20db.js%0A%E2%94%9C%E2%94%80%E2%94%80%20index.js%0A%E2%94%9C%E2%94%80%E2%94%80%20middleware%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20authMiddleware.js%0A%E2%94%9C%E2%94%80%E2%94%80%20models%0A%E2%94%82%C2%A0%C2%A0%20%E2%94%94%E2%94%80%E2%94%80%20userModel.js%0A%E2%94%94%E2%94%80%E2%94%80%20routes%0A%20%20%20%20%E2%94%94%E2%94%80%E2%94%80%20authRoutes.js\">\n                            <button class=\"copy-button\" data-label=\"NodeAwesomeProject\/\n\u251c\u2500\u2500 controllers\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 authController.js\n\u251c\u2500\u2500 db.js\n\u251c\u2500\u2500 index.js\n\u251c\u2500\u2500 middleware\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 authMiddleware.js\n\u251c\u2500\u2500 models\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 userModel.js\n\u2514\u2500\u2500 routes\n    \u2514\u2500\u2500 authRoutes.js\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>authController.js<\/code>:<\/strong> Handles the logic for user registration and login.<\/li>\n\n\n\n<li><strong><code>db.js<\/code>:<\/strong> Connects to the MySQL database.<\/li>\n\n\n\n<li><strong><code>index.js<\/code>:<\/strong> Sets up the Express server and base API route.<\/li>\n\n\n\n<li><strong><code>authMiddleware.js<\/code><\/strong>: To verify the JWT for protected routes, create middleware that checks the Authorization header for a valid token<\/li>\n\n\n\n<li><strong><code>userModel.js<\/code>:<\/strong> Manages database interactions for user data.<\/li>\n\n\n\n<li><strong><code>authRoutes.js<\/code>:<\/strong> Defines authentication routes (<code>\/register<\/code>, <code>\/login<\/code>).<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<p><strong>Functionality Overview<\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>User Registration and Login:<\/strong> Handled through <code>authController.js<\/code>, with password hashing via Bcrypt for security.<\/li>\n\n\n\n<li><strong>Database Interaction:<\/strong> Managed by <code>userModel.js<\/code>, facilitating user data storage and retrieval.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Running and Debugging the Application:<\/h2>\n\n\n\n<p>1. <strong>Start the Backend Server:<\/strong>\n\n\n\n<p>Inside <code>NodeAwesomeProject<\/code>, run <code>npm start<\/code> to launch the Node.js server.\n\n\n\n<p>2. <strong>Run the React Native App:<\/strong> \n\n\n\n<p>Open a new Terminal tab, navigate to <code>AwesomeProject<\/code>, and run the app:\n\n\n\n<p><strong>iOS:<\/strong>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-12\">npx react-native run-ios<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20react-native%20run-ios\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-ios\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>Android:<\/strong>\n\n\n\n<p>Ensure the emulator is running or a device is connected, then execute:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-13\">npx react-native run-android<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20react-native%20run-android\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-android\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Errors and Solution:<\/h2>\n\n\n\n<p>1. If you face below mentioned errors while running android app:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-14\">(base) zahir@Zahirs-MacBook-Pro AwesomeProject % npx react-native run-android\n(node:5245) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.\n(Use `node --trace-deprecation ...` to show where the warning was created)\ninfo Launching emulator...\ninfo Successfully launched emulator.\ninfo Installing the app...\n&gt; Task :react-native-async-storage_async-storage:compileDebugJavaWithJavac FAILED\n\nDeprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.\n\nYou can use &#039;--warning-mode all&#039; to show the individual deprecation warnings and determine if they come from your own scripts or plugins.\n\nFor more on this, please refer to https:\/\/docs.gradle.org\/8.3\/userguide\/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.\n46 actionable tasks: 2 executed, 44 up-to-date\n\ninfo \ud83d\udca1 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https:\/\/github.com\/react-native-community\/cli\/blob\/main\/packages\/cli-doctor\/README.md#doctor \n\n\nFAILURE: Build failed with an exception.\n\n* What went wrong:\nExecution failed for task &#039;:react-native-async-storage_async-storage:compileDebugJavaWithJavac&#039;.\n&gt; Could not resolve all files for configuration &#039;:react-native-async-storage_async-storage:androidJdkImage&#039;.\n   &gt; Failed to transform core-for-system-modules.jar to match attributes {artifactType=_internal_android_jdk_image, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}.\n      &gt; Execution failed for JdkImageTransform: \/Users\/zahir\/Library\/Android\/sdk\/platforms\/android-34\/core-for-system-modules.jar.\n         &gt; Error while executing process \/opt\/homebrew\/Cellar\/openjdk\/21.0.2\/libexec\/openjdk.jdk\/Contents\/Home\/bin\/jlink with arguments {--module-path \/Users\/zahir\/.gradle\/caches\/transforms-3\/0fc11a0ad5b57d5570bbba85d9e4a925\/transformed\/output\/temp\/jmod --add-modules java.base --output \/Users\/zahir\/.gradle\/caches\/transforms-3\/0fc11a0ad5b57d5570bbba85d9e4a925\/transformed\/output\/jdkImage --disable-plugin system-modules}\n\n* Try:\n&gt; Run with --stacktrace option to get the stack trace.\n&gt; Run with --info or --debug option to get more log output.\n&gt; Run with --scan to get full insights.\n&gt; Get more help at https:\/\/help.gradle.org.\n\nBUILD FAILED in 4s\nerror Failed to install the app. Command failed with exit code 1: .\/gradlew app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong:\nExecution failed for task &#039;:react-native-async-storage_async-storage:compileDebugJavaWithJavac&#039;.\n&gt; Could not resolve all files for configuration &#039;:react-native-async-storage_async-storage:androidJdkImage&#039;. &gt; Failed to transform core-for-system-modules.jar to match attributes {artifactType=_internal_android_jdk_image, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}. &gt; Execution failed for JdkImageTransform: \/Users\/zahir\/Library\/Android\/sdk\/platforms\/android-34\/core-for-system-modules.jar. &gt; Error while executing process \/opt\/homebrew\/Cellar\/openjdk\/21.0.2\/libexec\/openjdk.jdk\/Contents\/Home\/bin\/jlink with arguments {--module-path \/Users\/zahir\/.gradle\/caches\/transforms-3\/0fc11a0ad5b57d5570bbba85d9e4a925\/transformed\/output\/temp\/jmod --add-modules java.base --output \/Users\/zahir\/.gradle\/caches\/transforms-3\/0fc11a0ad5b57d5570bbba85d9e4a925\/transformed\/output\/jdkImage --disable-plugin system-modules} * Try:\n&gt; Run with --stacktrace option to get the stack trace.\n&gt; Run with --info or --debug option to get more log output.\n&gt; Run with --scan to get full insights.\n&gt; Get more help at https:\/\/help.gradle.org. BUILD FAILED in 4s.\ninfo Run CLI with --verbose flag for more details.\n(base) zahir@Zahirs-MacBook-Pro AwesomeProject % ,<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#%28base%29%20zahir%40Zahirs-MacBook-Pro%20AwesomeProject%20%25%20npx%20react-native%20run-android%0A%28node%3A5245%29%20%5BDEP0040%5D%20DeprecationWarning%3A%20The%20%60punycode%60%20module%20is%20deprecated.%20Please%20use%20a%20userland%20alternative%20instead.%0A%28Use%20%60node%20--trace-deprecation%20...%60%20to%20show%20where%20the%20warning%20was%20created%29%0Ainfo%20Launching%20emulator...%0Ainfo%20Successfully%20launched%20emulator.%0Ainfo%20Installing%20the%20app...%0A%3E%20Task%20%3Areact-native-async-storage_async-storage%3AcompileDebugJavaWithJavac%20FAILED%0A%0ADeprecated%20Gradle%20features%20were%20used%20in%20this%20build%2C%20making%20it%20incompatible%20with%20Gradle%209.0.%0A%0AYou%20can%20use%20%27--warning-mode%20all%27%20to%20show%20the%20individual%20deprecation%20warnings%20and%20determine%20if%20they%20come%20from%20your%20own%20scripts%20or%20plugins.%0A%0AFor%20more%20on%20this%2C%20please%20refer%20to%20https%3A%2F%2Fdocs.gradle.org%2F8.3%2Fuserguide%2Fcommand_line_interface.html%23sec%3Acommand_line_warnings%20in%20the%20Gradle%20documentation.%0A46%20actionable%20tasks%3A%202%20executed%2C%2044%20up-to-date%0A%0Ainfo%20%F0%9F%92%A1%20Tip%3A%20Make%20sure%20that%20you%20have%20set%20up%20your%20development%20environment%20correctly%2C%20by%20running%20npx%20react-native%20doctor.%20To%20read%20more%20about%20doctor%20command%20visit%3A%20https%3A%2F%2Fgithub.com%2Freact-native-community%2Fcli%2Fblob%2Fmain%2Fpackages%2Fcli-doctor%2FREADME.md%23doctor%20%0A%0A%0AFAILURE%3A%20Build%20failed%20with%20an%20exception.%0A%0A%2A%20What%20went%20wrong%3A%0AExecution%20failed%20for%20task%20%27%3Areact-native-async-storage_async-storage%3AcompileDebugJavaWithJavac%27.%0A%3E%20Could%20not%20resolve%20all%20files%20for%20configuration%20%27%3Areact-native-async-storage_async-storage%3AandroidJdkImage%27.%0A%20%20%20%3E%20Failed%20to%20transform%20core-for-system-modules.jar%20to%20match%20attributes%20%7BartifactType%3D_internal_android_jdk_image%2C%20org.gradle.libraryelements%3Djar%2C%20org.gradle.usage%3Djava-runtime%7D.%0A%20%20%20%20%20%20%3E%20Execution%20failed%20for%20JdkImageTransform%3A%20%2FUsers%2Fzahir%2FLibrary%2FAndroid%2Fsdk%2Fplatforms%2Fandroid-34%2Fcore-for-system-modules.jar.%0A%20%20%20%20%20%20%20%20%20%3E%20Error%20while%20executing%20process%20%2Fopt%2Fhomebrew%2FCellar%2Fopenjdk%2F21.0.2%2Flibexec%2Fopenjdk.jdk%2FContents%2FHome%2Fbin%2Fjlink%20with%20arguments%20%7B--module-path%20%2FUsers%2Fzahir%2F.gradle%2Fcaches%2Ftransforms-3%2F0fc11a0ad5b57d5570bbba85d9e4a925%2Ftransformed%2Foutput%2Ftemp%2Fjmod%20--add-modules%20java.base%20--output%20%2FUsers%2Fzahir%2F.gradle%2Fcaches%2Ftransforms-3%2F0fc11a0ad5b57d5570bbba85d9e4a925%2Ftransformed%2Foutput%2FjdkImage%20--disable-plugin%20system-modules%7D%0A%0A%2A%20Try%3A%0A%3E%20Run%20with%20--stacktrace%20option%20to%20get%20the%20stack%20trace.%0A%3E%20Run%20with%20--info%20or%20--debug%20option%20to%20get%20more%20log%20output.%0A%3E%20Run%20with%20--scan%20to%20get%20full%20insights.%0A%3E%20Get%20more%20help%20at%20https%3A%2F%2Fhelp.gradle.org.%0A%0ABUILD%20FAILED%20in%204s%0Aerror%20Failed%20to%20install%20the%20app.%20Command%20failed%20with%20exit%20code%201%3A%20.%2Fgradlew%20app%3AinstallDebug%20-PreactNativeDevServerPort%3D8081%20FAILURE%3A%20Build%20failed%20with%20an%20exception.%20%2A%20What%20went%20wrong%3A%0AExecution%20failed%20for%20task%20%27%3Areact-native-async-storage_async-storage%3AcompileDebugJavaWithJavac%27.%0A%3E%20Could%20not%20resolve%20all%20files%20for%20configuration%20%27%3Areact-native-async-storage_async-storage%3AandroidJdkImage%27.%20%3E%20Failed%20to%20transform%20core-for-system-modules.jar%20to%20match%20attributes%20%7BartifactType%3D_internal_android_jdk_image%2C%20org.gradle.libraryelements%3Djar%2C%20org.gradle.usage%3Djava-runtime%7D.%20%3E%20Execution%20failed%20for%20JdkImageTransform%3A%20%2FUsers%2Fzahir%2FLibrary%2FAndroid%2Fsdk%2Fplatforms%2Fandroid-34%2Fcore-for-system-modules.jar.%20%3E%20Error%20while%20executing%20process%20%2Fopt%2Fhomebrew%2FCellar%2Fopenjdk%2F21.0.2%2Flibexec%2Fopenjdk.jdk%2FContents%2FHome%2Fbin%2Fjlink%20with%20arguments%20%7B--module-path%20%2FUsers%2Fzahir%2F.gradle%2Fcaches%2Ftransforms-3%2F0fc11a0ad5b57d5570bbba85d9e4a925%2Ftransformed%2Foutput%2Ftemp%2Fjmod%20--add-modules%20java.base%20--output%20%2FUsers%2Fzahir%2F.gradle%2Fcaches%2Ftransforms-3%2F0fc11a0ad5b57d5570bbba85d9e4a925%2Ftransformed%2Foutput%2FjdkImage%20--disable-plugin%20system-modules%7D%20%2A%20Try%3A%0A%3E%20Run%20with%20--stacktrace%20option%20to%20get%20the%20stack%20trace.%0A%3E%20Run%20with%20--info%20or%20--debug%20option%20to%20get%20more%20log%20output.%0A%3E%20Run%20with%20--scan%20to%20get%20full%20insights.%0A%3E%20Get%20more%20help%20at%20https%3A%2F%2Fhelp.gradle.org.%20BUILD%20FAILED%20in%204s.%0Ainfo%20Run%20CLI%20with%20--verbose%20flag%20for%20more%20details.%0A%28base%29%20zahir%40Zahirs-MacBook-Pro%20AwesomeProject%20%25%20%2C\">\n                            <button class=\"copy-button\" data-label=\"(base) zahir@Zahirs-MacBook-Pro AwesomeProject % npx react-native run-android\n(node:5245) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.\n(Use `node --trace-deprecation ...` to show where the warning was created)\ninfo Launching emulator...\ninfo Successfully launched emulator.\ninfo Installing the app...\n&gt; Task :react-native-async-storage_async-storage:compileDebugJavaWithJavac FAILED\n\nDeprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.\n\nYou can use &#039;--warning-mode all&#039; to show the individual deprecation warnings and determine if they come from your own scripts or plugins.\n\nFor more on this, please refer to https:\/\/docs.gradle.org\/8.3\/userguide\/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.\n46 actionable tasks: 2 executed, 44 up-to-date\n\ninfo \ud83d\udca1 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https:\/\/github.com\/react-native-community\/cli\/blob\/main\/packages\/cli-doctor\/README.md#doctor \n\n\nFAILURE: Build failed with an exception.\n\n* What went wrong:\nExecution failed for task &#039;:react-native-async-storage_async-storage:compileDebugJavaWithJavac&#039;.\n&gt; Could not resolve all files for configuration &#039;:react-native-async-storage_async-storage:androidJdkImage&#039;.\n   &gt; Failed to transform core-for-system-modules.jar to match attributes {artifactType=_internal_android_jdk_image, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}.\n      &gt; Execution failed for JdkImageTransform: \/Users\/zahir\/Library\/Android\/sdk\/platforms\/android-34\/core-for-system-modules.jar.\n         &gt; Error while executing process \/opt\/homebrew\/Cellar\/openjdk\/21.0.2\/libexec\/openjdk.jdk\/Contents\/Home\/bin\/jlink with arguments {--module-path \/Users\/zahir\/.gradle\/caches\/transforms-3\/0fc11a0ad5b57d5570bbba85d9e4a925\/transformed\/output\/temp\/jmod --add-modules java.base --output \/Users\/zahir\/.gradle\/caches\/transforms-3\/0fc11a0ad5b57d5570bbba85d9e4a925\/transformed\/output\/jdkImage --disable-plugin system-modules}\n\n* Try:\n&gt; Run with --stacktrace option to get the stack trace.\n&gt; Run with --info or --debug option to get more log output.\n&gt; Run with --scan to get full insights.\n&gt; Get more help at https:\/\/help.gradle.org.\n\nBUILD FAILED in 4s\nerror Failed to install the app. Command failed with exit code 1: .\/gradlew app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong:\nExecution failed for task &#039;:react-native-async-storage_async-storage:compileDebugJavaWithJavac&#039;.\n&gt; Could not resolve all files for configuration &#039;:react-native-async-storage_async-storage:androidJdkImage&#039;. &gt; Failed to transform core-for-system-modules.jar to match attributes {artifactType=_internal_android_jdk_image, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}. &gt; Execution failed for JdkImageTransform: \/Users\/zahir\/Library\/Android\/sdk\/platforms\/android-34\/core-for-system-modules.jar. &gt; Error while executing process \/opt\/homebrew\/Cellar\/openjdk\/21.0.2\/libexec\/openjdk.jdk\/Contents\/Home\/bin\/jlink with arguments {--module-path \/Users\/zahir\/.gradle\/caches\/transforms-3\/0fc11a0ad5b57d5570bbba85d9e4a925\/transformed\/output\/temp\/jmod --add-modules java.base --output \/Users\/zahir\/.gradle\/caches\/transforms-3\/0fc11a0ad5b57d5570bbba85d9e4a925\/transformed\/output\/jdkImage --disable-plugin system-modules} * Try:\n&gt; Run with --stacktrace option to get the stack trace.\n&gt; Run with --info or --debug option to get more log output.\n&gt; Run with --scan to get full insights.\n&gt; Get more help at https:\/\/help.gradle.org. BUILD FAILED in 4s.\ninfo Run CLI with --verbose flag for more details.\n(base) zahir@Zahirs-MacBook-Pro AwesomeProject % ,\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>A: As of now React Native(RN) version 0.73.5 is using Gradle 8.3, which is not compatible with JDK 21. \n\n\n\n<p>This is not related to Async Storage, but your setup &#8211; best to downgrade JDK, 17 is fine\n\n\n\n<p>2. How can I check my React Native version :\n\n\n\n<p>A: Go to your terminal and type below command which will display your react native version\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-15\">npx npm view react-native version<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20npm%20view%20react-native%20version\">\n                            <button class=\"copy-button\" data-label=\"npx npm view react-native version\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>3. How can I check my Gradle version:\n\n\n\n<p>A:  Type below command from your react project:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-16\">cd android\ncat gradle\/wrapper\/gradle-wrapper.properties <\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#cd%20android%0Acat%20gradle%2Fwrapper%2Fgradle-wrapper.properties%20\">\n                            <button class=\"copy-button\" data-label=\"cd android\ncat gradle\/wrapper\/gradle-wrapper.properties \"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Look for the line that starts with&nbsp;<code>distributionUrl=<\/code>. This line specifies the Gradle version being used.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-17\">Example: distributionUrl=https\\:\/\/services.gradle.org\/distributions\/gradle-8.3-all.zip <\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#Example%3A%20distributionUrl%3Dhttps%5C%3A%2F%2Fservices.gradle.org%2Fdistributions%2Fgradle-8.3-all.zip%20\">\n                            <button class=\"copy-button\" data-label=\"Example: distributionUrl=https\\:\/\/services.gradle.org\/distributions\/gradle-8.3-all.zip \"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>&#8230;indicates you&#8217;re using Gradle version 8.3.\n\n\n\n<p>4. How can I know my JDK version:\n\n\n\n<p>A: Go to your terminal and type below command, which will display openjdk version:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-18\">java -version<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#java%20-version\">\n                            <button class=\"copy-button\" data-label=\"java -version\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>5. How can I downgrade to JDK 17\n\n\n\n<p>A: Go to your terminal and type below command :\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-19\">brew install openjdk@17<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#brew%20install%20openjdk%4017\">\n                            <button class=\"copy-button\" data-label=\"brew install openjdk@17\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-7-1024x464.png\" alt=\"\" class=\"wp-image-330\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-7-1024x464.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-7-300x136.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-7-768x348.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-7-1536x697.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-7-2048x929.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Execute the below command in your terminal to create the necessary symlink which we can get while installing openjdk@17. Check above screenshot for preference\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-20\">sudo ln -sfn \/opt\/homebrew\/opt\/openjdk@17\/libexec\/openjdk.jdk \/Library\/Java\/JavaVirtualMachines\/openjdk-17.jdk<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20ln%20-sfn%20%2Fopt%2Fhomebrew%2Fopt%2Fopenjdk%4017%2Flibexec%2Fopenjdk.jdk%20%2FLibrary%2FJava%2FJavaVirtualMachines%2Fopenjdk-17.jdk\">\n                            <button class=\"copy-button\" data-label=\"sudo ln -sfn \/opt\/homebrew\/opt\/openjdk@17\/libexec\/openjdk.jdk \/Library\/Java\/JavaVirtualMachines\/openjdk-17.jdk\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Update your .zshrc file: in your terminal type vim <code>~\/.zshrc<\/code> and update :\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-21\"># Set Java Home to JDK 17\nexport JAVA_HOME=$(\/usr\/libexec\/java_home -v17)\n# Include JAVA_HOME bin directory in PATH\nexport PATH=&quot;$JAVA_HOME\/bin:$PATH&quot;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#%23%20Set%20Java%20Home%20to%20JDK%2017%0Aexport%20JAVA_HOME%3D%24%28%2Fusr%2Flibexec%2Fjava_home%20-v17%29%0A%23%20Include%20JAVA_HOME%20bin%20directory%20in%20PATH%0Aexport%20PATH%3D%22%24JAVA_HOME%2Fbin%3A%24PATH%22\">\n                            <button class=\"copy-button\" data-label=\"# Set Java Home to JDK 17\nexport JAVA_HOME=$(\/usr\/libexec\/java_home -v17)\n# Include JAVA_HOME bin directory in PATH\nexport PATH=&quot;$JAVA_HOME\/bin:$PATH&quot;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Apply the Changes: To apply the changes made to your <code>.zshrc<\/code> file, run:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-22\">source ~\/.zshrc<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#source%20~%2F.zshrc\">\n                            <button class=\"copy-button\" data-label=\"source ~\/.zshrc\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>And check your java version by typing :<code> java --version<\/code>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<p><strong>Important Considerations<\/strong>:\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>API Configuration:<\/strong>&nbsp;Ensure&nbsp;<code>API_URL<\/code>&nbsp;(in&nbsp;<code>AuthService.ts<\/code>) points to your backend.<\/li>\n\n\n\n<li><strong>Native vs. Expo:<\/strong>&nbsp;Since you&#8217;re avoiding Expo, be prepared to handle certain dependencies and configurations that Expo typically automates.<\/li>\n\n\n\n<li><strong>Error Handling:<\/strong>&nbsp;Implement robust error handling on both sides.<\/li>\n\n\n\n<li><strong>Security:<\/strong>&nbsp;Prioritize security best practices.<\/li>\n\n\n\n<li><strong>Testing:<\/strong>&nbsp;Write tests!<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Building a React Native application with a Node.js backend on macOS offers a flexible and powerful approach for developing cross-platform mobile apps. This guide provides a roadmap from setting up your development environment to running and debugging your application, laying a solid foundation for adding more complex features and functionalities.\n","protected":false},"excerpt":{"rendered":"<p>When building a cross-platform mobile application from the ground up on macOS, it&#8217;s crucial to have a clear guide that navigates through the setup and [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[50,51,17,55,54],"class_list":["post-303","post","type-post","status-publish","format-standard","hentry","category-react-native-on-mac","tag-android-app","tag-ios-app","tag-mac-m1-m2-m3","tag-nodejs","tag-react-native"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":28,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/303\/revisions\/340"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}