{"_id":"@dooboo-ui/gifted-chat","_rev":"5-66be9b6808cf0c859c4b1b7951d60ed2","name":"@dooboo-ui/gifted-chat","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@dooboo-ui/gifted-chat","main":"lib/index.js","types":"lib/index.d.ts","version":"0.0.1","license":"MIT","postinstall":"tsc","scripts":{"build":"rm -rf ./lib && tsc","watch":"tsc -w"},"repository":{"type":"git","url":"git+https://github.com/dooboolab/dooboo-ui.git","directory":"src/components/shared/GiftedChat"},"bugs":{"url":"https://github.com/dooboolab/dooboo-ui/issues"},"homepage":"https://github.com/dooboolab/dooboo-ui#readme","dependencies":{"dooboolab-welcome":"^1.1.1"},"devDependencies":{"styled-components":"^4.4.0","typescript":"^3.7.5"},"peerDependencies":{"react":">=16.8","react-native":">=0.59","styled-components":">=4.4.0"},"publishConfig":{"access":"public"},"keywords":["gifted-chat","react-hook","react-native","dooboo-ui/native","dooboolab"],"description":"> [GiftedChat] component contains essential features to be implemented in `Chat` screen.","_id":"@dooboo-ui/gifted-chat@0.0.1","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-mH7Bno949M1gvlYZTKrHZTXORTX/sPKDX7xOPDpPcQubR+pzNipG4RvC32jESNMfh3/yhjT2Mep112CONgkriQ==","shasum":"5c8b1e2663d99810a77a3487b4384365d6adcd02","tarball":"https://registry.npmjs.org/@dooboo-ui/gifted-chat/-/gifted-chat-0.0.1.tgz","fileCount":8,"unpackedSize":502921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6tYdCRA9TVsSAnZWagAAOAoP/RDoWOOsBijjO/QFpdl8\nuEYCNzouWro3dPd+XJ99EDsej3MRZk/ge9Bt/PcXC+SlABDQAYE/57YiYCps\nnyoqekKU0sFcynqxWC3NDZ3tlk1wZACJJ1vlR11gGulxJ+UttzmB94QXbSkW\nCxP7h/oyxYd6dfQX9CyyH0r4FC9x66WQ2Th+AUnO0S57pncu9RGU/z0OinYF\nvmoIIKIMNNt9eYUwmWcmVSghEyxKH5rgniF6p3EtdF1b/MeOf1WiAcTTOIWI\nGRQvEiiNvIQma7/ZK4lXqAxasBdnvJ8O2ZwKQat9Zmox8bu/3rGkEO++U71s\nz27LjP4nLYNBX6W6a0E1jLJJp0pgHAPBEPkruseruYPC7KWiAtxvhL37Q37y\n6HWAW/ODl4GKnE+/vOnvgYiAfDUl8Q8ho+ELcu2JinjcKyUSf9mOzJAHV3w8\n9h8bfnHLenrulPVHJuKgnN+ZBF0Gldy0xeVf3R/KBmHX6qfr0vp8E1OtZV8R\nk2XE5q7zz7xxbKwQEFLsggJql8wlaXzdP8UVe7rQCToyuib0pNwLNSCYkE2Q\ncUg7IPKv1pYYKLPNoXU1JGLQoqbVW/Zno+KWLk5YirqybgTRPiGpFQgvcl6v\nc36SrTiVbvGTHcTGtX2yWrJu3KexkEBrVa8MD5jhYi7wFCLo3EKOMWdcaJZa\nZ6Zg\r\n=8VnG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCT5j9ZauFCJH/gqA1QA/6CLj0J4okcFzRwmjX+0yz73QIhANeMu9GJYLFvclvOZxerXKCY8vHSHC2VnQyspqE+2a2d"}]},"maintainers":[{"name":"dooboolab","email":"dooboolab@gmail.com"}],"_npmUser":{"name":"dooboolab","email":"dooboolab@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gifted-chat_0.0.1_1592448540936_0.8392836085733484"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-18T02:49:00.693Z","0.0.1":"2020-06-18T02:49:01.047Z","modified":"2022-04-05T05:16:08.650Z"},"maintainers":[{"email":"lastchoice86@naver.com","name":"jongtaek"},{"email":"do02reen24@gmail.com","name":"do02reen24"},{"email":"dooboolab@gmail.com","name":"dooboolab"}],"description":"> [GiftedChat] component contains essential features to be implemented in `Chat` screen.","homepage":"https://github.com/dooboolab/dooboo-ui#readme","keywords":["gifted-chat","react-hook","react-native","dooboo-ui/native","dooboolab"],"repository":{"type":"git","url":"git+https://github.com/dooboolab/dooboo-ui.git","directory":"src/components/shared/GiftedChat"},"bugs":{"url":"https://github.com/dooboolab/dooboo-ui/issues"},"license":"MIT","readme":"# GiftedChat\n\n> [GiftedChat] component contains essential features to be implemented in `Chat` screen.\n\n![gifted_chat](https://user-images.githubusercontent.com/27461460/69912933-218ef400-1474-11ea-9e89-c634be770927.gif)\n\n\n## Props\n\n|                      | necessary | types               | default |\n| -------------------- | --------- | ------------------- | ------- |\n| chats                |           | any[]               |         |\n| borderColor          |           | string              |         |\n| backgroundColor      |           | string              |         |\n| fontColor            |           | string              |         |\n| keyboardOffset       |           | number              |         |\n| renderItem           |           | ListRenderItem<any> |         |\n| emptyItem            |           | ReactElement        |         |\n| renderViewMenu       |           | () => ReactElement  |         |\n| optionView           |           | ReactElement        |         |\n| onChangeMessage      |           | Function            |         |\n| placeholder          |           | string              |         |\n| placeholderTextColor |           | string              |         |\n| renderSendButton     |           | () => ReactElement  |         |\n\n## Installation\n\n```sh\nyarn add @dooboo-ui/core\n```\n\nor\n\n```sh\nyarn add @dooboo-ui/gifted-chat\n```\n\n## Getting started\n\n- Import\n\n  ```javascript\n  import { GiftedChat } from '@dooboo-ui/core';\n  ```\n\n- Usage\n\n  ```javascript\n  import { Image, Platform, TouchableOpacity, View } from 'react-native';\n  import {\n    NavigationParams,\n    NavigationScreenProp,\n    NavigationState,\n  } from 'react-navigation';\n  import React, { useState } from 'react';\n  import styled, {\n    DefaultTheme,\n    ThemeProps,\n  } from 'styled-components/native';\n\n  import Button from '../shared/Button';\n  import { Chat } from '../../types';\n  import ChatListItem from '../shared/ChatListItem';\n  import Constants from 'expo-constants';\n  import EmptyListItem from '../shared/EmptyListItem';\n  import GiftedChat from '../shared/GiftedChat';\n  import { Header } from 'react-navigation-stack';\n  import { IC_SMILE } from '../../utils/Icons';\n  import { Ionicons } from '@expo/vector-icons';\n  import { getString } from '../../../STRINGS';\n\n  const StyledContainer = styled.SafeAreaView`\n    flex: 1;\n    background-color: ${({ theme }): string => theme.background};\n    flex-direction: column;\n    align-items: center;\n  `;\n\n  interface Props extends ThemeProps<DefaultTheme> {\n    navigation: NavigationScreenProp<NavigationState, NavigationParams>;\n  }\n\n  interface State {\n    isLoading: boolean;\n    showMenu: boolean;\n    message: string;\n    chats: Chat[];\n  }\n\n  function Screen(props: Props): React.ReactElement {\n    const { theme } = props;\n\n    const [isSending, setIsSending] = useState<boolean>(false);\n    const [message, setMessage] = useState<string>('');\n    const [chats, setChats] = useState<Chat[]>([\n      {\n        id: '',\n        sender: {\n          uid: '0',\n          displayName: 'sender111',\n          thumbURL: '',\n          photoURL: '',\n          statusMsg: '',\n        },\n        message: 'hello1',\n      },\n      {\n        id: '',\n        sender: {\n          uid: '2',\n          displayName: 'sender111',\n          thumbURL: '',\n          photoURL: '',\n          statusMsg: '',\n        },\n        message:\n          'Hello2. This is long message. This is long message.This is long message.' +\n          'This is long message. This is long message. This is long message.' +\n          'This is long message. This is long message.' +\n          'This is long message. This is long message. This is long message.',\n      },\n      {\n        id: '',\n        sender: {\n          uid: '0',\n          displayName: 'sender111',\n          thumbURL: '',\n          photoURL: '',\n          statusMsg: '',\n        },\n        message: 'hello',\n      },\n      {\n        id: '',\n        sender: {\n          uid: '0',\n          displayName: 'sender111',\n          thumbURL: '',\n          photoURL: '',\n          statusMsg: '',\n        },\n        message: 'hello2',\n      },\n    ]);\n\n    const onSubmit = (): void => {\n      setIsSending(true);\n    };\n\n    return (\n      <StyledContainer>\n        <GiftedChat\n          chats={chats}\n          borderColor={theme.lineColor}\n          backgroundColor={theme.background}\n          fontColor={theme.fontColor}\n          keyboardOffset={Constants.statusBarHeight + Header.HEIGHT}\n          message={message}\n          placeholder={getString('WRITE_MESSAGE')}\n          placeholderTextColor={theme.status}\n          onChangeMessage={(text: string): void => setMessage(text)}\n          renderItem={({\n            item,\n            index,\n          }: {\n            item: Chat;\n            index: number;\n          }): React.ReactElement => {\n            return (\n              <ChatListItem\n                prevItem={index > 0 ? chats[index - 1] : undefined}\n                item={item}\n              />\n            );\n          }}\n          optionView={\n            <Image\n              style={{\n                width: 20,\n                height: 20,\n              }}\n              source={IC_SMILE}\n            />\n          }\n          emptyItem={<EmptyListItem>{getString('NO_CONTENT')}</EmptyListItem>}\n          renderViewMenu={(): React.ReactElement => (\n            <View\n              style={{\n                flexDirection: 'row',\n                marginTop: 10,\n              }}\n            >\n              <TouchableOpacity\n                style={{\n                  marginLeft: 16,\n                  marginTop: 2,\n                  width: 60,\n                  height: 60,\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                }}\n              >\n                <Ionicons\n                  name=\"ios-camera\"\n                  size={36}\n                  color={theme ? theme.fontColor : '#3d3d3d'}\n                />\n              </TouchableOpacity>\n              <TouchableOpacity\n                style={{\n                  marginLeft: 16,\n                  marginTop: 4,\n                  width: 60,\n                  height: 60,\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                }}\n              >\n                <Ionicons\n                  name=\"md-images\"\n                  size={36}\n                  color={theme ? theme.fontColor : '#3d3d3d'}\n                />\n              </TouchableOpacity>\n            </View>\n          )}\n          renderSendButton={(): React.ReactElement => (\n            <Button\n              testID=\"btn_chat\"\n              height={Platform.OS === 'android' ? 40 : undefined}\n              isLoading={isSending}\n              onPress={onSubmit}\n            >\n              {getString('SEND')}\n            </Button>\n          )}\n        />\n      </StyledContainer>\n    );\n  }\n\n  export default Screen;\n\n  ```\n","readmeFilename":"README.md"}