feat: fixing types and updating example to Chat messaging

Author: vishalnarkhede

README.md

@@ -18,8 +18,8 @@
 
 <table>
   <tr>
-    <td align='center' width="33%"><img src='https://user-images.githubusercontent.com/11586388/108675127-a5545680-74e6-11eb-89f9-b617b5ce6cc6.gif'/></td>
-    <td align='center' width="33%"><img src='https://user-images.githubusercontent.com/11586388/108675105-9ff70c00-74e6-11eb-8abf-7c07b79338e2.gif'/></td>
+    <td align='center' width="33%"><img src='https://user-images.githubusercontent.com/11586388/109138261-77774800-775a-11eb-806b-2add75755af7.gif' height="600" /></td>
+    <td align='center' width="33%"><img src='https://user-images.githubusercontent.com/11586388/109139686-16507400-775c-11eb-893f-8cccfb47f9d7.gif' height="600"/></td>
   </tr>
   <tr></tr>
   <tr>

example/README.md

@@ -1,4 +1,4 @@
-# Example for react-native-bidirectional-infinite-scroll
+# Example of chat messaging
 
 ## How to run
 
@@ -12,12 +12,16 @@ npx react-native run-ios
 
 <table>
   <tr>
-    <td align='center' width="33%"><img src='https://user-images.githubusercontent.com/11586388/108675127-a5545680-74e6-11eb-89f9-b617b5ce6cc6.gif'/></td>
-    <td align='center' width="33%"><img src='https://user-images.githubusercontent.com/11586388/108675105-9ff70c00-74e6-11eb-8abf-7c07b79338e2.gif'/></td>
+    <td align='center' width="33%"><img src='https://user-images.githubusercontent.com/11586388/109138261-77774800-775a-11eb-806b-2add75755af7.gif' height="600" /></td>
+    <td align='center' width="33%"><img src='https://user-images.githubusercontent.com/11586388/109139686-16507400-775c-11eb-893f-8cccfb47f9d7.gif' height="600"/></td>
   </tr>
   <tr></tr>
   <tr>
-    <td align='center'>iOS</td>
-    <td align='center'>Android</td>
+    <td align='center'>
+        <strong>iOS</strong>
+    </td>
+    <td align='center'>
+        <strong>Android</strong>
+    </td>
   </tr>
 </table>

example/src/App.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import FlatListExample from './FlatListExample';
+import MessageListExample from './MessageListExample';
 
 const App = () => {
-  return <FlatListExample />;
+  return <MessageListExample />;
 };
 
 export default App;

example/src/FlatListExample.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type { Message } from './utils';
+
+type Props = {
+  item: Message;
+};
+
+export const MessageBubble: React.FC<Props> = ({ item }) => {
+  if (item.isMyMessage) {
+    return (
+      <View
+        key={`${item.id}`}
+        style={[styles.messageBubble, styles.myMessageBubble]}
+      >
+        <Text style={styles.myMessageText}>{item.text}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View key={`${item.id}`} style={styles.messageBubble}>
+      <Text style={styles.messageText}>{item.text}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  messageBubble: {
+    maxWidth: 300,
+    padding: 10,
+    borderRadius: 10,
+    marginVertical: 5,
+    marginHorizontal: 5,
+    backgroundColor: '#F1F0F0',
+  },
+  myMessageBubble: {
+    alignSelf: 'flex-end',
+    // borderColor: '#989898',
+    // borderWidth: 1,
+    backgroundColor: '#3784FF',
+  },
+  messageText: {
+    fontSize: 15,
+  },
+  myMessageText: {
+    color: 'white',
+    fontSize: 15,
+  },
+});

example/src/MessageBubble.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+
+import { FlatList } from 'react-native-bidirectional-infinite-scroll';
+import { MessageBubble } from './MessageBubble';
+import { Message, queryMoreMessages } from './utils';
+
+const App = () => {
+  const [messages, setMessages] = useState<Array<Message>>([]);
+  useEffect(() => {
+    const initChat = async () => {
+      const initialMessages = await queryMoreMessages(50);
+      if (!initialMessages) return;
+
+      setMessages(initialMessages);
+    };
+
+    initChat();
+  }, []);
+
+  const loadMoreOlderMessages = async () => {
+    const newMessages = await queryMoreMessages(10);
+    setMessages((m) => {
+      return m.concat(newMessages);
+    });
+  };
+
+  const loadMoreRecentMessages = async () => {
+    const newMessages = await queryMoreMessages(10);
+    setMessages((m) => {
+      return newMessages.concat(m);
+    });
+  };
+
+  if (!messages.length) {
+    return null;
+  }
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Chat between two users</Text>
+      </View>
+      <FlatList
+        data={messages}
+        inverted
+        onEndReached={loadMoreOlderMessages}
+        onStartReached={loadMoreRecentMessages}
+        renderItem={MessageBubble}
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    alignItems: 'center',
+    paddingVertical: 10,
+    borderBottomColor: '#BEBEBE',
+    borderBottomWidth: 1,
+  },
+  headerTitle: { fontSize: 20, fontWeight: 'bold' },
+  safeArea: {
+    flex: 1,
+  },
+  sendMessageButton: {
+    width: '100%',
+    padding: 20,
+    backgroundColor: '#FF4500',
+    alignItems: 'center',
+  },
+  sendButtonTitle: {
+    color: 'white',
+    fontSize: 15,
+    fontWeight: 'bold',
+  },
+});
+
+export default App;

example/src/MessageListExample.tsx

@@ -0,0 +1,47 @@
+// Generate random integer, we will use this to use random message from list of dummy messages.
+export const getRandomInt = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min)) + min;
+};
+
+// Generate unique key for message component of FlatList.
+export const generateUniqueKey = () =>
+  `_${Math.random().toString(36).substr(2, 9)}`;
+
+export type Message = {
+  id: string;
+  text: string;
+  isMyMessage: boolean;
+};
+
+// Mocks the api call to query 'n' number of messages.
+export const queryMoreMessages: (n: number) => Promise<Array<Message>> = (
+  n
+) => {
+  return new Promise((resolve) => {
+    const newMessages: Array<Message> = [];
+
+    for (let i = 0; i < n; i++) {
+      const messageText = testMessages[getRandomInt(0, testMessages.length)];
+      newMessages.push({
+        id: generateUniqueKey(),
+        text: messageText,
+        isMyMessage: Boolean(getRandomInt(0, 2)), // Randomly assign true or false.
+      });
+    }
+
+    // Lets resolve after 500 ms, to simulate network latency.
+    setTimeout(() => {
+      resolve(newMessages);
+    }, 500);
+  });
+};
+
+// List of test messages to generate chat data.
+export const testMessages = [
+  'Hey, where were you yesterday? I was trying to call you',
+  'Yeah dude!! Had a really bad night. I was really hungover',
+  'lol, thats so typical you. Who did you go out with?',
+  'Dont even ask me about it, I am never going drink with Uthred again. That dude is a beast',
+  'hahahaha, I can totally imagine!!',
+  'Ciao :)',
+];

example/src/utils.ts

@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
   },
 });
 
-type Props<T> = FlatListProps<T> & {
+type Props<T> = Omit<FlatListProps<T>, 'maintainVisibleContentPosition'> & {
   /**
    * Called once when the scroll position gets close to end of list. This must return a promise.
    * You can `onEndReachedThreshold` as distance from end of list, when this function should be called.