A react native chatbot component to create conversation chats. Based on react-simple-chatbot.
npm install https://github.com/bruunoromero/react-native-chatbot-expo --save
yarn add https://github.com/bruunoromero/react-native-chatbot-expo
import ChatBot from "bruunoromero-react-native-chatbot-expo";
const steps = [
{
id: "0",
message: "Welcome to react chatbot!",
trigger: "1",
},
{
id: "1",
message: "Bye!",
end: true,
},
];
<ChatBot steps={steps} />;
Name | Type | Default | Description |
---|---|---|---|
avatarStyle |
PropTypes.object |
The style object to use to override the avatar element | |
avatarWrapperStyle |
PropTypes.object |
The style object to use to override the avatar surrounding element | |
botAvatar |
PropTypes.string |
img |
Bot image source |
botBubbleColor |
PropTypes.string |
#6E48AA |
Bot bubble color |
botDelay |
PropTypes.number |
1000 |
The delay time of bot messages |
botFontColor |
PropTypes.string |
#fff |
Bot font color |
bubbleStyle |
PropTypes.object |
The style object to use to override the bubble element | |
optionStyle |
PropTypes.object |
The style object to use to override the option container | |
optionElementStyle |
PropTypes.object |
The style object to use to override the option element | |
optionFontColor |
PropTypes.string |
Option font color | |
optionBubbleColor |
PropTypes.string |
Option bubble color | |
className |
PropTypes.string |
Add a class name to root element | |
contentStyle |
PropTypes.object |
The style object to use to override the scroll element | |
customDelay |
PropTypes.number |
1000 |
The delay time of custom messages |
customStyle |
PropTypes.object |
The style object to use to override the custom step element | |
footerStyle |
PropTypes.object |
The style object to use to override the footer element | |
handleEnd({ renderedSteps, steps, values }) |
PropTypes.func |
The callback function when chat ends | |
headerComponent |
PropTypes.element |
Header component for the chatbot | |
hideUserAvatar |
PropTypes.bool |
false |
If true the user avatar will be hidden in all steps |
inputStyle |
PropTypes.object |
The style object to use to override the input element | |
keyboardVerticalOffset |
PropTypes.number |
ios ? 44 : 0 |
Vertical offset of keyboard view. Check keyboardVerticalOffset |
placeholder |
PropTypes.string |
Type the message ... |
Chatbot input placeholder |
steps |
PropTypes.array |
The chatbot steps to display | |
style |
PropTypes.object |
The style object to use to override the submit button element | |
submitButtonStyle |
PropTypes.object |
The style object to use to override the button element | |
submitButtonContent |
PropTypes.string or PropTypes.element |
SEND |
The string or object to use to override the button content |
userAvatar |
PropTypes.string |
img |
User image source |
userBubbleStyle |
PropTypes.string |
img |
The style object to use to override the user's bubble element |
userBubbleColor |
PropTypes.string |
#fff |
User bubble color |
userDelay |
PropTypes.number |
1000 |
The delay time of user messages |
userFontColor |
PropTypes.string |
#4a4a4a |
User font color |
scrollViewProps |
PropTypes.object |
#4a4a4a |
Use to override scroll view props |
Name | Type | Required | Description |
---|---|---|---|
id |
String / Number |
true |
The step id. Required for any step |
message |
String / Function |
true |
The text message. If function, it will receive ({ previousValue, steps }) params |
trigger |
String / Number / Function |
false |
The id of next step to be triggered. If function, it will receive ({ value, steps }) params |
avatar |
String |
false |
the avatar to be showed just in this step. Note: this step must be a step that avatar appears |
delay |
Number |
false |
set the delay time to message be shown |
end |
Boolean |
false |
if true indicate that this step is the last |
inputAttributes |
Object |
Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete) | |
metadata |
Object |
Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format |
Example:
{
id: '1',
message: 'Hello World',
trigger: '2',
},
{
id: '2',
message: ({ previousValue, steps }) => 'Hello',
end: true,
}
Name | Type | Required | Description |
---|---|---|---|
id |
String / Number |
true |
The step id. Required for any step |
user |
Boolean |
true |
if true indicate that you waiting a user type action |
trigger |
String / Number / Function |
false |
The id of next step to be triggered. If function, it will receive ({ value, steps }) params |
validator |
String / Number |
false |
if user attribute is true you can pass a validator function to validate the text typed by the user |
end |
Boolean |
false |
if true indicate that this step is the last |
inputAttributes |
Object |
Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete) | |
metadata |
Object |
Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format |
Example:
{
id: '1',
user: true,
inputAttributes: {
keyboardType: 'email-address'
},
end: true,
}
Name | Type | Required | Description |
---|---|---|---|
id |
String / Number |
true |
The step id. Required for any step |
options |
Array |
true |
Array of options with { label, value, trigger } properties |
end |
Boolean |
false |
if true indicate that this step is the last |
inputAttributes |
Object |
Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete) | |
metadata |
Object |
Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format |
Example:
{
id: '1',
options: [
{ value: 1, label: 'Number 1', trigger: '3' },
{ value: 2, label: 'Number 2', trigger: '2' },
{ value: 3, label: 'Number 3', trigger: '2' },
],
}
Name | Type | Required | Description |
---|---|---|---|
id |
String / Number |
true |
The step id. Required for any step |
component |
Component |
true |
Custom React Component |
replace |
Boolean |
false |
if true indicate that component will be replaced by the next step |
waitAction |
Boolean |
false |
if true indicate that you waiting some action. You must use the triggerNextStep prop in your component to execute the action |
asMessage |
Boolean |
false |
f true indicate that the component will be displayed as a text step |
trigger |
String / Number / Function |
false |
The id of next step to be triggered. If function, it will receive ({ value, steps }) params |
delay |
Number |
false |
set the delay time to component be shown |
end |
Boolean |
false |
if true indicate that this step is the last |
inputAttributes |
Object |
Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete) | |
metadata |
Object |
Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format |
Example:
{
id: '1',
component: <CustomComponent />
trigger: '2'
}
Name | Type | Required | Description |
---|---|---|---|
id |
String / Number |
true |
The step id. Required for any step |
update |
String / Number |
true |
The id of next step to be updated |
trigger |
String / Number / Function |
false |
The id of next step to be triggered. If function, it will receive ({ value, steps }) params |
inputAttributes |
Object |
Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete) | |
metadata |
Object |
Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format |
Example:
{
id: '1',
options: [
{ value: 1, label: 'Number 1', trigger: '3' },
{ value: 2, label: 'Number 2', trigger: '2' },
{ value: 3, label: 'Number 3', trigger: '2' },
],
}
When you declare a custom step, you need indicate a custom React Component to be rendered in the chat. This custom component will receive the following properties.
Name | Type | Description |
---|---|---|
previousStep |
PropTypes.object |
Previous step rendered |
step |
PropTypes.object |
Current step rendered |
steps |
PropTypes.object |
All steps rendered |
triggerNextStep({ value, trigger }) |
PropTypes.func |
Callback function to trigger next step when user attribute is true. Optionally you can pass a object with value to be setted in the step and the next step to be triggered |
inputAttributes |
Object |
Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete) |
metadata |
Object |
Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format |
Please check the contributing guide
Lucas Bassetti |
See also the list of contributors who participated in this project.
If you liked this project, you can donate to support it ❤️
MIT · Lucas Bassetti