chore: add reanimated chat flatlist example (#236)

## 📜 Description
<!-- Describe your changes in detail -->
Add an example for a chat with reanimated and flatlist 

## 💡 Motivation and Context
<!-- Why is this change required? What problem does it solve? -->
<!-- If it fixes an open issue, please link to the issue here. -->
There is only an example with a ScrollView, in a real chat app it's more
common to encounter a FlatList
It may solve this issue
#156

## 🤔 How Has This Been Tested?
Tested iPhone 14 Pro 

## 📸 Screenshots (if appropriate):

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/11976270/9d73f4f0-e1a4-4ea6-a0f8-a870284c0322
## 📝 Checklist

- [ ] CI successfully passed

---------

Co-authored-by: kirillzyusko <zyusko.kirik@gmail.com>

example/src/constants/screenNames.ts

@@ -1,6 +1,7 @@
 export enum ScreenNames {
   ANIMATED_EXAMPLE = 'ANIMATED_EXAMPLE',
   REANIMATED_CHAT = 'REANIMATED_CHAT',
+  REANIMATED_CHAT_FLATLIST = 'REANIMATED_CHAT_FLATLIST',
   EVENTS = 'EVENTS',
   AWARE_SCROLL_VIEW = 'AWARE_SCROLL_VIEW',
   STATUS_BAR = 'STATUS_BAR',

example/src/navigation/ExamplesStack/index.tsx

@@ -14,6 +14,7 @@ import InteractiveKeyboard from '../../screens/Examples/InteractiveKeyboard';
 import InteractiveKeyboardIOS from '../../screens/Examples/InteractiveKeyboardIOS';
 import NativeStack from '../NestedStack';
 import KeyboardAvoidingViewExample from '../../screens/Examples/KeyboardAvoidingView';
+import ReanimatedChatFlatlist from '../../screens/Examples/ReanimatedChatFlatlist';
 
 export type ExamplesStackParamList = {
   [ScreenNames.ANIMATED_EXAMPLE]: undefined;
@@ -38,6 +39,9 @@ const options = {
   [ScreenNames.REANIMATED_CHAT]: {
     title: 'Chat',
   },
+  [ScreenNames.REANIMATED_CHAT_FLATLIST]: {
+    title: 'Chat Flatlist',
+  },
   [ScreenNames.EVENTS]: {
     title: 'Events',
   },
@@ -80,6 +84,11 @@ const ExamplesStack = () => (
       component={ReanimatedChat}
       options={options[ScreenNames.REANIMATED_CHAT]}
     />
+    <Stack.Screen
+      name={ScreenNames.REANIMATED_CHAT_FLATLIST}
+      component={ReanimatedChatFlatlist}
+      options={options[ScreenNames.REANIMATED_CHAT]}
+    />
     <Stack.Screen
       name={ScreenNames.EVENTS}
       component={Events}

example/src/screens/Examples/Main/constants.ts

@@ -8,6 +8,11 @@ export const examples: Example[] = [
     icons: '😍⌨️',
   },
   { title: 'Chat', info: ScreenNames.REANIMATED_CHAT, icons: '💬' },
+  {
+    title: 'Chat flatlist',
+    info: ScreenNames.REANIMATED_CHAT_FLATLIST,
+    icons: '💬',
+  },
   { title: 'Events', info: ScreenNames.EVENTS, icons: '🎃 📅' },
   {
     title: 'Aware scroll view',

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FlatList, ListRenderItem, TextInput, View } from 'react-native';
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+
+import Message from '../../../components/Message';
+import { history } from '../../../components/Message/data';
+import { MessageProps } from '../../../components/Message/types';
+
+import styles from './styles';
+
+const reversedMessages = [...history].reverse();
+
+const RenderItem: ListRenderItem<MessageProps> = ({ item, index }) => {
+  return <Message key={index} {...item} />;
+};
+
+function ReanimatedChatFlatlist() {
+  const { height } = useReanimatedKeyboardAnimation();
+
+  const fakeView = useAnimatedStyle(
+    () => ({
+      height: Math.abs(height.value),
+    }),
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        inverted
+        initialNumToRender={15}
+        contentContainerStyle={styles.contentContainer}
+        data={reversedMessages}
+        renderItem={RenderItem}
+      />
+      <TextInput style={styles.textInput} />
+      <Animated.View style={fakeView} />
+    </View>
+  );
+}
+
+export default ReanimatedChatFlatlist;

example/src/screens/Examples/ReanimatedChatFlatlist/styles.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    color: 'black',
+    marginRight: 12,
+  },
+  contentContainer: { justifyContent: 'flex-end', flexGrow: 1 },
+  textInput: { height: 50, width: '100%', backgroundColor: '#BCBCBC' },
+});