1.0.3 • Published 5 months ago

rn-simple-bubble-chat v1.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

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

PropTypeRequiredDescription
messagestringYesThe message content to display
isUserbooleanYesDetermines if the message is from the user (true) or bot (false)
timestampstringYesThe timestamp to display with the message
imageUristringNoOptional URI for displaying an image in the chat bubble

Style Props

PropTypeDescription
containerStyleViewStyleAdditional styles for the container
userBubbleStyleViewStyleAdditional styles for user bubbles
receiverBubbleStyleViewStyleAdditional styles for receiver bubbles
messageTextStyleTextStyleAdditional styles for message text
timestampStyleTextStyleAdditional styles for timestamp text
imageStyleImageStyleAdditional styles for the image

Color Props

PropTypeDefaultDescription
userBubbleColorstring'#007AFF'Background color for user bubbles
receiverBubbleColorstring'#F2F2F7'Background color for receiver bubbles
userTextColorstring'#FFFFFF'Text color for user messages
receiverTextColorstring'#000000'Text color for receiver messages
timestampColorstring'rgba(0,0,0,0.5)'Color for timestamp text

Animation Props

PropTypeDefaultDescription
fadeAnimationDurationnumber300Duration of fade animation in ms
springAnimationConfigobject{ friction: 6, tension: 40 }Spring animation configuration

Dimension Props

PropTypeDefaultDescription
maxWidthnumber/string'80%'Maximum width of bubble
minWidthnumber/string'20%'Minimum width of bubble
bubblePaddingnumber12Padding inside bubble
borderRadiusnumber16Border 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}
    />
  );
};

Best Practices

Message Length

  • Consider implementing message truncation for very long messages
  • Use appropriate maxWidth values for your layout

Images

  • Optimize images before loading them into chat bubbles
  • Consider implementing image lazy loading for better performance
  • Handle image loading errors gracefully

Animations

  • Adjust animation timing based on your app's needs
  • Consider disabling animations for bulk message loading

Accessibility

  • Provide meaningful accessibility labels
  • Ensure sufficient color contrast
  • Add appropriate alt text for images

Styling

  • Use consistent styling across your app
  • Consider platform-specific styling differences
  • Test bubble layouts with various image sizes

Contributing

We welcome contributions! Please follow these steps:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

This project is licensed under the MIT License