@fadyshawky/react-native-magic 1.0.0

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#342D0C",
+        "titleBar.activeBackground": "#493F10",
+        "titleBar.activeForeground": "#FCFAF0"
+    }
+}

package/README.md

@@ -0,0 +1,269 @@
+# ReactNativeMagic
+
+A modern, production-ready React Native template with best practices, common dependencies, and a scalable architecture.
+
+## Requirements
+
+- Node.js >= 14 ([Download](https://nodejs.org/en/download/))
+- JDK >= 11 ([Download](https://www.oracle.com/java/technologies/downloads/))
+- Ruby >= 2.7.5 (for iOS) ([Download](https://www.ruby-lang.org/en/downloads/))
+- Xcode (for iOS) ([Mac App Store](https://apps.apple.com/us/app/xcode/id497799835))
+- Android Studio (for Android) ([Download](https://developer.android.com/studio))
+
+## Installation
+
+```bash
+npx react-native init YourAppName --template reactnativemagic
+cd YourAppName
+npm install --legacy-peer-deps
+```
+
+For iOS, install pods:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+## Project Structure
+
+```
+YourAppName/
+├── src/
+│   ├── components/       # Reusable UI components
+│   ├── screens/         # Screen components
+│   ├── navigation/      # Navigation configurations
+│   ├── services/        # API services and other external services
+│   ├── store/          # State management
+│   │   ├── slices/     # Redux slices
+│   │   └── index.ts    # Store configuration
+│   ├── theme/          # Theme configurations
+│   ├── utils/          # Utility functions
+│   └── types/          # TypeScript type definitions
+├── android/
+├── ios/
+└── ...
+```
+
+## Features
+
+### 1. Type Safety
+
+- Full TypeScript support
+- Pre-configured tsconfig.json
+- Type definitions for all components
+
+### 2. Navigation
+
+- React Navigation v6
+- Type-safe navigation
+- Bottom tabs setup
+- Stack navigation setup
+
+Documentation: [React Navigation](https://reactnavigation.org/docs/getting-started)
+
+### 3. State Management
+
+- Redux Toolkit
+- Async storage integration
+- Predefined store setup
+
+Documentation: [Redux Toolkit](https://redux-toolkit.js.org/introduction/getting-started)
+
+### 4. Environment Variables
+
+- React Native Config integration
+- Secure environment configuration
+- Type-safe environment variables
+
+Documentation: [React Native Config](https://github.com/luggit/react-native-config)
+
+### 5. Styling
+
+- React Native Paper
+- Custom theming system
+- Dark mode support
+
+Documentation: [React Native Paper](https://callstack.github.io/react-native-paper/)
+
+### 6. Testing
+
+- Jest configuration
+- React Native Testing Library
+- Example tests included
+
+Documentation:
+
+- [Jest](https://jestjs.io/docs/getting-started)
+- [React Native Testing Library](https://callstack.github.io/react-native-testing-library/)
+
+## Available Scripts
+
+```bash
+# Start the Metro bundler
+npm start
+
+# Run on iOS
+npm run ios
+
+# Run on Android
+npm run android
+
+# Run tests
+npm test
+
+# Lint code
+npm run lint
+
+# Type checking
+npm run typescript
+```
+
+## Dependencies
+
+### Production Dependencies
+
+```json
+{
+  "@react-navigation/bottom-tabs": "^6.x",
+  "@react-navigation/native": "^6.x",
+  "@react-navigation/native-stack": "^6.x",
+  "@reduxjs/toolkit": "^1.x",
+  "react-native-paper": "^5.x",
+  "react-native-safe-area-context": "^4.x",
+  "react-native-screens": "^3.x",
+  "@react-native-async-storage/async-storage": "^1.x",
+  "react-native-config": "^1.x"
+}
+```
+
+### Development Dependencies
+
+```json
+{
+  "@testing-library/react-native": "^11.x",
+  "@types/jest": "^29.x",
+  "@types/react": "^18.x",
+  "typescript": "^4.x",
+  "jest": "^29.x"
+}
+```
+
+## Common Issues & Solutions
+
+### iOS Build Issues
+
+1. Pod installation fails:
+
+```bash
+cd ios
+pod deintegrate
+pod install
+```
+
+2. Clean build:
+
+```bash
+cd ios
+xcodebuild clean
+cd ..
+npm run ios
+```
+
+### Android Build Issues
+
+1. Gradle issues:
+
+```bash
+cd android
+./gradlew clean
+cd ..
+npm run android
+```
+
+2. SDK location issues:
+   Create a `local.properties` file in the android folder with your SDK path:
+
+```properties
+sdk.dir=/Users/USERNAME/Library/Android/sdk
+```
+
+## Customization
+
+### 1. Changing Theme
+
+Edit `src/theme/index.ts`:
+
+```typescript
+export const theme = {
+  colors: {
+    primary: "#YOUR_COLOR",
+    // ...
+  },
+  // ...
+};
+```
+
+### 2. Adding New Navigation Screens
+
+1. Create screen in `src/screens`
+2. Add to navigation stack in `src/navigation`
+3. Update types in `src/types/navigation.ts`
+
+### 3. Environment Variables
+
+1. Create `.env` file in root directory:
+
+```env
+API_URL=https://api.example.com
+ENV=development
+```
+
+2. Access variables in your code:
+
+```typescript
+import Config from "react-native-config";
+
+console.log(Config.API_URL);
+```
+
+Note: Remember to add `.env` to your `.gitignore` file and provide a `.env.example` template.
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## Useful Links
+
+- [React Native Documentation](https://reactnative.dev/docs/getting-started)
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
+- [React Navigation Documentation](https://reactnavigation.org/docs/getting-started)
+- [Redux Toolkit Documentation](https://redux-toolkit.js.org/introduction/getting-started)
+- [React Native Paper Documentation](https://callstack.github.io/react-native-paper/)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
+
+## Support
+
+If you find this template helpful, consider buying me a coffee! ☕️
+
+<a href="https://www.buymeacoffee.com/fadytshawke" target="_blank">
+  <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="60px" width="217px">
+</a>
+
+## Author
+
+Fady Shawky
+
+- GitHub: [@fadyshawky](https://github.com/fadyshawky)
+
+## Acknowledgments
+
+- React Native Team
+- React Navigation Team
+- All contributors who help maintain this template

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@fadyshawky/react-native-magic",
+  "version": "1.0.0",
+  "description": "react native template with ready components, hooks, react navigation, redux, typescript, etc.",
+  "keywords": [
+    "react-native",
+    "typescript",
+    "jest",
+    "template",
+    "boilerplate",
+    "react-native-template",
+    "redux",
+    "react-navigation",
+    "state-management",
+    "bottom-sheet"
+  ],
+  "license": "MIT",
+  "author": "Fady Shawky",
+  "type": "commonjs",
+  "main": "index.js",
+  "scripts": {
+    "test": "exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fadyshawky/ReactNativeMagic.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fadyshawky/ReactNativeMagic/issues"
+  },
+  "homepage": "https://github.com/fadyshawky/ReactNativeMagic#readme",
+  "funding": {
+    "type": "buymeacoffee",
+    "url": "https://buymeacoffee.com/fadytshawke"
+  }
+}

package/template/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

package/template/.env.development

@@ -0,0 +1,5 @@
+API_BASE_URL=https://dev-api.example.com
+API_KEY=dev_key
+ANDROID_APP_ID=com.reactnativemagic.development
+ANDROID_VERSION_CODE=1
+ANDROID_VERSION_NAME=1.0.0

package/template/.env.production

@@ -0,0 +1,5 @@
+API_BASE_URL=https://api.example.com
+API_KEY=production_key
+ANDROID_APP_ID=com.reactnativemagic
+ANDROID_VERSION_CODE=1
+ANDROID_VERSION_NAME=1.0.0

package/template/.env.staging

@@ -0,0 +1,5 @@
+API_BASE_URL=https://staging-api.example.com
+API_KEY=staging_key
+ANDROID_APP_ID=com.reactnativemagic.staging
+ANDROID_VERSION_CODE=1
+ANDROID_VERSION_NAME=1.0.0

package/template/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

package/template/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

package/template/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/template/App.tsx

@@ -0,0 +1,34 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+import React from 'react';
+import {LogBox, SafeAreaView, StatusBar} from 'react-native';
+import {SheetProvider} from 'react-native-actions-sheet';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {Provider} from 'react-redux';
+import {PersistGate} from 'redux-persist/integration/react';
+import {persistor, store} from './src/core/store/store';
+import AppNavigator from './src/navigation/MainNavigation';
+
+LogBox.ignoreAllLogs();
+function App(): React.JSX.Element {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <SafeAreaProvider>
+          <SafeAreaView style={{position: 'absolute'}} />
+          <StatusBar barStyle={'dark-content'} backgroundColor={'white'} />
+          <SheetProvider>
+            <AppNavigator />
+          </SheetProvider>
+        </SafeAreaProvider>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export default App;

package/template/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'

package/template/Gemfile.lock

@@ -0,0 +1,117 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.7)
+      base64
+      nkf
+      rexml
+    activesupport (7.2.2.1)
+      base64
+      benchmark (>= 0.3)
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.3.1)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
+      minitest (>= 5.1)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    base64 (0.2.0)
+    benchmark (0.4.0)
+    bigdecimal (3.1.8)
+    claide (1.1.0)
+    cocoapods (1.15.2)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.15.2)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.15.2)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.3.4)
+    connection_pool (2.4.1)
+    drb (2.2.1)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.17.0)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.6)
+      concurrent-ruby (~> 1.0)
+    json (2.9.1)
+    logger (1.6.4)
+    minitest (5.25.4)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    nkf (0.2.0)
+    public_suffix (4.0.7)
+    rexml (3.4.0)
+    ruby-macho (2.5.1)
+    securerandom (0.4.1)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.25.1)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (>= 3.3.6, < 4.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+  xcodeproj (< 1.26.0)
+
+RUBY VERSION
+   ruby 3.3.3p89
+
+BUNDLED WITH
+   2.5.11

package/template/README.md

@@ -0,0 +1,79 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app 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 and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- 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).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

package/template/__tests__/App.test.tsx

@@ -0,0 +1,17 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: import explicitly to use the types shipped with jest.
+import {it} from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});