{"id":22463800,"url":"https://github.com/davidobinna/react-ionic-android-ios-starter","last_synced_at":"2025-03-27T14:28:46.810Z","repository":{"id":171126036,"uuid":"647347069","full_name":"davidobinna/React-Ionic-Android-Ios-Starter","owner":"davidobinna","description":"React Ios and Android Native web application stater template for quick development and optimized with ionic themes: Run npm install, npm run dev, npm run ionic:buiild and npm run ionic:serve make sure sure to have android studio, xcode and nodejs on your computer.","archived":false,"fork":false,"pushed_at":"2024-03-12T14:56:00.000Z","size":467,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T18:43:06.633Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidobinna.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-05-30T15:24:32.000Z","updated_at":"2024-09-18T02:23:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"70a28253-e874-4e9a-b2ff-6fe4cb2ac3fd","html_url":"https://github.com/davidobinna/React-Ionic-Android-Ios-Starter","commit_stats":null,"previous_names":["davidobinna/react-ios-android-native-xcode-androidstudio-starter-webapp","davidobinna/react-ionic-android-ios-starter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidobinna%2FReact-Ionic-Android-Ios-Starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidobinna%2FReact-Ionic-Android-Ios-Starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidobinna%2FReact-Ionic-Android-Ios-Starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidobinna%2FReact-Ionic-Android-Ios-Starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidobinna","download_url":"https://codeload.github.com/davidobinna/React-Ionic-Android-Ios-Starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245862356,"owners_count":20684670,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-06T09:14:08.522Z","updated_at":"2025-03-27T14:28:46.783Z","avatar_url":"https://github.com/davidobinna.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2\u003eHey! I'm Dave - Welcome\u003c/h2\u003e\n\n# React-Ios-Android-Native-Xcode-AndroidStudio-Starter-Webapp\nReact Ios and Android Native web application stater template for quick development and optimized with ionic themes: Run npm install, npm run dev, npm run ionic:buiild and npm run ionic:serve make sure sure to have android studio, xcode and nodejs on your computer.\n\n\u003ch1\u003eMannual Installation\u003c/h1\u003e\n\n Vite, React, Ionic, and Capacitor are all great tools for building modern Navtive web apps. Let's get everything installed. Here's a step-by-step guide:\n\n**Step 1: Install Node.js and npm**\n\nBefore you can use Vite, React, Ionic, or Capacitor, you'll need to have Node.js and npm installed on your system. You can download Node.js from the [official website](https://nodejs.org/). npm is included as part of Node.js.\n\n**Step 2: Install Vite**\n\nOnce you have Node.js and npm installed, you can install Vite by running the following command in your terminal:\n\n```\nnpm install create-vite\n```\n\n**Step 3: Create a new Vite + React project**\n\nNow you can use Vite to create a new project. You'll use the `create-vite` command, specify your project name (replace `my-vite-project` with your actual project name), and then specify that you want to use the React template:\n\n```\nnpx create-vite my-vite-project --template react\n```\n\n**Step 4: Navigate to your new project directory**\n\nMove to the newly created project directory with:\n\n```\ncd my-vite-project\n```\n\n**Step 5: Install Ionic**\n\nNext, you'll need to install Ionic. You can do this with the following command:\n\n```\nnpm install @ionic/react\nOr\nnpm install @ionic/react@6.0.0\n\n```\n\n**Step 6: Install Capacitor**\n\nNow you can install Capacitor. First, you need to install the Capacitor CLI (Command Line Interface):\n\n```\nnpm install @capacitor/cli @capacitor/core\n```\n\nAfter the Capacitor CLI is installed, you can add platforms (like iOS or Android) that you want your app to run on:\n\n```\nnpx cap add ios\nnpx cap add android\n```\n\nYou will also need to initialize Capacitor with your app information. Here's an example:\n\n```\nnpx cap init myApp com.example.myapp\n```\n\nIn the above command, `myApp` is the name of your app, and `com.example.myapp` is the bundle ID (generally in reverse-domain style).\n\n**Step 7: Install additional dependencies**\n\nDepending on the requirements of your project, you may need to install additional dependencies, such as React Router for navigation or Axios for HTTP requests.\n\nWith these installations, you should be ready to start building your app with Vite, React, Ionic, and Capacitor. Remember, you should always check the official documentation for these tools if you run into issues or need more detailed information.\n\n\n\u003ch1\u003eRemoving Packages Example:\u003c/h1\u003e\nIf you want to remove a package that has already been installed, you can use the `npm uninstall` command followed by the package name. In your case, you can remove the version 7 of @ionic/react using the following command:\n\n```bash\n\nnpm uninstall @ionic/react\nOr\nnpm install react-router-dom@6.6.1\n\n```\n\nAfter running this command, the @ionic/react package will be removed from your node_modules directory, and its entry in the dependencies section of your package.json file will also be removed.\n\nAfter uninstalling, you can install the specific version of the package you need (version 6.0.0 in your case) using the command I provided in the previous message.\n\nRemember, each time you add or remove a package, it's a good idea to delete your `package-lock.json` file and `node_modules` folder and then run `npm install` to ensure all dependencies are correctly installed.\n\n\u003ch1\u003e Installing React Router Dom V6 \u003c/h1\u003e\nTo install `react-router-dom` at a specific version, you can specify the version number just like we did earlier with Ionic. \n\nHere is the command to install `react-router-dom` version 6.6.1:\n\n```bash\nnpm install react-router-dom@6.6.1\n```\n\nThis command will add `react-router-dom` version 6.6.1 to your `node_modules` folder and add an entry to the dependencies section of your `package.json` file.\n\nAfter the installation process, you can confirm the installed version by using the `npm list` command:\n\n```bash\nnpm list react-router-dom\n```\n\nThis command will display the installed version of `react-router-dom` in your project. If everything went well, it should show version 6.6.1.\n\n\n\u003ch1\u003eAdding Android and Ios Native Platforms\u003c/h1\u003e\nTo install both `@capacitor/android` and `@capacitor/ios`, you need to run the following commands in your terminal:\n\n1. Navigate to the root directory of your project:\n\n```bash\ncd /path/to/your/project\n```\n\n2. Install `@capacitor/android`:\n\n```bash\nnpm install @capacitor/android\nor\nnpm install @capacitor/android@5.0.4\n\n```\n\n3. Install `@capacitor/ios`:\n\n```bash\nnpm install @capacitor/ios\nor\nnpm install @capacitor/ios@5.0.4\n\n```\n\nYou need to ensure that you have Node.js and npm installed in your development environment to use these commands. After installation, these packages will be added to your project's `node_modules` directory, and they will be listed in your `package.json` file under the \"dependencies\" section.\n\nRemember to run `npx cap sync` after installing new plugins. This command updates each of your native platform projects so they have the latest assets and configuration data. This way, when you run `npx cap open android` or `npx cap open ios`, your IDE will be up-to-date.\n\n\u003ch1\u003eInstallation With Typescript\u003c/h1\u003e\n1. install vite globally\n npm install -g create-vite\n \n2. Create new project vite\ncreate-vite my-app --template react-ts\n\n3. Navigate to the project directory:\n   cd my-app\n\n4. Configure your project's dependencies. Open a terminal at the project root and install the required dependencies:\n   npm install\n\n5. Open src/App.tsx and update it with the following code:\n   import React from 'react';\nimport { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';\nimport OnboardScreenLayout from './screens/OnboardScreenLayout';\nimport OnboardScreen from './screens/OnboardScreen';\n\nconst App = () =\u003e {\n  return (\n    \u003cRouter\u003e\n      \u003cRoutes\u003e\n        \u003cRoute path=\"/\" element={\u003cOnboardScreenLayout /\u003e}\u003e\n          \u003cRoute path=\"/\" element={\u003cNavigate to=\"/onboardscreen\" /\u003e} /\u003e\n          \u003cRoute path=\"/onboardscreen\" element={\u003cOnboardScreen /\u003e} /\u003e\n        \u003c/Route\u003e\n      \u003c/Routes\u003e\n    \u003c/Router\u003e\n  );\n}\n\nexport default App;\n\nOR\n\nIn your routing configuration file (e.g., src/router.tsx), define the routes using React Router:\n\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';\nimport OnboardScreenLayout from './components/OnboardScreenLayout';\nimport OnboardScreen from './components/OnboardScreen';\nimport NotFound from './components/NotFound';\n\nconst RouterConfig = () =\u003e (\n  \u003cRouter\u003e\n    \u003cRoutes\u003e\n      \u003cRoute path=\"/\" element={\u003cOnboardScreenLayout /\u003e}\u003e\n        \u003cRoute index element={\u003cNavigate to=\"/onboardscreen\" /\u003e} /\u003e\n        \u003cRoute path=\"/onboardscreen\" element={\u003cOnboardScreen /\u003e} /\u003e\n      \u003c/Route\u003e\n      \u003cRoute path=\"*\" element={\u003cNotFound /\u003e} /\u003e\n    \u003c/Routes\u003e\n  \u003c/Router\u003e\n);\n\nexport default RouterConfig;\n\n\n6. Finally, you can import and use this RouterConfig component in your App.tsx or index.tsx file:\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport RouterConfig from './router';\n\nReactDOM.render(\u003cRouterConfig /\u003e, document.getElementById('root'));\n\n\n7. Using Context provider\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { AppProvider } from './AppContext';\nimport RouterConfig from './router';\n\nReactDOM.render(\n  \u003cAppProvider\u003e\n    \u003cRouterConfig /\u003e\n  \u003c/AppProvider\u003e,\n  document.getElementById('root')\n);\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidobinna%2Freact-ionic-android-ios-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidobinna%2Freact-ionic-android-ios-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidobinna%2Freact-ionic-android-ios-starter/lists"}