@fadyshawky/react-native-magic 2.1.3 → 2.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/template/README.md +78 -45
  3. package/template/src/common/components/PrimaryTextInput.tsx +11 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fadyshawky/react-native-magic",
3
- "version": "2.1.3",
3
+ "version": "2.1.4",
4
4
  "description": "Plug-and-play React Native template: TypeScript, Redux, React Navigation, scalable architecture. Init and start developing without hassle.",
5
5
  "keywords": [
6
6
  "react-native-magic",
package/template/README.md CHANGED
@@ -1,79 +1,112 @@
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
+ # ReactNativeMagic
2
2
 
3
- # Getting Started
3
+ **Plug and play** – create your app and start developing without hassle.
4
4
 
5
- >**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.
5
+ A production-ready React Native template with TypeScript, Redux, React Navigation, and a scalable architecture (Uprise-style). Use it to bootstrap new apps with one command.
6
6
 
7
- ## Step 1: Start the Metro Server
7
+ ## Requirements
8
8
 
9
- First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
9
+ - **Node.js >= 20** ([Download](https://nodejs.org/en/download/))
10
+ - JDK >= 11 ([Download](https://www.oracle.com/java/technologies/downloads/))
11
+ - Ruby >= 2.7.5 (for iOS)
12
+ - Xcode (for iOS) / Android Studio (for Android)
10
13
 
11
- To start Metro, run the following command from the _root_ of your React Native project:
14
+ ## Quick start
12
15
 
13
16
  ```bash
14
- # using npm
15
- npm start
16
-
17
- # OR using Yarn
18
- yarn start
17
+ npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic
18
+ cd YourAppName
19
19
  ```
20
20
 
21
- ## Step 2: Start your Application
21
+ Optional: set your bundle ID at creation:
22
22
 
23
- 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:
23
+ ```bash
24
+ npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic --package-name com.yourcompany.yourapp
25
+ ```
24
26
 
25
- ### For Android
27
+ For iOS, install pods:
26
28
 
27
29
  ```bash
28
- # using npm
29
- npm run android
30
-
31
- # OR using Yarn
32
- yarn android
30
+ cd ios && pod install && cd ..
33
31
  ```
34
32
 
35
- ### For iOS
33
+ Then run:
36
34
 
37
35
  ```bash
38
- # using npm
39
- npm run ios
36
+ npm start
37
+ npm run ios # or an Android variant below
38
+ ```
39
+
40
+ ## First steps after creating your app
41
+
42
+ 1. **App name & bundle ID** – Set at init (or you’ll be prompted for package name if you didn’t pass `--package-name`). See [CUSTOMIZATION.md](template/docs/CUSTOMIZATION.md#app-name-and-bundle-id).
43
+ 2. **API** – Copy `.env.example` to `.env` and set `API_BASE_URL` (and other vars) for your backend.
44
+ 3. **Theme** – Edit `src/core/theme/colors.ts` (and `fonts.ts`, `commonSizes.ts` if needed) for your brand.
45
+ 4. **Config** – Optional: adjust `src/core/config/index.ts` for feature toggles or app-level constants.
46
+
47
+ ## Documentation
48
+
49
+ In your generated project you’ll have:
50
+
51
+ - **[docs/ARCHITECTURE.md](template/docs/ARCHITECTURE.md)** – Layers, folder map, data flow, SOLID.
52
+ - **[docs/CUSTOMIZATION.md](template/docs/CUSTOMIZATION.md)** – App name, bundle ID, API, theme, adding a screen/slice/language.
53
+ - **[docs/BEST_PRACTICES.md](template/docs/BEST_PRACTICES.md)** – Code style, structure, testing, security, upgrades.
54
+
55
+ ## Project structure (in your app)
40
56
 
41
- # OR using Yarn
42
- yarn ios
43
57
  ```
58
+ src/
59
+ ├── common/ # Shared components, localization, helpers, validations, utils
60
+ ├── core/ # Store (Redux), API, theme, config
61
+ ├── navigation/ # Auth stack, main stack, tabs
62
+ ├── screens/ # Feature screens
63
+ └── sheetManager/ # Action sheets
64
+ ```
65
+
66
+ ## Scripts
44
67
 
45
- 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.
68
+ | Command | Description |
69
+ |---------|-------------|
70
+ | `npm start` | Start Metro bundler |
71
+ | `npm run ios` | Run on iOS |
72
+ | `npm run android:prod:debug` | Run Android (production, debug) |
73
+ | `npm run android:prod:release` | Run Android (production, release) |
74
+ | `npm run android:staging:debug` | Run Android (staging, debug) |
75
+ | `npm run android:staging:release` | Run Android (staging, release) |
76
+ | `npm run android:development:debug` | Run Android (development, debug) |
77
+ | `npm run android:development:release` | Run Android (development, release) |
78
+ | `npm test` | Run tests |
79
+ | `npm run lint` | Lint code |
46
80
 
47
- This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
81
+ ## Versioning
48
82
 
49
- ## Step 3: Modifying your App
83
+ - **React Native**: ^0.84.x (current stable at release).
84
+ - **React**: ^19.2.x.
85
+ - **Node**: >= 20 (LTS).
50
86
 
51
- Now that you have successfully run the app, let's modify it.
87
+ Dependencies use **caret (^)** so your app can get patch/minor updates independently.
52
88
 
53
- 1. Open `App.tsx` in your text editor of choice and edit some lines.
54
- 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!
89
+ ## Common issues
55
90
 
56
- For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
91
+ **iOS – Pod install fails**
57
92
 
58
- ## Congratulations! :tada:
93
+ ```bash
94
+ cd ios && pod deintegrate && pod install && cd ..
95
+ ```
59
96
 
60
- You've successfully run and modified your React Native App. :partying_face:
97
+ **Android – Gradle / SDK**
61
98
 
62
- ### Now what?
99
+ - Run `./gradlew clean` in `android/`.
100
+ - Ensure `android/local.properties` has `sdk.dir` set to your Android SDK path.
63
101
 
64
- - 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).
65
- - If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
102
+ **Upgrading React Native**
66
103
 
67
- # Troubleshooting
104
+ Use [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) (select current → target version) and apply the suggested changes.
68
105
 
69
- If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
106
+ ## License
70
107
 
71
- # Learn More
108
+ MIT – see [LICENSE.md](LICENSE.md).
72
109
 
73
- To learn more about React Native, take a look at the following resources:
110
+ ## Author
74
111
 
75
- - [React Native Website](https://reactnative.dev) - learn more about React Native.
76
- - [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
77
- - [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
78
- - [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
79
- - [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
112
+ Fady Shawky – [GitHub](https://github.com/fadyshawky)
package/template/src/common/components/PrimaryTextInput.tsx CHANGED
@@ -22,7 +22,7 @@ import {
22
22
  ViewStyle,
23
23
  } from 'react-native';
24
24
  import {useTheme} from '../../core/theme/ThemeProvider';
25
- import {PrimaryColors, AlertColors} from '../../core/theme/colors';
25
+ import {PrimaryColors, AlertColors, NaturalColors} from '../../core/theme/colors';
26
26
  import {isIos} from '../../core/theme/commonConsts';
27
27
  import {CommonSizes} from '../../core/theme/commonSizes';
28
28
  import {CommonStyles} from '../../core/theme/commonStyles';
@@ -93,6 +93,15 @@ export const PrimaryTextInput: FC<IProps> = memo(
93
93
  const {theme} = useTheme();
94
94
  const [regexError, setRegexError] = useState<string | null>(null);
95
95
 
96
+ // Ensure gradient colors are always a valid array (BVLinearGradient crashes on null/undefined)
97
+ const gradientColors = useMemo(
98
+ () => [
99
+ theme.colors.mutedLavender ?? NaturalColors.naturalColor_100,
100
+ theme.colors.indigoBlue ?? PrimaryColors.PlatinateBlue_400,
101
+ ],
102
+ [theme.colors.mutedLavender, theme.colors.indigoBlue],
103
+ );
104
+
96
105
  const onLocalFocus = useCallback(
97
106
  (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
98
107
  setFocused(true);
@@ -158,7 +167,7 @@ export const PrimaryTextInput: FC<IProps> = memo(
158
167
  }}>
159
168
  <GradientBorderView
160
169
  gradientProps={{
161
- colors: [theme.colors.mutedLavender, theme.colors.indigoBlue],
170
+ colors: gradientColors,
162
171
  }}
163
172
  style={{
164
173
  borderWidth: CommonSizes.borderWidth.small,