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

1npm install rn-simple-bubble-chat
2# or
3yarn add rn-simple-bubble-chat

Dependencies

1{
2  "react": ">=16.8.0",
3  "react-native": ">=0.60.0"
4}

Basic Usage

1import ChatBubble from "rn-simple-bubble-chat";
2
3const SimpleExample = () => {
4  return (
5    <ChatBubble message="Hello World!" isUser={true} timestamp="12:30 PM" />
6  );
7};

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

1const ImageExample = () => {
2  return (
3    <ChatBubble
4      message="Check out this photo!"
5      isUser={true}
6      timestamp="12:31 PM"
7      imageUri="https://example.com/image.jpg"
8    />
9  );
10};

Custom Colors Example

1const ColorExample = () => {
2  return (
3    <ChatBubble
4      message="Custom color bubble"
5      isUser={true}
6      timestamp="12:31 PM"
7      userBubbleColor="#4CAF50"
8      userTextColor="#FFFFFF"
9      timestampColor="#666666"
10    />
11  );
12};

Custom Styles Example

1const StyleExample = () => {
2  return (
3    <ChatBubble
4      message="Styled message"
5      isUser={true}
6      timestamp="12:33 PM"
7      containerStyle={{
8        shadowColor: "#000",
9        shadowOffset: { width: 0, height: 2 },
10        shadowOpacity: 0.25,
11        shadowRadius: 3.84,
12        elevation: 5,
13      }}
14      messageTextStyle={{
15        fontSize: 18,
16        fontWeight: "bold",
17      }}
18      imageStyle={{
19        width: 250,
20        height: 150,
21        borderRadius: 12,
22      }}
23    />
24  );
25};

Chat Screen Implementation

1const ChatScreenExample = () => {
2  const messages = [
3    {
4      id: 1,
5      text: "Hi there!",
6      isUser: true,
7      timestamp: "12:01 PM",
8    },
9    {
10      id: 2,
11      text: "Hello! How can I help you today?",
12      isUser: false,
13      timestamp: "12:02 PM",
14      imageUri: "https://example.com/welcome-image.jpg",
15    },
16  ];
17
18  return (
19    <View style={{ flex: 1, padding: 16 }}>
20      {messages.map((msg) => (
21        <ChatBubble
22          key={msg.id}
23          message={msg.text}
24          isUser={msg.isUser}
25          timestamp={msg.timestamp}
26          imageUri={msg.imageUri}
27        />
28      ))}
29    </View>
30  );
31};

Advanced Customization

Theme Integration

1const ThemeExample = () => {
2  const theme = {
3    light: {
4      userBubble: "#007AFF",
5      receiverBubble: "#F2F2F7",
6      userText: "#FFFFFF",
7      receiverText: "#000000",
8      timestamp: "#666666",
9    },
10    dark: {
11      userBubble: "#0A84FF",
12      receiverBubble: "#2C2C2E",
13      userText: "#FFFFFF",
14      receiverText: "#FFFFFF",
15      timestamp: "#999999",
16    },
17  };
18
19  const isDarkMode = false;
20  const currentTheme = isDarkMode ? theme.dark : theme.light;
21
22  return (
23    <ChatBubble
24      message="Theme-based styling"
25      isUser={true}
26      timestamp="12:37 PM"
27      userBubbleColor={currentTheme.userBubble}
28      userTextColor={currentTheme.userText}
29      timestampColor={currentTheme.timestamp}
30    />
31  );
32};

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

1const OptimizedExample = () => {
2  const memoizedStyle = useMemo(
3    () => ({
4      marginVertical: 8,
5    }),
6    []
7  );
8
9  return (
10    <ChatBubble
11      message="Optimized message"
12      isUser={true}
13      timestamp="12:38 PM"
14      containerStyle={memoizedStyle}
15    />
16  );
17};

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