@dooboo-ui/gifted-chat
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    GiftedChat

    [GiftedChat] component contains essential features to be implemented in Chat screen.

    gifted_chat

    Props

    necessary types default
    chats any[]
    borderColor string
    backgroundColor string
    fontColor string
    keyboardOffset number
    renderItem ListRenderItem
    emptyItem ReactElement
    renderViewMenu () => ReactElement
    optionView ReactElement
    onChangeMessage Function
    placeholder string
    placeholderTextColor string
    renderSendButton () => ReactElement

    Installation

    yarn add @dooboo-ui/core

    or

    yarn add @dooboo-ui/gifted-chat

    Getting started

    • Import

      import { GiftedChat } from '@dooboo-ui/core';
    • Usage

      import { Image, Platform, TouchableOpacity, View } from 'react-native';
      import {
        NavigationParams,
        NavigationScreenProp,
        NavigationState,
      } from 'react-navigation';
      import React, { useState } from 'react';
      import styled, {
        DefaultTheme,
        ThemeProps,
      } from 'styled-components/native';
      
      import Button from '../shared/Button';
      import { Chat } from '../../types';
      import ChatListItem from '../shared/ChatListItem';
      import Constants from 'expo-constants';
      import EmptyListItem from '../shared/EmptyListItem';
      import GiftedChat from '../shared/GiftedChat';
      import { Header } from 'react-navigation-stack';
      import { IC_SMILE } from '../../utils/Icons';
      import { Ionicons } from '@expo/vector-icons';
      import { getString } from '../../../STRINGS';
      
      const StyledContainer = styled.SafeAreaView`
        flex: 1;
        background-color: ${({ theme }): string => theme.background};
        flex-direction: column;
        align-items: center;
      `;
      
      interface Props extends ThemeProps<DefaultTheme> {
        navigation: NavigationScreenProp<NavigationState, NavigationParams>;
      }
      
      interface State {
        isLoading: boolean;
        showMenu: boolean;
        message: string;
        chats: Chat[];
      }
      
      function Screen(props: Props): React.ReactElement {
        const { theme } = props;
      
        const [isSending, setIsSending] = useState<boolean>(false);
        const [message, setMessage] = useState<string>('');
        const [chats, setChats] = useState<Chat[]>([
          {
            id: '',
            sender: {
              uid: '0',
              displayName: 'sender111',
              thumbURL: '',
              photoURL: '',
              statusMsg: '',
            },
            message: 'hello1',
          },
          {
            id: '',
            sender: {
              uid: '2',
              displayName: 'sender111',
              thumbURL: '',
              photoURL: '',
              statusMsg: '',
            },
            message:
              'Hello2. This is long message. This is long message.This is long message.' +
              'This is long message. This is long message. This is long message.' +
              'This is long message. This is long message.' +
              'This is long message. This is long message. This is long message.',
          },
          {
            id: '',
            sender: {
              uid: '0',
              displayName: 'sender111',
              thumbURL: '',
              photoURL: '',
              statusMsg: '',
            },
            message: 'hello',
          },
          {
            id: '',
            sender: {
              uid: '0',
              displayName: 'sender111',
              thumbURL: '',
              photoURL: '',
              statusMsg: '',
            },
            message: 'hello2',
          },
        ]);
      
        const onSubmit = (): void => {
          setIsSending(true);
        };
      
        return (
          <StyledContainer>
            <GiftedChat
              chats={chats}
              borderColor={theme.lineColor}
              backgroundColor={theme.background}
              fontColor={theme.fontColor}
              keyboardOffset={Constants.statusBarHeight + Header.HEIGHT}
              message={message}
              placeholder={getString('WRITE_MESSAGE')}
              placeholderTextColor={theme.status}
              onChangeMessage={(text: string): void => setMessage(text)}
              renderItem={({
                item,
                index,
              }: {
                item: Chat;
                index: number;
              }): React.ReactElement => {
                return (
                  <ChatListItem
                    prevItem={index > 0 ? chats[index - 1] : undefined}
                    item={item}
                  />
                );
              }}
              optionView={
                <Image
                  style={{
                    width: 20,
                    height: 20,
                  }}
                  source={IC_SMILE}
                />
              }
              emptyItem={<EmptyListItem>{getString('NO_CONTENT')}</EmptyListItem>}
              renderViewMenu={(): React.ReactElement => (
                <View
                  style={{
                    flexDirection: 'row',
                    marginTop: 10,
                  }}
                >
                  <TouchableOpacity
                    style={{
                      marginLeft: 16,
                      marginTop: 2,
                      width: 60,
                      height: 60,
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}
                  >
                    <Ionicons
                      name="ios-camera"
                      size={36}
                      color={theme ? theme.fontColor : '#3d3d3d'}
                    />
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={{
                      marginLeft: 16,
                      marginTop: 4,
                      width: 60,
                      height: 60,
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}
                  >
                    <Ionicons
                      name="md-images"
                      size={36}
                      color={theme ? theme.fontColor : '#3d3d3d'}
                    />
                  </TouchableOpacity>
                </View>
              )}
              renderSendButton={(): React.ReactElement => (
                <Button
                  testID="btn_chat"
                  height={Platform.OS === 'android' ? 40 : undefined}
                  isLoading={isSending}
                  onPress={onSubmit}
                >
                  {getString('SEND')}
                </Button>
              )}
            />
          </StyledContainer>
        );
      }
      
      export default Screen;

    Install

    npm i @dooboo-ui/gifted-chat

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    503 kB

    Total Files

    8

    Last publish

    Collaborators

    • jongtaek
    • do02reen24
    • dooboolab