chore: making reusable animated chat components

Author: kirillzyusko

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

@@ -10,8 +10,7 @@ export const history: MessageProps[] = [
   { text: 'Try to check it. I hope it helps you...', sender: true },
   { text: 'It really pushes you to think twice on how to design it first' },
   {
-    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',
+    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',
   },
   { text: 'You have to check it!!!', sender: true },
   { text: "Ha-ha! I'm definitely going to check it!" },

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import type { MessageProps } from '../../types';
 import styles from './styles';
 
+import type { MessageProps } from './types';
+
 export default function Message({ text, sender }: MessageProps) {
   return (
     <View style={sender ? styles.senderContainer : styles.recipientContainer}>
-      <Text>{text}</Text>
+      <Text style={styles.message}>{text}</Text>
     </View>
   );
 }

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

@@ -1,20 +1,23 @@
 import { StyleSheet } from 'react-native';
 
+const container = {
+  borderRadius: 10,
+  padding: 10,
+  margin: 10,
+  marginVertical: 5,
+};
 export default StyleSheet.create({
   senderContainer: {
     alignSelf: 'flex-end',
     backgroundColor: '#e0e0e0',
-    borderRadius: 10,
-    padding: 10,
-    margin: 10,
-    marginVertical: 5,
+    ...container,
   },
   recipientContainer: {
     alignSelf: 'flex-start',
     backgroundColor: '#50FF00',
-    borderRadius: 10,
-    padding: 10,
-    margin: 10,
-    marginVertical: 5,
+    ...container,
+  },
+  message: {
+    color: '#000000',
   },
 });

…screens/Examples/ReanimatedChat/types.ts example/src/components/Message/types.tsexample/src/screens/Examples/ReanimatedChat/types.ts renamed to example/src/components/Message/types.ts example/src/screens/Examples/ReanimatedChat/types.ts renamed to example/src/components/Message/types.ts

@@ -4,8 +4,8 @@ import { useRef } from 'react';
 import { TextInput, View } from 'react-native';
 import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
 import Reanimated, { useAnimatedStyle } from 'react-native-reanimated';
-import Message from './components/Message';
-import { history } from './constants';
+import Message from '../../../components/Message';
+import { history } from '../../../components/Message/data';
 import styles from './styles';
 
 const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);