/
Card.tsx
48 lines (45 loc) · 1.4 KB
/
Card.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
import { Image, Text, View } from 'react-native';
import React, { memo, useState } from 'react';
import { styles } from './styles';
import { Reaction } from 'react-native-reactions';
import { CardEmojiList, Strings } from '../../constants';
import { CardProps, EmojiItemProp } from './types';
import _ from 'lodash';
const Footer = ({
index,
selectedEmoji,
setSelectedEmoji,
onShowDismissCard,
}: CardProps) => (
<View style={styles.bottomContainer}>
<Reaction
type="modal"
items={CardEmojiList}
itemIndex={index}
onTap={setSelectedEmoji}
onShowDismissCard={onShowDismissCard}>
<Text>{selectedEmoji ? selectedEmoji?.emoji : Strings?.like}</Text>
</Reaction>
<Text>{Strings?.share}</Text>
</View>
);
const Card = ({ index, onShowDismissCard, item }: CardProps) => {
const [selectedEmoji, setSelectedEmoji] = useState<EmojiItemProp>();
return (
<View style={styles.cardContainer}>
<View style={styles.postImageContainer}>
<Image source={{ uri: item?.image }} style={styles.postImage} />
</View>
<View style={styles.line} />
<Footer
index={index}
selectedEmoji={selectedEmoji}
setSelectedEmoji={setSelectedEmoji}
onShowDismissCard={onShowDismissCard}
/>
</View>
);
};
export default memo(Card, (prevProps, nextProps) =>
_.isEqual(prevProps?.isScrollDisable, nextProps?.isScrollDisable)
);