-
Notifications
You must be signed in to change notification settings - Fork 0
/
LiveDetectTip.tsx
83 lines (79 loc) · 1.98 KB
/
LiveDetectTip.tsx
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
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
const LiveDetectTip: React.FC<{
tipMessage: string;
actions: number[];
currentStep: number;
}> = ({tipMessage, actions, currentStep}) => {
const gifImages = [
{index: 0, source: require('./images/front.png')},
{index: 1, source: require('./images/turn-right.gif')},
{index: 2, source: require('./images/turn-left.gif')},
{index: 3, source: require('./images/open-mouth.gif')},
{index: 4, source: require('./images/open-eyes.gif')},
];
return (
<View style={styles.container}>
<Text style={styles.tipText}>{tipMessage}</Text>
<Image
source={gifImages.find((ele) => ele.index === currentStep)!.source}
style={styles.image}
/>
<View style={styles.dotContainer}>
{actions.map((item, index) => (
<View
key={index}
style={[
styles.dot,
currentStep === item
? {
width: 20,
height: 20,
borderRadius: 10,
}
: {},
]}>
{currentStep === item && (
<Text style={styles.dotText}>{index + 1}</Text>
)}
</View>
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 20,
},
tipText: {
fontSize: 18,
color: '#000000',
fontWeight: '400',
},
image: {
width: 140,
height: 140,
},
dotContainer: {
flexDirection: 'row',
width: 120,
justifyContent: 'space-between',
alignItems: 'center',
},
dot: {
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'blue',
justifyContent: 'center',
alignItems: 'center',
},
dotText: {
color: '#ffffff',
},
});
export default React.memo(LiveDetectTip);