@umituz/react-native-design-system 2.9.11 â 2.9.13
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.
- package/README.md +23 -3
- package/package.json +1 -1
- package/src/molecules/splash/README.md +0 -32
package/README.md
CHANGED
|
@@ -14,6 +14,28 @@ Universal design system for React Native apps following Domain-Driven Design (DD
|
|
|
14
14
|
- ðĶ **Zero Config** - Works out of the box
|
|
15
15
|
- ðŠķ **Lightweight** - Smaller bundle size (no Paper dependency)
|
|
16
16
|
|
|
17
|
+
## ðŦ ABSOLUTE PROHIBITIONS (Zero Tolerance)
|
|
18
|
+
|
|
19
|
+
### NO ANIMATIONS - EVER
|
|
20
|
+
- â `Animated` from react-native is FORBIDDEN
|
|
21
|
+
- â `Animated.View`, `Animated.Text`, `Animated.timing()` FORBIDDEN
|
|
22
|
+
- â `animationType="slide"` or `"fade"` on Modal FORBIDDEN
|
|
23
|
+
- â `InteractionManager.runAfterInteractions` FORBIDDEN (causes screen lock)
|
|
24
|
+
- â `react-native-reanimated` FORBIDDEN
|
|
25
|
+
- â `Lottie` animations FORBIDDEN
|
|
26
|
+
- â
Use `animationType="none"` on all Modal components
|
|
27
|
+
- â
Use `View` instead of `Animated.View`
|
|
28
|
+
|
|
29
|
+
### NO GRADIENTS - EVER
|
|
30
|
+
- â `LinearGradient` component is FORBIDDEN
|
|
31
|
+
- â `expo-linear-gradient` package is FORBIDDEN
|
|
32
|
+
- â
Use solid colors with transparency: `rgba(0,0,0,0.5)`
|
|
33
|
+
|
|
34
|
+
### NO SHADOWS - EVER
|
|
35
|
+
- â `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius` FORBIDDEN
|
|
36
|
+
- â `elevation` on Android FORBIDDEN
|
|
37
|
+
- â
Use `borderWidth` and `borderColor` for depth
|
|
38
|
+
|
|
17
39
|
## ðĶ Installation
|
|
18
40
|
|
|
19
41
|
```bash
|
|
@@ -23,11 +45,9 @@ npm install @umituz/react-native-design-system
|
|
|
23
45
|
### Peer Dependencies
|
|
24
46
|
|
|
25
47
|
```bash
|
|
26
|
-
npm install react@
|
|
48
|
+
npm install react@19.1.0 react-native@0.81.5 react-native-svg@^15.0.0 react-native-gesture-handler@^2.30.0
|
|
27
49
|
```
|
|
28
50
|
|
|
29
|
-
> **v1.3.0 Breaking Change**: React Native Paper dependency removed! All components now use pure React Native implementation for lighter bundle size and full control over styling.
|
|
30
|
-
|
|
31
51
|
## ð Usage
|
|
32
52
|
|
|
33
53
|
```typescript
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-design-system",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.13",
|
|
4
4
|
"description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -244,38 +244,6 @@ export const App = () => {
|
|
|
244
244
|
};
|
|
245
245
|
```
|
|
246
246
|
|
|
247
|
-
### Animated Splash
|
|
248
|
-
|
|
249
|
-
```tsx
|
|
250
|
-
export const AnimatedSplash = () => {
|
|
251
|
-
const [fadeAnim] = useState(new Animated.Value(0));
|
|
252
|
-
const { isInitialized } = useSplashFlow({ duration: 2000 });
|
|
253
|
-
|
|
254
|
-
useEffect(() => {
|
|
255
|
-
if (isInitialized) {
|
|
256
|
-
Animated.timing(fadeAnim, {
|
|
257
|
-
toValue: 1,
|
|
258
|
-
duration: 500,
|
|
259
|
-
useNativeDriver: true,
|
|
260
|
-
}).start(() => {
|
|
261
|
-
// Hide splash after animation
|
|
262
|
-
setTimeout(() => {
|
|
263
|
-
navigation.replace('Home');
|
|
264
|
-
}, 1000);
|
|
265
|
-
});
|
|
266
|
-
}
|
|
267
|
-
}, [isInitialized]);
|
|
268
|
-
|
|
269
|
-
return (
|
|
270
|
-
<SplashScreen
|
|
271
|
-
appName="My App"
|
|
272
|
-
tagline="Welcome"
|
|
273
|
-
visible={!isInitialized}
|
|
274
|
-
/>
|
|
275
|
-
);
|
|
276
|
-
};
|
|
277
|
-
```
|
|
278
|
-
|
|
279
247
|
### Multi-Stage Loading
|
|
280
248
|
|
|
281
249
|
```tsx
|