Rn-simple-bubble-chat NPM

React Native Simple Chat Bubble Component

A highly customizable chat bubble component for React Native applications with smooth animations, flexible styling, TypeScript support, and image handling capabilities.

Features

🎨 Fully customizable styles and colors
⚡ Smooth animations
📱 Responsive design
💪 TypeScript support
🔄 Optimized performance with React.memo
📏 Flexible dimensions
⏰ Timestamp support
🖼️ Image support with customizable styling

Installation

npm install rn-simple-bubble-chat
# or
yarn add rn-simple-bubble-chat

Dependencies

{
  "react": ">=16.8.0",
  "react-native": ">=0.60.0"
}

Basic Usage

import ChatBubble from "rn-simple-bubble-chat";

const SimpleExample = () => {
  return (
    <ChatBubble message="Hello World!" isUser={true} timestamp="12:30 PM" />
  );
};

Props

Core Props

Prop	Type	Required	Description
message	string	Yes	The message content to display
isUser	boolean	Yes	Determines if the message is from the user (true) or bot (false)
timestamp	string	Yes	The timestamp to display with the message
imageUri	string	No	Optional URI for displaying an image in the chat bubble

Style Props

Prop	Type	Description
containerStyle	ViewStyle	Additional styles for the container
userBubbleStyle	ViewStyle	Additional styles for user bubbles
receiverBubbleStyle	ViewStyle	Additional styles for receiver bubbles
messageTextStyle	TextStyle	Additional styles for message text
timestampStyle	TextStyle	Additional styles for timestamp text
imageStyle	ImageStyle	Additional styles for the image

Color Props

Prop	Type	Default	Description
userBubbleColor	string	'#007AFF'	Background color for user bubbles
receiverBubbleColor	string	'#F2F2F7'	Background color for receiver bubbles
userTextColor	string	'#FFFFFF'	Text color for user messages
receiverTextColor	string	'#000000'	Text color for receiver messages
timestampColor	string	'rgba(0,0,0,0.5)'	Color for timestamp text

Animation Props

Prop	Type	Default	Description
fadeAnimationDuration	number	300	Duration of fade animation in ms
springAnimationConfig	object	{ friction: 6, tension: 40 }	Spring animation configuration

Dimension Props

Prop	Type	Default	Description
maxWidth	number/string	'80%'	Maximum width of bubble
minWidth	number/string	'20%'	Minimum width of bubble
bubblePadding	number	12	Padding inside bubble
borderRadius	number	16	Border radius of bubble

Examples

Basic Message with Image

const ImageExample = () => {
  return (
    <ChatBubble
      message="Check out this photo!"
      isUser={true}
      timestamp="12:31 PM"
      imageUri="https://example.com/image.jpg"
    />
  );
};

Custom Colors Example

const ColorExample = () => {
  return (
    <ChatBubble
      message="Custom color bubble"
      isUser={true}
      timestamp="12:31 PM"
      userBubbleColor="#4CAF50"
      userTextColor="#FFFFFF"
      timestampColor="#666666"
    />
  );
};

Custom Styles Example

const StyleExample = () => {
  return (
    <ChatBubble
      message="Styled message"
      isUser={true}
      timestamp="12:33 PM"
      containerStyle={{
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
      }}
      messageTextStyle={{
        fontSize: 18,
        fontWeight: "bold",
      }}
      imageStyle={{
        width: 250,
        height: 150,
        borderRadius: 12,
      }}
    />
  );
};

Chat Screen Implementation

const ChatScreenExample = () => {
  const messages = [
    {
      id: 1,
      text: "Hi there!",
      isUser: true,
      timestamp: "12:01 PM",
    },
    {
      id: 2,
      text: "Hello! How can I help you today?",
      isUser: false,
      timestamp: "12:02 PM",
      imageUri: "https://example.com/welcome-image.jpg",
    },
  ];

  return (
    <View style={{ flex: 1, padding: 16 }}>
      {messages.map((msg) => (
        <ChatBubble
          key={msg.id}
          message={msg.text}
          isUser={msg.isUser}
          timestamp={msg.timestamp}
          imageUri={msg.imageUri}
        />
      ))}
    </View>
  );
};

Advanced Customization

Theme Integration

const ThemeExample = () => {
  const theme = {
    light: {
      userBubble: "#007AFF",
      receiverBubble: "#F2F2F7",
      userText: "#FFFFFF",
      receiverText: "#000000",
      timestamp: "#666666",
    },
    dark: {
      userBubble: "#0A84FF",
      receiverBubble: "#2C2C2E",
      userText: "#FFFFFF",
      receiverText: "#FFFFFF",
      timestamp: "#999999",
    },
  };

  const isDarkMode = false;
  const currentTheme = isDarkMode ? theme.dark : theme.light;

  return (
    <ChatBubble
      message="Theme-based styling"
      isUser={true}
      timestamp="12:37 PM"
      userBubbleColor={currentTheme.userBubble}
      userTextColor={currentTheme.userText}
      timestampColor={currentTheme.timestamp}
    />
  );
};

Performance Optimization

The component uses React.memo to prevent unnecessary re-renders. For optimal performance:

Memoize callback functions using useCallback
Use unique keys when rendering lists of chat bubbles
Avoid unnecessary prop changes
Consider image size optimization when using imageUri

const OptimizedExample = () => {
  const memoizedStyle = useMemo(
    () => ({
      marginVertical: 8,
    }),
    []
  );

  return (
    <ChatBubble
      message="Optimized message"
      isUser={true}
      timestamp="12:38 PM"
      containerStyle={memoizedStyle}
    />
  );
};