react-native-messy

Chat ui for React Native

Dependency

• gorhom/bottom-sheet
• react-native-keyboard-controller
• react-native-image-picker
• react-native-gesture-handler
• react-native-reanimated
• react-native-tab-view
• react-native-video
• @shopify/flash-list

Features

• text message, phone, url, email format and fully customize
• single image message and fully customize
• list images message and fully customize
• emoji keyboard
• loadmore
• customize default system UI ( Text, Image, List...)
• audio message
• swipe to reply
• reaction
• and more

Installation

npm install @vokhuyet/react-native-messy

or

yarn add @vokhuyet/react-native-messy

Usage

import { Messy } from '@vokhuyet/react-native-messy';

// ...
    const [list, setList] = useState([]);

    <Messy
       messages={list}
        loading={isLoading}
        BaseModule={{
          Cache: CacheDimension,
          Image: ChatListImage,
          Text: AppText,
        }}
        renderLoading={renderLoading}
        renderMessageSystem={ChatListMessageSystem}
        listProps={{
          onEndReached,
          ListHeaderComponent: ChatListHeader,
          onPress: () => {
              //hide all bottom sheet modal inlcuding: emoji picker,...
              dismissAll();
              //hide keyboard
              Keyboard.dismiss();
          },
        }}
        messageProps={{
          hideOwnerAvatar: true,
          hidePartnerAvatar: false,
          onPress: onPressMessage,
          onLongPress: onLongPressMessage,
        }}
        user={{id: account?.user?.id}}
        footerProps={{
          hideEmoji: false;
          hideFooterAction: false;
          Send: <Image source={require('NewSendIcon.png')} />
          onSend,
          ExtraLeft: <ChatListExtraLeft />,
          ExtraActionLeft: <ChatListExtraActionLeft />,
        }}
    />

Default Element

MessyFooterActionLibraryDefault

• props

  onPress?: () => Promise<void> | void;  // use your own onPress handler
  handlePermission?: () => Promise<boolean>; // insert check permisson before use our internal handle select image
  style?: ImageStyle;
  source?: ImageSourcePropType;

MessyFooterActionCameraDefault

• props

  onPress?: () => Promise<void> | void;  // use your own onPress handler
  handlePermission?: () => Promise<boolean>; // insert check permisson before use our internal handle select image
  style?: ImageStyle;
  source?: ImageSourcePropType;

Default Function

setMessyFooterInputText

Use as global function to set Message Input text

Object Type

TMessyMessageLocation

name: string;
image: ImageProps['source'];
latitude: string;
longitude: string;

TMessyMessage

  id?: string | number | null;
  text?: string;
  image?: ImageSourcePropType;
  video?: { uri: string };
  audio?: {uri: string}; // not implemented, you can implement by yourself
  location?: TMessyMessageLocation;
  user?: TUser;
  type?: 'system' | 'message';
  createdTime?: Date | number | string;
  status?: 'sending' | 'sent' | 'seen';
  seenBy?: TUser[];
  local?: Asset;
  clientId?: string; // used for display message in List before receiving response from Server
  category?: string; // used for display multiple type of system message

TColor

background: string;
primary: string;
accent: string;
placeholder: string;
shadow: string;
success: string;
message_left: {
  background: string;
  text: string;
  link: string;
  email: string;
  phone: string;
  audio: string;
}
message_right: {
  background: string;
  text: string;
  link: string;
  email: string;
  phone: string;
  audio: string;
}
input: {
  text: string; //text color in TextInput
}

TUser

  id: string | number | null | undefined;
  userName?: string | null;
  avatar?: ImageSource;

TMessyFooterProps

  hideEmoji?: boolean;
  hideFooterAction?: boolean;
  Send?: React.ReactNode;
  Emoji?: React.ReactNode; // button for click to open emoji picker
  onSend?: (message?: TMessyMessage) => Promise<void> | void;
  inputProps?: TextInputProps;
  ExtraLeft?: React.ReactNode;
  ExtraActionLeft?: React.ReactNode;
  renderFooter?: FC<TMessyFooterProps>;
  renderFooterAction?: FC<TMessyFooterProps>;

TMessageProps

  hideOwnerAvatar: boolean;
  hidePartnerAvatar: boolean;
  onPress?: (message: TMessyMessageProps) => Promise<void> | void;
  onLongPress?: (message: TMessyMessageProps) => Promise<void> | void;

TBaseModule

  Image?: FC<ImageProps>;
  Text?: FC<TextProps>;
  Video?: FC;
  Cache: {
    get: (key: string) => any;
    set: (key: string, value: any) => void;
  };

Props

• useInBottomSheet(boolean): default false
• loading(boolean): loading status
• messages(TMessyMessage[]): list of messages
• user(TUser): sender information;
• theme: (TColor): custom theme for message;
• footerProps(TMessyFooterProps): Custom props for Element below list messages;
• listProps(TListProps): custom flatlist props and onPress event;
• messageProps(TMessageProps);
• parsedShape(ParseShape[]): Custom parse patterns for react-native-parsed-text ;
• showDateTime(boolean): show created time of message;
• renderLoading(FC<{}>): component when loading list message;
• renderMessageSystem(FC<{ data?: TMessyMessage }>): custom system message;
• renderMessage((data: TMessyMessageProps) => JSX.Element): custom whole message item view;
• renderAvatarFC<{ user?: TUser }>: custom ;
• renderMessageText((data: TMessyMessageProps) => JSX.Element): custom text message;
• renderMessageAudio(data: TMessyMessageProps) => JSX.Element;
• renderMessageImage(data: TMessyMessageProps) => JSX.Element;
• renderMessageVideo(data: TMessyMessageProps) => JSX.Element;
• renderMessageDateTime((data: TMessyMessage) => JSX.Element): custom datetime value in message item
• renderMessageLocation: (data: TMessyMessageProps) => JSX.Element;
• renderMessageOther(data: TMessyMessageProps) => JSX.Element: Customize other message types that the library does not yet support
• BaseModule(TBaseModule);

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library