Example for using the renderProps of gifted-chat

FaridSafi · May 5, 2020 · 43d31d3 · 43d31d3
1 parent 51a5c70
commit 43d31d3
Show file tree

Hide file tree

Showing 6 changed files with 381 additions and 0 deletions.
diff --git a/example-gifted-chat/README.md b/example-gifted-chat/README.md
@@ -0,0 +1,27 @@
+# example-gifted-chat
+
+Lots of people using `react-native-gifted-chat` might want to know that...
+
+1. There are so many render props could use, but what should I pass?
+2. How could I customize each component, but leaving its functionality.
+
+> For example, said that you want to customize the `send button`, when you pass your own component to `renderSend`, after that you will lose the functionality of clean up text when a message has been sent.
+
+---
+
+I made this for anyone who wants to know how to use the render Props properly.
+
+##### Such as:
+
+- renderInputToolbar
+- renderActions
+- renderComposer
+- renderSend
+- renderAvatar
+- renderBubble
+- renderSystemMessage
+- renderMessage
+- renderMessageText
+- renderCustomView
+
+<img src="https://i.imgur.com/dbkc7I4.png" alt="Example for customize components" width="300">
diff --git a/example-gifted-chat/example-gifted-chat.png b/example-gifted-chat/example-gifted-chat.png
diff --git a/example-gifted-chat/src/Chats.js b/example-gifted-chat/src/Chats.js
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import { GiftedChat } from 'react-native-gifted-chat';
+import initialMessages from './messages';
+import { renderInputToolbar, renderActions, renderComposer, renderSend } from './InputToolbar';
+import {
+  renderAvatar,
+  renderBubble,
+  renderSystemMessage,
+  renderMessage,
+  renderMessageText,
+  renderCustomView,
+} from './MessageContainer';
+
+const Chats = () => {
+  const [text, setText] = useState('');
+  const [messages, setMessages] = useState([]);
+
+  useEffect(() => {
+    setMessages(initialMessages.reverse());
+  }, []);
+
+  const onSend = (newMessages = []) => {
+    setMessages((prevMessages) => GiftedChat.append(prevMessages, newMessages));
+  };
+
+  return (
+    <GiftedChat
+      messages={messages}
+      text={text}
+      onInputTextChanged={setText}
+      onSend={onSend}
+      user={{
+        _id: 1,
+        name: 'Aaron',
+        avatar: 'https://placeimg.com/150/150/any',
+      }}
+      alignTop
+      alwaysShowSend
+      scrollToBottom
+      // showUserAvatar
+      renderAvatarOnTop
+      renderUsernameOnMessage
+      bottomOffset={26}
+      onPressAvatar={console.log}
+      renderInputToolbar={renderInputToolbar}
+      renderActions={renderActions}
+      renderComposer={renderComposer}
+      renderSend={renderSend}
+      renderAvatar={renderAvatar}
+      renderBubble={renderBubble}
+      renderSystemMessage={renderSystemMessage}
+      renderMessage={renderMessage}
+      renderMessageText={renderMessageText}
+      // renderMessageImage
+      renderCustomView={renderCustomView}
+      isCustomViewBottom
+      messagesContainerStyle={{ backgroundColor: 'indigo' }}
+      parsePatterns={(linkStyle) => [
+        {
+          pattern: /#(\w+)/,
+          style: linkStyle,
+          onPress: (tag) => console.log(`Pressed on hashtag: ${tag}`),
+        },
+      ]}
+    />
+  );
+};
+
+export default Chats;
diff --git a/example-gifted-chat/src/InputToolbar.js b/example-gifted-chat/src/InputToolbar.js
@@ -0,0 +1,85 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { Image } from 'react-native';
+import { InputToolbar, Actions, Composer, Send } from 'react-native-gifted-chat';
+
+export const renderInputToolbar = (props) => (
+  <InputToolbar
+    {...props}
+    containerStyle={{
+      backgroundColor: '#222B45',
+      paddingTop: 6,
+    }}
+    primaryStyle={{ alignItems: 'center' }}
+  />
+);
+
+export const renderActions = (props) => (
+  <Actions
+    {...props}
+    containerStyle={{
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: 4,
+      marginRight: 4,
+      marginBottom: 0,
+    }}
+    icon={() => (
+      <Image
+        style={{ width: 32, height: 32 }}
+        source={{
+          uri: 'https://placeimg.com/32/32/any',
+        }}
+      />
+    )}
+    options={{
+      'Choose From Library': () => {
+        console.log('Choose From Library');
+      },
+      Cancel: () => {
+        console.log('Cancel');
+      },
+    }}
+    optionTintColor="#222B45"
+  />
+);
+
+export const renderComposer = (props) => (
+  <Composer
+    {...props}
+    textInputStyle={{
+      color: '#222B45',
+      backgroundColor: '#EDF1F7',
+      borderWidth: 1,
+      borderRadius: 5,
+      borderColor: '#E4E9F2',
+      paddingTop: 8.5,
+      paddingHorizontal: 12,
+      marginLeft: 0,
+    }}
+  />
+);
+
+export const renderSend = (props) => (
+  <Send
+    {...props}
+    disabled={!props.text}
+    containerStyle={{
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginHorizontal: 4,
+    }}
+  >
+    <Image
+      style={{ width: 32, height: 32 }}
+      source={{
+        uri: 'https://placeimg.com/32/32/any',
+      }}
+    />
+  </Send>
+);
diff --git a/example-gifted-chat/src/MessageContainer.js b/example-gifted-chat/src/MessageContainer.js
@@ -0,0 +1,91 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { View, Text } from 'react-native';
+import { Avatar, Bubble, SystemMessage, Message, MessageText } from 'react-native-gifted-chat';
+
+export const renderAvatar = (props) => (
+  <Avatar
+    {...props}
+    containerStyle={{ left: { borderWidth: 3, borderColor: 'red' }, right: {} }}
+    imageStyle={{ left: { borderWidth: 3, borderColor: 'blue' }, right: {} }}
+  />
+);
+
+export const renderBubble = (props) => (
+  <Bubble
+    {...props}
+    // renderTime={() => <Text>Time</Text>}
+    // renderTicks={() => <Text>Ticks</Text>}
+    containerStyle={{
+      left: { borderColor: 'teal', borderWidth: 8 },
+      right: {},
+    }}
+    wrapperStyle={{
+      left: { borderColor: 'tomato', borderWidth: 4 },
+      right: {},
+    }}
+    bottomContainerStyle={{
+      left: { borderColor: 'purple', borderWidth: 4 },
+      right: {},
+    }}
+    tickStyle={{}}
+    usernameStyle={{ color: 'tomato', fontWeight: '100' }}
+    containerToNextStyle={{
+      left: { borderColor: 'navy', borderWidth: 4 },
+      right: {},
+    }}
+    containerToPreviousStyle={{
+      left: { borderColor: 'mediumorchid', borderWidth: 4 },
+      right: {},
+    }}
+  />
+);
+
+export const renderSystemMessage = (props) => (
+  <SystemMessage
+    {...props}
+    containerStyle={{ backgroundColor: 'pink' }}
+    wrapperStyle={{ borderWidth: 10, borderColor: 'white' }}
+    textStyle={{ color: 'crimson', fontWeight: '900' }}
+  />
+);
+
+export const renderMessage = (props) => (
+  <Message
+    {...props}
+    // renderDay={() => <Text>Date</Text>}
+    containerStyle={{
+      left: { backgroundColor: 'lime' },
+      right: { backgroundColor: 'gold' },
+    }}
+  />
+);
+
+export const renderMessageText = (props) => (
+  <MessageText
+    {...props}
+    containerStyle={{
+      left: { backgroundColor: 'yellow' },
+      right: { backgroundColor: 'purple' },
+    }}
+    textStyle={{
+      left: { color: 'red' },
+      right: { color: 'green' },
+    }}
+    linkStyle={{
+      left: { color: 'orange' },
+      right: { color: 'orange' },
+    }}
+    customTextStyle={{ fontSize: 24, lineHeight: 24 }}
+  />
+);
+
+export const renderCustomView = ({ user }) => (
+  <View style={{ minHeight: 20, alignItems: 'center' }}>
+    <Text>
+      Current user:
+      {user.name}
+    </Text>
+    <Text>From CustomView</Text>
+  </View>
+);
diff --git a/example-gifted-chat/src/messages.js b/example-gifted-chat/src/messages.js
@@ -0,0 +1,109 @@
+const messages = [
+  {
+    _id: 1,
+    text: 'This is a system message',
+    createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
+    system: true,
+  },
+  {
+    _id: 2,
+    text: 'Hello developer',
+    createdAt: new Date(Date.UTC(2016, 5, 12, 17, 20, 0)),
+    user: {
+      _id: 2,
+      name: 'React Native',
+      avatar: 'https://placeimg.com/140/140/any',
+    },
+  },
+  {
+    _id: 3,
+    text: 'Hi! I work from home today!',
+    createdAt: new Date(Date.UTC(2016, 5, 13, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'React Native',
+      avatar: 'https://placeimg.com/140/140/any',
+    },
+    image: 'https://placeimg.com/960/540/any',
+  },
+  {
+    _id: 4,
+    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
+    createdAt: new Date(Date.UTC(2016, 5, 14, 17, 20, 0)),
+    user: {
+      _id: 2,
+      name: 'React Native',
+      avatar: 'https://placeimg.com/140/140/any',
+    },
+    quickReplies: {
+      type: 'radio', // or 'checkbox',
+      keepIt: true,
+      values: [
+        {
+          title: '😋 Yes',
+          value: 'yes',
+        },
+        {
+          title: '📷 Yes, let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: '😞 Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+  },
+  {
+    _id: 5,
+    text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
+    createdAt: new Date(Date.UTC(2016, 5, 15, 17, 20, 0)),
+    user: {
+      _id: 2,
+      name: 'React Native',
+      avatar: 'https://placeimg.com/140/140/any',
+    },
+    quickReplies: {
+      type: 'checkbox', // or 'radio',
+      values: [
+        {
+          title: 'Yes',
+          value: 'yes',
+        },
+        {
+          title: 'Yes, let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: 'Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+  },
+  {
+    _id: 6,
+    text: 'Come on!',
+    createdAt: new Date(Date.UTC(2016, 5, 15, 18, 20, 0)),
+    user: {
+      _id: 2,
+      name: 'React Native',
+      avatar: 'https://placeimg.com/140/140/any',
+    },
+  },
+  {
+    _id: 7,
+    text: `Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.
+        But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com
+        And the magic number is 42!
+        #react #react-native`,
+    createdAt: new Date(Date.UTC(2016, 5, 13, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'React Native',
+      avatar: 'https://placeimg.com/140/140/any',
+    },
+  },
+];
+
+export default messages;