1.0.3 • Published 5 months ago
rn-simple-bubble-chat v1.0.3
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}
/>
);
};
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:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
License
This project is licensed under the MIT License