"chat bubble for react-native"
npm install react-native-chat-bubble

React Native Chat bubble is a simple lightweight component for your React Native Applications which uses react-native-svg and react-native-size-matters to create a highly customizable chat bubble for you with curved tail or without.
`react-native-chat-bubble has two peer dependencies:
react-native-svg and react-native-size-matters
You must install these alongside react-native-chat-bubble.
Install the package using npm or yarn:
`bash`
npm install react-native-chat-bubble react-native-svg react-native-size-matters
`bash`
yarn add react-native-chat-bubble react-native-svg react-native-size-matters
If you're using Expo, make sure to use the expo install command to install these packages to ensure compatibility with your Expo SDK version:
`bash
expo install react-native-chat-bubble
expo install react-native-svg
expo install react-native-size-matters
`Usage
`jsx
import ChatBubble from 'react-native-chat-bubble';
bubbleColor='#1084ff'
tailColor='#1084ff'
withTail={true}
onPress={() => console.log("Bubble Pressed!")}
>
`
Check the example
The SwipeableFlatList component accepts the following props:
If you don't pass onPress function, the chat bubble wrapper will be a View from react-native and you can also pass the rest of the ViewProps, which you can check here
If you pass the onPress function, the package will wrap the ChatBubble in Pressable from react-native to call your function when the user presses the message, so you can also pass the rest of the PressableProps, which you can check here
Prop to identify the message and therefore the alignment.
The message content.
stringstringboolean.withTail:
boolean
Prop which defines if the tail is displayed with your message. Defaults to true.hitSlop:
({top: number, bottom: number, left: number, right: number})
increase the touchable area of the chat bubble.maxWidth:
number
Maximum width of your chat bubble. When adjusting maxWidth this prop should be used instead of a style override, in order to use moderateScale. Defaults to 250style:
StyleProp
Additional styles or style overrides for the chat bubble.License
This project is licensed under the MIT License.
Dependencies
- react-native-svg
- react-size-matters
react-native-chat-bubble has a peer dependency on react-native-svg and react-native-size-matters. It will be installed automatically when you install this package. However, please ensure that your project meets the requirements for both of these libraries.
$3
`jsximport React from 'react';
import { Alert, Image, StyleSheet, Text, View } from 'react-native';
import ChatBubble from "react-native-chat-bubble";
const App: React.FC = () => {
return (
isOwnMessage={true}
bubbleColor="#1084ff"
tailColor="#1084ff"
withTail={true}
style={styles.chatBubble}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas atque repudiandae alias nisi aut? Ut perferendis similique non vel! Blanditiis nihil enim culpa ex numquam commodi saepe? Non, ex recusandae.
onPress={() => Alert.alert("Hi", "This is alert")}
isOwnMessage={false}
bubbleColor="lightgrey"
withTail={true}
style={styles.chatBubble}
>
hi.
isOwnMessage={true}
bubbleColor="#1084ff"
tailColor="#1084ff"
withTail={true}
style={styles.chatBubble}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas atque repudiandae alias nisi aut? Ut perferendis similique non vel! Blanditiis nihil enim culpa ex numquam commodi saepe? Non, ex recusandae.
isOwnMessage={true}
bubbleColor="#1084ff"
tailColor="#1084ff"
withTail={true}
style={styles.chatBubble}
>
resizeMode="contain"
resizeMethod="resize"
source={{uri: "https://raw.githubusercontent.com/GFean/rn-gesture-swipeable-flatlist-example/main/assets/favicon.png"}}/>
);
};
const styles = StyleSheet.create({
container: {
marginTop:100,
flex: 1,
paddingHorizontal:10
},
chatBubble: {
padding: 10,
},
text: {
color: 'black',
},
textOwn: {
color: 'white',
},
});
export default App
``