react-native-fast-shadow/example/src/App.tsx at 5183883f460b19dbdf2e46d852237b33337b2e34 · alan-eu/react-native-fast-shadow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React, { useEffect } from 'react';

import { Image, View, ScrollView, Text } from 'react-native';
import { ShadowedView, shadowStyle } from 'react-native-fast-shadow';
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  withRepeat,
} from 'react-native-reanimated';

const AnimatedShadowedView = Animated.createAnimatedComponent(ShadowedView);

export default function App() {
  const animatedWidth = useSharedValue(30);
  const animatedHeight = useSharedValue(50);

  useEffect(() => {
    animatedWidth.value = 30;
    animatedWidth.value = withRepeat(
      withTiming(100, {
        duration: 1000,
      }),
      -1,
      true
    );
    animatedHeight.value = 50;
    animatedHeight.value = withRepeat(
      withTiming(100, {
        duration: 1500,
      }),
      -1,
      true
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    width: `${animatedWidth.value}%`,
    height: `${animatedHeight.value}%`,
  }));

  const uiManager = (global as any)?.nativeFabricUIManager ? 'Fabric' : 'Paper';

  return (
    <ScrollView style={{ backgroundColor: 'white' }}>
      <Text style={{fontSize: 18, fontWeight: 'bold'}}>This View is {uiManager}</Text>
      <View style={{ margin: 16 }}>
        <View style={{ flexDirection: 'row', marginBottom: 20 }}>
          <ShadowedView
            style={{
              width: 150,
              height: 200,
              borderRadius: 20,
              borderBottomRightRadius: 50,
              backgroundColor: '#dbfff2',
              borderColor: '#7af0c5',
              marginRight: 20,
              ...shadowStyle({
                opacity: 0.4,
                radius: 12,
                offset: [5, 3],
              }),
            }}
          />
          <ShadowedView
            style={{
              width: 60,
              height: 60,
              borderRadius: 30,
              backgroundColor: '#d6dbff',
              ...shadowStyle({
                color: '#221db2',
                opacity: 0.8,
                radius: 10,
                offset: [0, 3],
              }),
            }}
          />
        </View>

        <View
          style={{
            width: 250,
            height: 200,
            marginBottom: 20,
          }}
        >
          <AnimatedShadowedView
            style={[
              animatedStyle,
              {
                borderRadius: 20,
                borderTopStartRadius: 50,
                backgroundColor: '#ffe8e9',
                ...shadowStyle({
                  opacity: 0.3,
                  radius: 25,
                  offset: [5, 3],
                }),
              },
            ]}
          />
        </View>

        <ShadowedView
          style={{
            alignSelf: 'flex-start',
            ...shadowStyle({
              color: '#221db2',
              opacity: 0.4,
              radius: 25,
              offset: [5, 3],
            }),
            marginBottom: 20,
          }}
        >
          <Image
            style={{ borderRadius: 60 }}
            source={require('./image1.png')}
          />
        </ShadowedView>
      </View>
    </ScrollView>
  );
}