Skip to content

Commit 03a6739

Browse files
committed
fix(example-app): 🐛 fix warnings refactor code add icons
1 parent 1e39fb8 commit 03a6739

File tree

10 files changed

+233
-137
lines changed

10 files changed

+233
-137
lines changed

example/ios/Podfile.lock

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ PODS:
1111
- ExpoModulesCore
1212
- Expo (47.0.8):
1313
- ExpoModulesCore
14+
- ExpoHaptics (12.0.1):
15+
- ExpoModulesCore
1416
- ExpoKeepAwake (11.0.1):
1517
- ExpoModulesCore
1618
- ExpoModulesCore (1.0.3):
@@ -378,6 +380,7 @@ DEPENDENCIES:
378380
- EXFileSystem (from `../node_modules/expo-file-system/ios`)
379381
- EXFont (from `../node_modules/expo-font/ios`)
380382
- Expo (from `../node_modules/expo`)
383+
- ExpoHaptics (from `../node_modules/expo-haptics/ios`)
381384
- ExpoKeepAwake (from `../node_modules/expo-keep-awake/ios`)
382385
- ExpoModulesCore (from `../node_modules/expo-modules-core`)
383386
- EXScreenOrientation (from `../node_modules/expo-screen-orientation/ios`)
@@ -443,6 +446,8 @@ EXTERNAL SOURCES:
443446
:path: "../node_modules/expo-font/ios"
444447
Expo:
445448
:path: "../node_modules/expo"
449+
ExpoHaptics:
450+
:path: "../node_modules/expo-haptics/ios"
446451
ExpoKeepAwake:
447452
:path: "../node_modules/expo-keep-awake/ios"
448453
ExpoModulesCore:
@@ -536,17 +541,18 @@ SPEC CHECKSUMS:
536541
EXFileSystem: 60602b6eefa6873f97172c684b7537c9760b50d6
537542
EXFont: 319606bfe48c33b5b5063fb0994afdc496befe80
538543
Expo: 36b5f625d36728adbdd1934d4d57182f319ab832
544+
ExpoHaptics: 5a56d30a87ea213dd00b09566dc4b441a4dff97f
539545
ExpoKeepAwake: 69b59d0a8d2b24de9f82759c39b3821fec030318
540546
ExpoModulesCore: b5d21c8880afda6fb6ee95469f9ac2ec9b98e995
541547
EXScreenOrientation: 07e5aeff07bce09a2b214981e612d87fd7719997
542548
EXSplashScreen: 3e989924f61a8dd07ee4ea584c6ba14be9b51949
543549
FBLazyVector: affa4ba1bfdaac110a789192f4d452b053a86624
544550
FBReactNativeSpec: fe8b5f1429cfe83a8d72dc8ed61dc7704cac8745
545551
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
546-
glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
547-
hermes-engine: 7fe5fc6ef707b7fdcb161b63898ec500e285653d
552+
glog: 791fe035093b84822da7f0870421a25839ca7870
553+
hermes-engine: 31d2d06aa6915f586c02ecadbe232e3fc8185878
548554
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
549-
RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
555+
RCT-Folly: 766adb69dc1d6294bcc94a950a818a87adb3a766
550556
RCTRequired: 21229f84411088e5d8538f21212de49e46cc83e2
551557
RCTTypeSafety: 62eed57a32924b09edaaf170a548d1fc96223086
552558
React: f0254ccddeeef1defe66c6b1bb9133a4f040792b

example/src/AppRoot.tsx

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11
import React, { ReactNode } from "react";
2+
import {
3+
Box,
4+
Button,
5+
Divider,
6+
Icon,
7+
Text,
8+
Timeless,
9+
useTheme,
10+
} from "@adaptui/react-native-tailwind";
211
import {
312
createDrawerNavigator,
413
DrawerContentComponentProps,
@@ -7,11 +16,6 @@ import {
716
} from "@react-navigation/drawer";
817
import { createStackNavigator } from "@react-navigation/stack";
918

10-
import { Button, Divider, Icon } from "../../src/components";
11-
import { FastBackward } from "../../src/icons";
12-
import { Box, Text } from "../../src/primitives";
13-
import { useTheme } from "../../src/theme";
14-
1519
import AboutScreen from "./pages/AboutScreen";
1620
import {
1721
AvatarGroupScreen,
@@ -98,25 +102,29 @@ const CustomDrawerSection = (props: DrawerContentComponentProps) => {
98102
);
99103
};
100104

101-
const DrawerNavigator = ({ navigation }) => {
105+
const ScreenOptions = ({ navigation }) => {
102106
const tailwind = useTheme();
107+
return {
108+
headerRight: () => (
109+
<Box style={tailwind.style("mr-2")}>
110+
<Button
111+
variant="ghost"
112+
size="md"
113+
onPress={() => navigation.navigate("About")}
114+
>
115+
<Icon size={25} icon={<Timeless />} />
116+
</Button>
117+
</Box>
118+
),
119+
};
120+
};
121+
122+
const DrawerNavigator = () => {
103123
return (
104124
<Drawer.Navigator
105125
drawerContent={CustomDrawerSection}
106126
initialRouteName="AvatarScreen"
107-
screenOptions={{
108-
headerRight: () => (
109-
<Box style={tailwind.style("mr-2")}>
110-
<Button
111-
variant="ghost"
112-
size="md"
113-
onPress={() => navigation.navigate("About")}
114-
>
115-
<Icon size={18} icon={<FastBackward />} />
116-
</Button>
117-
</Box>
118-
),
119-
}}
127+
screenOptions={ScreenOptions}
120128
>
121129
<Drawer.Screen
122130
// @ts-ignore
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { useMemo } from "react";
2+
import { Path, Pattern, Rect, Svg } from "react-native-svg";
3+
import { useTheme } from "@adaptui/react-native-tailwind";
4+
5+
const Background = props => {
6+
const tailwind = useTheme();
7+
const { color, stroke, gap, transform } = props;
8+
const { x, y, k } = transform || { x: 0, y: 0, k: 1 };
9+
const scaledGap = (gap || 15) * k;
10+
const patternId = useMemo(
11+
() => `patten-${Math.floor(Math.random() * 100000)}`,
12+
[],
13+
);
14+
15+
return (
16+
<Svg
17+
style={tailwind.style("w-full h-full absolute")}
18+
width={"100%"}
19+
height={"100%"}
20+
>
21+
<Pattern
22+
id={patternId}
23+
x={x % scaledGap}
24+
y={y % scaledGap}
25+
width={scaledGap}
26+
height={scaledGap}
27+
patternUnits={"userSpaceOnUse"}
28+
>
29+
<Path
30+
stroke={color || "#dddddd"}
31+
strokeWidth={stroke || 1}
32+
d={`M${scaledGap / 2} 0 V${scaledGap} M0 ${
33+
scaledGap / 2
34+
} H${scaledGap}`}
35+
/>
36+
</Pattern>
37+
<Rect
38+
x={0}
39+
y={0}
40+
width={"100%"}
41+
height={"100%"}
42+
fill={`url(#${patternId})`}
43+
/>
44+
</Svg>
45+
);
46+
};
47+
48+
export default Background;
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React, { useRef } from "react";
2+
import { Animated, Easing, Image } from "react-native";
3+
import { useTheme } from "@adaptui/react-native-tailwind";
4+
5+
function useMountEffect(effect: React.EffectCallback): void {
6+
React.useEffect(() => {
7+
effect();
8+
}, [effect]);
9+
}
10+
const EasingLogo = () => {
11+
const tailwind = useTheme();
12+
const easeValue = useRef(new Animated.Value(0));
13+
14+
useMountEffect(() => {
15+
Animated.loop(
16+
Animated.sequence([
17+
Animated.timing(easeValue.current, {
18+
toValue: 10,
19+
duration: 1000,
20+
easing: Easing.bezier(0.56, 0.15, 0.45, 0.87),
21+
useNativeDriver: true,
22+
}),
23+
Animated.timing(easeValue.current, {
24+
toValue: 0,
25+
duration: 1000,
26+
easing: Easing.bezier(0.56, 0.15, 0.45, 0.87),
27+
useNativeDriver: true,
28+
}),
29+
]),
30+
).start();
31+
});
32+
33+
const ease = easeValue.current.interpolate({
34+
inputRange: [0, 10],
35+
outputRange: [0, 5],
36+
});
37+
38+
return (
39+
<Animated.View
40+
style={{
41+
transform: [{ translateY: ease }],
42+
}}
43+
>
44+
<Image
45+
source={require("../../assets/logo.png")}
46+
style={tailwind.style("h-50 w-50")}
47+
/>
48+
</Animated.View>
49+
);
50+
};
51+
52+
export default EasingLogo;

example/src/components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
export * from "./Background";
2+
export * from "./EasingLogo";
13
export * from "./Group";

0 commit comments

Comments
 (0)