Skip to content

Commit 6320dcc

Browse files
codeAbinashcodeAbinash
committed
Add range sliders
1 parent b9b106c commit 6320dcc

File tree

16 files changed

+364
-161
lines changed

16 files changed

+364
-161
lines changed

‎App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { devOptStore } from '@/zustand/devOptStore'
2-
import { CodeIcon } from '@assets/icons/icons'
2+
import { CodeSolidIcon } from '@assets/icons/icons'
33
import { AutoStatusBar } from '@components/StatusBar'
44
import { NavigationContainer, useNavigation } from '@react-navigation/native'
55
import { CardStyleInterpolators, createStackNavigator, type StackNavigationOptions } from '@react-navigation/stack'
@@ -217,7 +217,7 @@ function Navigation() {
217217
<Stack.Screen name='RandomPassword' component={RandomPassword} options={GestureEnabled} />
218218
<Stack.Screen name='GlobalSearch' component={GlobalSearch} options={IOS_BOTTOM_STYLE} />
219219
<Stack.Screen name='Update' component={Update} options={IOS_BOTTOM_STYLE} />
220-
<Stack.Screen name='ForceUpdate' component={ForceUpdate} />
220+
<Stack.Screen name='ForceUpdate' component={ForceUpdate} options={GestureEnabled} />
221221
</Stack.Navigator>
222222
</>
223223
)
@@ -240,7 +240,7 @@ const FabButton = () => {
240240
className='absolute bottom-7 right-5 z-10 h-14 w-14 items-center justify-center rounded-full bg-accent'
241241
onPress={() => navigation.navigate('DeveloperOptions')}
242242
>
243-
<CodeIcon className='text-white' height={25} width={25} />
243+
<CodeSolidIcon className='text-white' height={25} width={25} />
244244
</TouchableOpacity>
245245
)
246246
}

‎src/assets/icons/icons.ts‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -35,98 +35,102 @@ export { default as TimeHalfPassIcon } from '@icons/time-half-pass-stroke-rounde
3535

3636
export { default as Wallet02SolidIcon } from '@icons/wallet-02-solid-rounded.svg'
3737

38-
export { default as Sun03SolidIcon } from '@icons/sun-03-solid-rounded.svg'
3938
export { default as Moon02SolidIcon } from '@icons/moon-02-solid-rounded.svg'
39+
export { default as Sun03SolidIcon } from '@icons/sun-03-solid-rounded.svg'
4040
export { default as SunCloud02SolidIcon } from '@icons/sun-cloud-02-solid-rounded.svg'
4141

42-
export { default as MoonCloudSolidIcon } from '@icons/moon-cloud-solid-rounded.svg'
43-
export { default as CloudFastWindSolidIcon } from '@icons/cloud-fast-wind-solid-rounded.svg'
4442
export { default as CloudAngledRainSolidIcon } from '@icons/cloud-angled-rain-solid-rounded.svg'
45-
export { default as SunCloudAngledRain02SolidIcon } from '@icons/sun-cloud-angled-rain-02-solid-rounded.svg'
46-
export { default as MoonCloudAngledRainSolidIcon } from '@icons/moon-cloud-angled-rain-solid-rounded.svg'
4743
export { default as CloudAngledRainZapSolidIcon } from '@icons/cloud-angled-rain-zap-solid-rounded.svg'
44+
export { default as CloudFastWindSolidIcon } from '@icons/cloud-fast-wind-solid-rounded.svg'
45+
export { default as MoonCloudAngledRainSolidIcon } from '@icons/moon-cloud-angled-rain-solid-rounded.svg'
46+
export { default as MoonCloudSolidIcon } from '@icons/moon-cloud-solid-rounded.svg'
4847
export { default as SnowSolidIcon } from '@icons/snow-solid-rounded.svg'
4948
export { default as SoundcloudSolidIcon } from '@icons/soundcloud-solid-rounded.svg'
49+
export { default as SunCloudAngledRain02SolidIcon } from '@icons/sun-cloud-angled-rain-02-solid-rounded.svg'
5050

5151
export { default as FileManagementIcon } from '@icons/file-management-stroke-rounded.svg'
5252

5353
export { default as Mail01Icon } from '@icons/mail-01-stroke-rounded.svg'
5454

55-
export { default as ViewIcon } from '@icons/view-stroke-rounded.svg'
5655
export { default as ViewOffSlashIcon } from '@icons/view-off-slash-stroke-rounded.svg'
56+
export { default as ViewIcon } from '@icons/view-stroke-rounded.svg'
5757

58-
export { default as UserSolidIcon } from '@icons/user-solid-rounded.svg'
5958
export { default as ComputerSolidIcon } from '@icons/computer-solid-rounded.svg'
59+
export { default as UserSolidIcon } from '@icons/user-solid-rounded.svg'
6060

61-
export { default as SunCloudAngledRainZap01SolidIcon } from '@icons/sun-cloud-angled-rain-zap-01-solid-rounded.svg'
6261
export { default as Calendar03SolidIcon } from '@icons/calendar-03-solid-rounded.svg'
63-
export { default as SquareLock02SolidIcon } from '@icons/square-lock-02-solid-rounded.svg'
6462
export { default as CodeSolidIcon } from '@icons/code-solid-rounded.svg'
63+
export { default as SquareLock02SolidIcon } from '@icons/square-lock-02-solid-rounded.svg'
64+
export { default as SunCloudAngledRainZap01SolidIcon } from '@icons/sun-cloud-angled-rain-zap-01-solid-rounded.svg'
6565

66-
export { default as FolderFileStorageSolidIcon } from '@icons/folder-file-storage-solid-rounded.svg'
67-
export { default as Database02SolidIcon } from '@icons/database-02-solid-rounded.svg'
66+
export { default as BrushSolidIcon } from '@icons/brush-solid-rounded.svg'
67+
export { default as BubbleChatSolidIcon } from '@icons/bubble-chat-solid-rounded.svg'
6868
export { default as CleanSolidIcon } from '@icons/clean-solid-rounded.svg'
69+
export { default as Database02SolidIcon } from '@icons/database-02-solid-rounded.svg'
6970
export { default as EditTableSolidIcon } from '@icons/edit-table-solid-rounded.svg'
70-
export { default as BubbleChatSolidIcon } from '@icons/bubble-chat-solid-rounded.svg'
71-
export { default as ShieldUserSolidIcon } from '@icons/shield-user-solid-rounded.svg'
72-
export { default as TelegramSolidIcon } from '@icons/telegram-solid-rounded.svg'
71+
export { default as FolderFileStorageSolidIcon } from '@icons/folder-file-storage-solid-rounded.svg'
7372
export { default as InformationCircleSolidIcon } from '@icons/information-circle-solid-rounded.svg'
7473
export { default as PolicySolidIcon } from '@icons/policy-solid-rounded.svg'
75-
export { default as BrushSolidIcon } from '@icons/brush-solid-rounded.svg'
74+
export { default as ShieldUserSolidIcon } from '@icons/shield-user-solid-rounded.svg'
75+
export { default as TelegramSolidIcon } from '@icons/telegram-solid-rounded.svg'
7676

77-
export { default as SunCloudAngledRainZap01Icon } from '@icons/sun-cloud-angled-rain-zap-01-stroke-rounded.svg'
78-
export { default as Wallet02Icon } from '@icons/wallet-02-stroke-rounded.svg'
79-
export { default as DashboardSquare02SolidIcon } from '@icons/dashboard-square-02-solid-rounded.svg'
80-
export { default as City03SolidIcon } from '@icons/city-03-solid-rounded.svg'
81-
export { default as MapsLocation02SolidIcon } from '@icons/maps-location-02-solid-rounded.svg'
82-
export { default as PencilEdit02SolidIcon } from '@icons/pencil-edit-02-solid-rounded.svg'
83-
export { default as Delete02SolidIcon } from '@icons/delete-02-solid-rounded.svg'
84-
export { default as TemperatureSolidIcon } from '@icons/temperature-solid-rounded.svg'
85-
export { default as RulerSolidIcon } from '@icons/ruler-solid-rounded.svg'
86-
export { default as FastWindSolidIcon } from '@icons/fast-wind-solid-rounded.svg'
87-
export { default as SortingDownSolidIcon } from '@icons/sorting-down-solid-rounded.svg'
88-
export { default as Key01SolidIcon } from '@icons/key-01-solid-rounded.svg'
89-
export { default as DatabaseRestoreSolidIcon } from '@icons/database-restore-solid-rounded.svg'
90-
export { default as WeightScale01SolidIcon } from '@icons/weight-scale-01-solid-rounded.svg'
91-
export { default as BirthdayCakeSolidIcon } from '@icons/birthday-cake-solid-rounded.svg'
77+
export { default as ArtificialIntelligence04SolidIcon } from '@icons/artificial-intelligence-04-solid-rounded.svg'
9278
export { default as BabyBoyDressSolidIcon } from '@icons/baby-boy-dress-solid-rounded.svg'
9379
export { default as BabyGirlDressSolidIcon } from '@icons/baby-girl-dress-solid-rounded.svg'
94-
export { default as TextFontSolidIcon } from '@icons/text-font-solid-rounded.svg'
95-
export { default as TextSolidIcon } from '@icons/text-solid-rounded.svg'
96-
export { default as TextNumberSignSolidIcon } from '@icons/text-number-sign-solid-rounded.svg'
80+
export { default as BirthdayCakeSolidIcon } from '@icons/birthday-cake-solid-rounded.svg'
81+
export { default as CSolidIcon } from '@icons/c-solid-rounded.svg'
9782
export { default as CelsiusSolidIcon } from '@icons/celsius-solid-rounded.svg'
83+
export { default as City03SolidIcon } from '@icons/city-03-solid-rounded.svg'
84+
export { default as Clock01SolidIcon } from '@icons/clock-01-solid-rounded.svg'
85+
export { default as CloudSlowWindSolidIcon } from '@icons/cloud-slow-wind-solid-rounded.svg'
86+
export { default as ColorsSolidIcon } from '@icons/colors-solid-rounded.svg'
87+
export { default as DashboardSpeed01SolidIcon } from '@icons/dashboard-speed-01-solid-rounded.svg'
88+
export { default as DashboardSquare02SolidIcon } from '@icons/dashboard-square-02-solid-rounded.svg'
89+
export { default as DatabaseRestoreSolidIcon } from '@icons/database-restore-solid-rounded.svg'
90+
export { default as Delete02SolidIcon } from '@icons/delete-02-solid-rounded.svg'
9891
export { default as FahrenheitSolidIcon } from '@icons/fahrenheit-solid-rounded.svg'
92+
export { default as FastWindSolidIcon } from '@icons/fast-wind-solid-rounded.svg'
93+
export { default as HumiditySolidIcon } from '@icons/humidity-solid-rounded.svg'
94+
export { default as Image02SolidIcon } from '@icons/image-02-solid-rounded.svg'
95+
export { default as JavaScriptSolidIcon } from '@icons/java-script-solid-rounded.svg'
96+
export { default as JavaSolidIcon } from '@icons/java-solid-rounded.svg'
97+
export { default as Key01SolidIcon } from '@icons/key-01-solid-rounded.svg'
98+
export { default as KeyboardSolidIcon } from '@icons/keyboard-solid-rounded.svg'
99+
export { default as ListSettingIcon } from '@icons/list-setting-stroke-rounded.svg'
100+
export { default as LockPasswordSolidIcon } from '@icons/lock-password-solid-rounded.svg'
101+
export { default as MapsLocation02SolidIcon } from '@icons/maps-location-02-solid-rounded.svg'
102+
export { default as MathSolidIcon } from '@icons/math-solid-rounded.svg'
103+
export { default as NeuralNetworkSolidIcon } from '@icons/neural-network-solid-rounded.svg'
104+
export { default as PaintBoardSolidIcon } from '@icons/paint-board-solid-rounded.svg'
105+
export { default as PencilEdit02SolidIcon } from '@icons/pencil-edit-02-solid-rounded.svg'
106+
export { default as PencilEdit02Icon } from '@icons/pencil-edit-02-stroke-rounded.svg'
99107
export { default as Road02SolidIcon } from '@icons/road-02-solid-rounded.svg'
108+
export { default as RulerSolidIcon } from '@icons/ruler-solid-rounded.svg'
109+
export { default as Setting07SolidIcon } from '@icons/setting-07-solid-rounded.svg'
110+
export { default as SidebarRightSolidIcon } from '@icons/sidebar-right-solid-rounded.svg'
100111
export { default as SlowWindsSolidIcon } from '@icons/slow-winds-solid-rounded.svg'
112+
export { default as SoftwareLicenseSolidIcon } from '@icons/software-license-solid-rounded.svg'
113+
export { default as SortingDownSolidIcon } from '@icons/sorting-down-solid-rounded.svg'
114+
export { default as SunCloudAngledRainZap01Icon } from '@icons/sun-cloud-angled-rain-zap-01-stroke-rounded.svg'
101115
export { default as SunCloudFastWind01SolidIcon } from '@icons/sun-cloud-fast-wind-01-solid-rounded.svg'
102-
export { default as CloudSlowWindSolidIcon } from '@icons/cloud-slow-wind-solid-rounded.svg'
103-
export { default as WindPowerSolidIcon } from '@icons/wind-power-solid-rounded.svg'
104-
export { default as PencilEdit02Icon } from '@icons/pencil-edit-02-stroke-rounded.svg'
105-
export { default as LockPasswordSolidIcon } from '@icons/lock-password-solid-rounded.svg'
116+
export { default as TemperatureSolidIcon } from '@icons/temperature-solid-rounded.svg'
117+
export { default as TextFontSolidIcon } from '@icons/text-font-solid-rounded.svg'
118+
export { default as TextNumberSignSolidIcon } from '@icons/text-number-sign-solid-rounded.svg'
119+
export { default as TextSolidIcon } from '@icons/text-solid-rounded.svg'
106120
export { default as Timer02SolidIcon } from '@icons/timer-02-solid-rounded.svg'
107-
export { default as SidebarRightSolidIcon } from '@icons/sidebar-right-solid-rounded.svg'
108-
export { default as KeyboardSolidIcon } from '@icons/keyboard-solid-rounded.svg'
109-
export { default as Setting07SolidIcon } from '@icons/setting-07-solid-rounded.svg'
110-
export { default as JavaScriptSolidIcon } from '@icons/java-script-solid-rounded.svg'
111121
export { default as Typescript01SolidIcon } from '@icons/typescript-01-solid-rounded.svg'
112-
export { default as CSolidIcon } from '@icons/c-solid-rounded.svg'
113-
export { default as JavaSolidIcon } from '@icons/java-solid-rounded.svg'
114-
export { default as PaintBoardSolidIcon } from '@icons/paint-board-solid-rounded.svg'
115-
export { default as ColorsSolidIcon } from '@icons/colors-solid-rounded.svg'
116-
export { default as DashboardSpeed01SolidIcon } from '@icons/dashboard-speed-01-solid-rounded.svg'
117-
export { default as SoftwareLicenseSolidIcon } from '@icons/software-license-solid-rounded.svg'
118-
export { default as NeuralNetworkSolidIcon } from '@icons/neural-network-solid-rounded.svg'
119-
export { default as ArtificialIntelligence04SolidIcon } from '@icons/artificial-intelligence-04-solid-rounded.svg'
120-
export { default as Image02SolidIcon } from '@icons/image-02-solid-rounded.svg'
121-
export { default as MathSolidIcon } from '@icons/math-solid-rounded.svg'
122-
export { default as Clock01SolidIcon } from '@icons/clock-01-solid-rounded.svg'
123-
export { default as ListSettingIcon } from '@icons/list-setting-stroke-rounded.svg'
124-
export { default as HumiditySolidIcon } from '@icons/humidity-solid-rounded.svg'
122+
export { default as Wallet02Icon } from '@icons/wallet-02-stroke-rounded.svg'
123+
export { default as WeightScale01SolidIcon } from '@icons/weight-scale-01-solid-rounded.svg'
124+
export { default as WindPowerSolidIcon } from '@icons/wind-power-solid-rounded.svg'
125125

126126
export { default as EyeSolidIcon } from '@icons/eye-solid-rounded.svg'
127127
export { default as NaturalFoodSolidIcon } from '@icons/natural-food-solid-rounded.svg'
128128

129-
130129
export { default as GithubSolidIcon } from '@icons/github-solid-rounded.svg'
131130

132131
export { default as AndroidSolidIcon } from '@icons/android-solid-rounded.svg'
132+
133+
134+
export { default as MusicNote04SolidIcon } from '@icons/music-note-04-solid-rounded.svg'
135+
export { default as VolumeHighIcon } from '@icons/volume-high-stroke-rounded.svg'
136+
export { default as VolumeLowIcon } from '@icons/volume-low-stroke-rounded.svg'

‎src/assets/icons/src/music-note-04-solid-rounded.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/icons/src/volume-high-stroke-rounded.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/icons/src/volume-low-stroke-rounded.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/AnimationCard.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Extrapolate } from '@shopify/react-native-skia'
2+
import React from 'react'
3+
import { Gesture, GestureDetector } from 'react-native-gesture-handler'
4+
import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
5+
6+
export default function AnimationCard({
7+
W,
8+
H = W / 2,
9+
ISize,
10+
children = null,
11+
}: {
12+
W: number
13+
H?: number
14+
ISize: number
15+
children: React.ReactNode
16+
}) {
17+
const rotateX = useSharedValue(0)
18+
const rotateY = useSharedValue(0)
19+
const gesture = Gesture.Pan()
20+
.onBegin(({ x, y }: { x: number; y: number }) => {
21+
'worklet'
22+
rotateY.value = withTiming(interpolate(x, [0, W], [-ISize, ISize], Extrapolate.CLAMP))
23+
rotateX.value = withTiming(interpolate(y, [0, H], [ISize, -ISize], Extrapolate.CLAMP))
24+
})
25+
.onUpdate(({ x, y }: { x: number; y: number }) => {
26+
'worklet'
27+
rotateY.value = interpolate(x, [0, W], [-ISize, ISize], Extrapolate.CLAMP)
28+
rotateX.value = interpolate(y, [0, H], [ISize, -ISize], Extrapolate.CLAMP)
29+
})
30+
.onFinalize(() => {
31+
'worklet'
32+
rotateY.value = withTiming(0)
33+
rotateX.value = withTiming(0)
34+
})
35+
36+
const rStyle = useAnimatedStyle(() => {
37+
return {
38+
transform: [
39+
{
40+
rotateY: `${rotateY.value}deg`,
41+
},
42+
{
43+
rotateX: `${rotateX.value}deg`,
44+
},
45+
],
46+
}
47+
}, [])
48+
return (
49+
<GestureDetector gesture={gesture}>
50+
<Animated.View
51+
style={[
52+
{
53+
zIndex: 100,
54+
transform: [
55+
{
56+
perspective: 100,
57+
},
58+
],
59+
},
60+
rStyle,
61+
]}
62+
>
63+
{children}
64+
</Animated.View>
65+
</GestureDetector>
66+
)
67+
}

‎src/components/Button.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Medium } from '@utils/fonts'
2-
import React from 'react'
3-
import { TouchableOpacity, type TouchableOpacityProps } from 'react-native-gesture-handler'
1+
import { Medium } from '@utils/fonts';
2+
import React from 'react';
3+
import { TouchableOpacity, type TouchableOpacityProps } from 'react-native-gesture-handler';
44

55
type ButtonProps = TouchableOpacityProps & { title?: string; Content?: React.ReactNode }
66

7-
export default function Btn({ title, onPress, disabled, children, style, ...rest }: ButtonProps) {
7+
const Btn = React.memo(({ title, onPress, disabled, children, style, ...rest }: ButtonProps) => {
88
return (
99
<TouchableOpacity
1010
activeOpacity={0.8}
@@ -19,9 +19,11 @@ export default function Btn({ title, onPress, disabled, children, style, ...rest
1919
</Medium>
2020
</TouchableOpacity>
2121
)
22-
}
22+
})
2323

24-
export function BtnTransparent({ title, onPress, children, style }: ButtonProps) {
24+
export default Btn
25+
26+
export const BtnTransparent = React.memo(({ title, onPress, children, style }: ButtonProps) => {
2527
return (
2628
<TouchableOpacity
2729
activeOpacity={0.7}
@@ -34,4 +36,4 @@ export function BtnTransparent({ title, onPress, children, style }: ButtonProps)
3436
</Medium>
3537
</TouchableOpacity>
3638
)
37-
}
39+
})

0 commit comments

Comments
 (0)