Skip to content

Commit 15d9c2f

Browse files
codeAbinashcodeAbinash
committed
Remove old animation icon
1 parent 6320dcc commit 15d9c2f

File tree

8 files changed

+59
-33
lines changed

8 files changed

+59
-33
lines changed

‎src/assets/icons/icons.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export { default as Saturn01Icon } from '@icons/saturn-01-stroke-rounded.svg'
2424
export { default as Search01Icon } from '@icons/search-01-stroke-rounded.svg'
2525
export { default as Setting07Icon } from '@icons/setting-07-stroke-rounded.svg'
2626
export { default as Settings01Icon } from '@icons/settings-01-stroke-rounded.svg'
27-
27+
export {default as AppIcon } from '@assets/icons/icon.svg'
2828
export { default as SlowWindsIcon } from '@icons/slow-winds-stroke-rounded.svg'
2929

3030
export { default as TestTube01SolidIcon } from '@icons/test-tube-01-solid-rounded.svg'
@@ -133,4 +133,4 @@ export { default as AndroidSolidIcon } from '@icons/android-solid-rounded.svg'
133133

134134
export { default as MusicNote04SolidIcon } from '@icons/music-note-04-solid-rounded.svg'
135135
export { default as VolumeHighIcon } from '@icons/volume-high-stroke-rounded.svg'
136-
export { default as VolumeLowIcon } from '@icons/volume-low-stroke-rounded.svg'
136+
export { default as VolumeLowIcon } from '@icons/volume-low-stroke-rounded.svg'

‎src/assets/images/images.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const Images = {
2-
app_icon: require('./src/app_icon.png'),
2+
// app_icon: require('./src/app_icon.png'),
33
}
44

55
export default Images

‎src/assets/images/src/app_icon.png‎

-132 KB
Binary file not shown.

‎src/components/Button.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
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

‎src/screens/Animations.tsx‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import Images from '@assets/images/images'
1+
import { AppIcon } from '@assets/icons/icons'
22
import Btn from '@components/Button'
33
import { PaddingBottom, PaddingTop } from '@components/SafePadding'
4+
import { Colors } from '@utils/colors'
5+
import { Medium, SemiBold } from '@utils/fonts'
46
import type { StackNav } from '@utils/types'
57
import React, { useEffect } from 'react'
6-
import { Dimensions, StyleSheet, Text, View } from 'react-native'
8+
import { Dimensions, StyleSheet, View } from 'react-native'
79
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
810
import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withSpring } from 'react-native-reanimated'
911

@@ -34,47 +36,53 @@ export default function Home({ navigation }: { navigation: StackNav }) {
3436
navigation.navigate('Animations')
3537
}}
3638
>
37-
<Animated.Image source={Images.app_icon} style={[styles.icon, animatedStyle]} />
38-
<Text className='mt-4 text-center text-lg text-gray-900 dark:text-gray-100'>Welcome to Animations</Text>
39+
{/* <Animated.Image source={Images.app_icon} style={[styles.icon, animatedStyle]} /> */}
3940

40-
<Text className='mt-2 text-center text-gray-400 dark:text-gray-600'>Tap on the icon to start</Text>
41+
<Animated.View style={[styles.icon, animatedStyle]}>
42+
<AppIcon width={ICON_SIZE} height={ICON_SIZE} />
43+
</Animated.View>
44+
<SemiBold className='mt-4 text-center text-base text-gray-900 dark:text-gray-100'>
45+
Welcome to Animations
46+
</SemiBold>
47+
48+
<Medium className='mt-2 text-center text-xs text-gray-400 dark:text-gray-600'>Tap on the icon to start</Medium>
4149
</TouchableOpacity>
4250
<View className='mt-5 w-full flex-row flex-wrap items-center justify-center px-5' style={{ gap: 10 }}>
4351
<Btn onPress={() => navigation.navigate('Basic')}>
44-
<Text className='text-white'>Basic</Text>
52+
<Medium className='text-xs text-white'>Basic</Medium>
4553
</Btn>
4654
<Btn onPress={() => navigation.navigate('DragAnimation')}>
47-
<Text className='text-white'>Drag Animation</Text>
55+
<Medium className='text-xs text-white'>Drag Animation</Medium>
4856
</Btn>
4957
<Btn onPress={() => navigation.navigate('CustomizingAnimations')}>
50-
<Text className='text-white'>Customizing Animations</Text>
58+
<Medium className='text-xs text-white'>Customizing Animations</Medium>
5159
</Btn>
5260
<Btn onPress={() => navigation.navigate('ApplyingModifiers')}>
53-
<Text className='text-white'>Applying Modifiers</Text>
61+
<Medium className='text-xs text-white'>Applying Modifiers</Medium>
5462
</Btn>
5563
<Btn onPress={() => navigation.navigate('KeyboardAnimation')}>
56-
<Text className='text-white'>Keyboard Animation</Text>
64+
<Medium className='text-xs text-white'>Keyboard Animation</Medium>
5765
</Btn>
5866
<Btn onPress={() => navigation.navigate('HandlingGesture')}>
59-
<Text className='text-white'>Handling Gesture</Text>
67+
<Medium className='text-xs text-white'>Handling Gesture</Medium>
6068
</Btn>
6169
<Btn onPress={() => navigation.navigate('SensorAnimation')}>
62-
<Text className='text-white'>Sensor Animation</Text>
70+
<Medium className='text-xs text-white'>Sensor Animation</Medium>
6371
</Btn>
6472
<Btn onPress={() => navigation.navigate('StableBox')}>
65-
<Text className='text-white'>Stable Box</Text>
73+
<Medium className='text-xs text-white'>Stable Box</Medium>
6674
</Btn>
6775
<Btn onPress={() => navigation.navigate('StableWallpaper')}>
68-
<Text className='text-white'>Stable Wallpaper Acc</Text>
76+
<Medium className='text-xs text-white'>Stable Wallpaper Acc</Medium>
6977
</Btn>
7078
<Btn onPress={() => navigation.navigate('CompassAnimation')}>
71-
<Text className='text-white'>Compass Animation</Text>
79+
<Medium className='text-xs text-white'>Compass Animation</Medium>
7280
</Btn>
7381
<Btn onPress={() => navigation.navigate('LevelAnimation')}>
74-
<Text className='text-white'>Level Animation</Text>
82+
<Medium className='text-xs text-white'>Level Animation</Medium>
7583
</Btn>
7684
<Btn onPress={() => navigation.navigate('ParallaxWallpaper')}>
77-
<Text className='text-white'>Parallax Wallpaper</Text>
85+
<Medium className='text-xs text-white'>Parallax Wallpaper</Medium>
7886
</Btn>
7987
</View>
8088
<PaddingBottom />
@@ -88,5 +96,7 @@ const styles = StyleSheet.create({
8896
height: ICON_SIZE,
8997
resizeMode: 'contain',
9098
marginTop: 100,
99+
backgroundColor: Colors.appIconBg,
100+
borderRadius: 30,
91101
},
92102
})

‎src/screens/Update/Components/UpdateAvailableUI.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import AppIcon from '@assets/icons/icon.svg'
22
import { Medium, Regular, SemiBold } from '@utils/fonts'
3-
import React from 'react'
3+
import React, { useEffect } from 'react'
44
import { View } from 'react-native'
5+
import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated'
56

67
export default function UpdateAvailableUI({
78
version,
@@ -12,9 +13,24 @@ export default function UpdateAvailableUI({
1213
size: string
1314
whatsNew: Array<string>
1415
}) {
16+
const rotate = useSharedValue(0)
17+
18+
useEffect(() => {
19+
rotate.value = withRepeat(withTiming(360, { duration: 7000, easing: Easing.linear }), -1)
20+
}, [rotate])
21+
22+
const animatedImageStyle = useAnimatedStyle(() => {
23+
return {
24+
transform: [{ rotate: `${rotate.value}deg` }],
25+
}
26+
}, [])
1527
return (
1628
<View className='flex-1 rounded-3xl bg-appIconBg p-8 pb-12'>
17-
<AppIcon width={80} height={80} className='mt-8' />
29+
<View className='flex-row'>
30+
<Animated.View style={[animatedImageStyle]} className='mt-8'>
31+
<AppIcon width={80} height={80} />
32+
</Animated.View>
33+
</View>
1834
<SemiBold style={{ fontSize: 24 }} className='mt-5 text-white'>
1935
Update Available
2036
</SemiBold>

‎src/screens/Update/Update.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import { PaddingBottom } from '@components/SafePadding'
33
import StackHeader from '@components/StackHeader'
44
import type { RouteProp } from '@react-navigation/native'
55
import type { StackNav } from '@utils/types'
6-
import React from 'react'
6+
import React, { useEffect } from 'react'
77
import { StatusBar, View } from 'react-native'
88
import { ScrollView } from 'react-native-gesture-handler'
99
import UpdateAvailableUI from './Components/UpdateAvailableUI'
10+
import { useAnimatedStyle, useSharedValue, withRepeat, withSpring } from 'react-native-reanimated'
1011

1112
type ParamList = {
1213
Update: UpdateParamList

‎src/screens/animations/DragAnimation.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import Images from '@assets/images/images'
1+
import { AppIcon } from '@assets/icons/icons'
2+
import { Colors } from '@utils/colors'
23
import React, { useEffect } from 'react'
34
import { StyleSheet, View } from 'react-native'
45
import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'
@@ -67,7 +68,9 @@ export default function DragAnimation() {
6768
<View className='border border-gray-100 dark:border-gray-900' style={{ borderRadius: 23 }}>
6869
<PanGestureHandler onGestureEvent={GestureHandler}>
6970
<Animated.View style={[styles.square, animationStyle]} className='bg-gray-100 dark:bg-gray-900'>
70-
<Animated.Image source={Images.app_icon} style={[styles.image, animatedImageStyle]} />
71+
<Animated.View style={animatedImageStyle}>
72+
<AppIcon width={80} height={80} />
73+
</Animated.View>
7174
</Animated.View>
7275
</PanGestureHandler>
7376
</View>
@@ -92,10 +95,6 @@ const styles = StyleSheet.create({
9295
alignItems: 'center',
9396
shadowColor: '#555555',
9497
elevation: 3,
95-
},
96-
image: {
97-
width: 65,
98-
height: 65,
99-
resizeMode: 'contain',
98+
backgroundColor: Colors.appIconBg,
10099
},
101100
})

0 commit comments

Comments
 (0)