Skip to content

Commit fe9c47f

Browse files
committed
chore: making reusable animated chat components
1 parent 25af297 commit fe9c47f

File tree

5 files changed

+17
-14
lines changed

5 files changed

+17
-14
lines changed

example/src/screens/Examples/ReanimatedChat/constants.ts renamed to example/src/components/Message/data.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ export const history: MessageProps[] = [
1010
{ text: 'Try to check it. I hope it helps you...', sender: true },
1111
{ text: 'It really pushes you to think twice on how to design it first' },
1212
{
13-
text:
14-
'Looks promising!😎 I was always looking for a solution that would allow us to run animations on native thread and provide at least stable 60 FPS',
13+
text: 'Looks promising!😎 I was always looking for a solution that would allow us to run animations on native thread and provide at least stable 60 FPS',
1514
},
1615
{ text: 'You have to check it!!!', sender: true },
1716
{ text: "Ha-ha! I'm definitely going to check it!" },

example/src/screens/Examples/ReanimatedChat/components/Message/index.tsx renamed to example/src/components/Message/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react';
22
import { Text, View } from 'react-native';
3-
import type { MessageProps } from '../../types';
43
import styles from './styles';
54

5+
import type { MessageProps } from './types';
6+
67
export default function Message({ text, sender }: MessageProps) {
78
return (
89
<View style={sender ? styles.senderContainer : styles.recipientContainer}>
9-
<Text>{text}</Text>
10+
<Text style={styles.message}>{text}</Text>
1011
</View>
1112
);
1213
}

example/src/screens/Examples/ReanimatedChat/components/Message/styles.ts renamed to example/src/components/Message/styles.ts

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
import { StyleSheet } from 'react-native';
22

3+
const container = {
4+
borderRadius: 10,
5+
padding: 10,
6+
margin: 10,
7+
marginVertical: 5,
8+
};
39
export default StyleSheet.create({
410
senderContainer: {
511
alignSelf: 'flex-end',
612
backgroundColor: '#e0e0e0',
7-
borderRadius: 10,
8-
padding: 10,
9-
margin: 10,
10-
marginVertical: 5,
13+
...container,
1114
},
1215
recipientContainer: {
1316
alignSelf: 'flex-start',
1417
backgroundColor: '#50FF00',
15-
borderRadius: 10,
16-
padding: 10,
17-
margin: 10,
18-
marginVertical: 5,
18+
...container,
19+
},
20+
message: {
21+
color: '#000000',
1922
},
2023
});
File renamed without changes.

example/src/screens/Examples/ReanimatedChat/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { useRef } from 'react';
44
import { TextInput, View } from 'react-native';
55
import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
66
import Reanimated, { useAnimatedStyle } from 'react-native-reanimated';
7-
import Message from './components/Message';
8-
import { history } from './constants';
7+
import Message from '../../../components/Message';
8+
import { history } from '../../../components/Message/data';
99
import styles from './styles';
1010

1111
const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);

0 commit comments

Comments
 (0)