Hi Lucas! Thanks for providing this documentation, I would like to ask how does Validator works. Is it possible to provide an example for it? Thanks!

EDIT: I found the documentation!

Description

After creating a step with a custom component (id 3) and then display a message after it (id 4), the trigger for this step with the message is not triggering, which is currently set to five. I have tried changing the trigger and still getting the same issue.

import React, {Component} from 'react';
import ChatBot from 'react-native-chatbot';
import MedicalCondition from './medical_condition';

const DOCTOR_NAME = 'Dr Costa';
export default class SymptomsBot extends Component {
  constructor(props) {
    super(props);

    let steps = [
      {
        id: '0',
        message: `Hello, ${DOCTOR_NAME} here, what seems to be the problem?`,
        trigger: '1',
      },
      {
        id: '1',
        user: true,
        inputAttributes: {
          keyboardType: 'default',
        },
        trigger: '2',
        validator: value => {
          if (!value) return 'Please try again!';
          else {
            return true;
          }
        },
      },
      {
        id: '2',
        trigger: '3',
        message: `Thanks, let me take a look for you...`,
      },
      {
        id: '3',
        component: <MedicalCondition stepIndex={1} />,
        replace: true,
        waitAction: true,
        asMessage: true,
        trigger: '4'
      },
      {
        id: '4',
        message: ({steps}) =>
        `It seems like you may have ${steps[3].value}. Would like to inform your doctor?`,
        trigger: '5',
      },
      {
        id: '5',
        options: [
          {value: 1, label: 'Yes', trigger: '6'},
          {value: 2, label: 'No', trigger: '6'},
          {value: 3, label: 'Try again', trigger: '6'},
        ],
      },
      {
        id: '6',
        message: `Thanks, let me take a look for you...`,
        end: true
      },
    ];

    this.state = {
      steps: steps,
    };
  }

  render() {
    return <ChatBot steps={this.state.steps} />;
  }
}

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {getSymptom} from '_services';

export default class MedicalCondition extends Component {
  constructor(props) {
    super(props);

    this.state = {
      stepIndex: this.props.stepIndex,
      loading: true,
      value: '',
      trigger: false,
      steps: this.props.steps,
      waitAction: this.props.step.waitAction
    };

  }

  componentDidMount() {
    getSymptom(this.props.steps[this.state.stepIndex].value)
      .then(response => {
        this.setState({loading: false, value: response.data.condition, trigger: this.props.step.trigger}, () => {
          this.props.triggerNextStep(this.state);
        });
      })
      .catch(err => {
        this.setState({
          loading: false,
          value: 'We seems to be experiencing an issue.',
        });
        console.log(err);
      });
  }

  render() {
    return null;
  }
}

MedicalCondition.propTypes = {
  steps: PropTypes.object,
  triggerNextStep: PropTypes.func,
  step: PropTypes.object,
  previousStep: PropTypes.object,
}

MedicalCondition.defaultProps = {
  steps: undefined,
  triggerNextStep: undefined,
  step: undefined,
  previousStep: undefined,
}

Screenshots

I don't know where the problem is, but I have already tried many alternative solutions.

Can anybody help me?

Description

Add here all the descriptions that you think it will be useful and valuable to this issue.
iOS keyboard issue; ChatComponent is wrapped in a View with flex:1. Content displays fully when keyboard is hidden.

Screenshots

Add screenshots case needes, otherwise delete this section.

can be used the as rendere for a normal chat?

Feature Request.

It would be great if the Send button had 2 colors - active and disabled.
When a user is able to type in the Text Input, then the Send button would change to the active color.
Otherwise it would be the inactive color. This would remove the confusion for the user when there are options to choose from vs when they are supposed to enter text themselves.

Related to this: It would also be great to be able to pass a component or style object into the options to style them differently from the messages sent by the bot.

Description

Requiring a styling lib for a component is kinda a burden.
Add here all the descriptions that you think it will be useful and valuable to this issue.
styled-components adds a extra layer that isn't needed for react-native styling imo.

Is it possible to perform an integration using an existing bot in any of these tools?

Description

So I followed the steps to run the project, copied the code as is from the installation section " https://lucasbassetti.com.br/react-simple-chatbot/#/docs/installation" however, I keep building Javascript bundle keeps failing.

Screenshots

Description

react-native-cli: 2.0.1
react-native: 0.58.3
node v10.15.1
Mac OS 10.14.3 (18D42)

Hello i've a problem, i don't know why but I've referenceError: can't find variable ChatBot

my code look like that :

import ChatBot from 'react-native-chatbot';
 render() {
    const steps = [
      {
        id: '0',
        message: 'Welcome to react chatbot!',
        trigger: '1',
      },
      {
        id: '1',
        message: 'Bye!',
        end: true,
      },
    ];
    return (
      <Container>
        <HeaderTab />
        {/* <BotBody /> */}
        <Content>
       <ChatBot steps={steps} /> 
          <Text>Coucou</Text>
        </Content>
        <FooterTabs />
      </Container>
    );
  }
}

just like your exemple, I RM node module and install again but no the ReferenceErro still here

Screenshots

Add screenshots case needes, otherwise delete this section.

Description

I'm just wondering what the difference between this and react-simple-chatbot is. Why do I chose this over that? The gif on simple-chatbot's readme is really nice, one here would be super helpful as well, especially if it illustrates the differences.

Hi Lucas,

Just to let you know that I've forked your project to make it work with Expo.

In substance, it replaces the library react-native-loader with react-native-three-dots-loader in Loading.js

It is available here https://github.com/jzarca01/react-native-chatbot-expo

Hey Lucas, awesome project here! I've been stumped for a few days trying to retrieve a conversation from AsyncStorage and set it as the current renderedSteps state, so that old conversations can be loaded.

I've got it all working well, except for conversations that contain a Custom Component, for example a link or image. When trying to load a conversation that has a Custom Component in it, the following error is thrown:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

This error is located at:
    in RCTView (at View.js:113)
    in View (created by Styled(View))
    in Styled(View) (at CustomStep.js:45)
    in CustomStep (at ChatBot.js:460)
    in RCTView (at View.js:113)
    in View (at ScrollView.js:748)
    in RCTScrollView (at ScrollView.js:856)
    in ScrollView (at ChatBot.js:545)
    in RCTView (at View.js:113)
    in View (created by Styled(View))
    in Styled(View) (at ChatBot.js:541)
    in ChatBot (at Chat.js:28)
    in Chat (at SceneView.js:31)

The Custom Component Container renders and has the Loading dots displaying, but then when it actually tries to load the content of the component the red error screen comes up with the error code pasted above, both in emulators and on actual devices.

I've tried changing how all of the components are exported and imported from files to be as explicit as possible, but the error continues to be thrown. Despite the error message, I don't think it's an export/import issue, because Custom Components are being displayed normally when triggered manually through conversation.

The Custom Component object data parsed from AsyncStorage looks like this in the logs:

Object {
    "component": Object {
      "$$typeof": 60103,
      "_owner": null,
      "_store": Object {},
      "key": null,
      "props": Object {
        "activeOpacity": 0.2,
        "children": Object {
          "$$typeof": 60103,
          "_owner": null,
          "_store": Object {},
          "key": null,
          "props": Object {
            "accessible": true,
            "allowFontScaling": true,
            "children": "Learn more about the Arch of Reunification",
            "ellipsizeMode": "tail",
            "style": Object {
              "color": "#7c9ba5",
            },
          },
          "ref": null,
        },
      },
      "ref": null,
    },

Note that when this object is viewed in the logs through normal ChatBot conversation that the "ref"s at the bottom have a little bit more associated data:

      "ref": null,
        "type": [Function anonymous],
      },
      "onPress": [Function onPress],
    },
    "ref": null,
    "type": [Function anonymous],

Here is the function used to retrieve the renderedSteps from AsyncStorage and set them as current state:

async retrievedSteps() {
  try {
    const storedRenderedSteps = await AsyncStorage.getItem('storedRenderedSteps');
    const storedPreviousSteps = await AsyncStorage.getItem('storedPreviousSteps');
    const storedCurrentStep = await AsyncStorage.getItem('storedCurrentStep');
      if (storedRenderedSteps !== null) {
        const parsedRenderedSteps = JSON.parse(storedRenderedSteps);
        const parsedPreviousSteps = JSON.parse(storedPreviousSteps);
        const parsedCurrentStep = JSON.parse(storedCurrentStep);
        this.setState({
          previousStep: parsedPreviousSteps,
          currentStep: parsedCurrentStep,
          renderedSteps: parsedRenderedSteps,
        });
      }
  } catch (error) {
    Alert.alert(error);
  }
}

The Custom Component steps are pre-defined locally within the 'steps' array and are not being pulled from a server or remotely. Here is an example:

  {
    id: 'Picture 1',
    component: (
      <Image
        style={{ width: 325, height: 233, alignSelf: 'center', borderRadius: 5 }}
        source={require('.././assets/photoOne.png')}
      />
    ),
    triggerNextStep: `Picture 2`,
  },

Thanks for any help you're able to give in solving this issue!

Description

File ChatBot.js still uses componentWillMount() to run some of its logic.

But this lifecycle method is not recommended to be used anymore.

From what I looked into the code, there are no side effects running inside willMount() but wouldn't it be interesting to update the code, so we wouldn't face any warning when developing an app?

Screenshots

I see awesome stuff developed in the package web version of this package wondering if it is possible to transfer those updates to rn version.

Description

Only with import this error is already returned. I'm using the expo

Screenshots

Need help please...

Description

(0, s.keyframes) is not a function

Screenshots

I noticed on travis I see build failing. I did have problems at first install styled-components as a regular dependency. I, furthermore, got warning with prop-types.

Description

Getting issue while running application

can we ruse react-native chatbot in react-native version 0.62?

Screenshots

Hey Lucas,

I would like to add a feature that allows already mounted chat to add new steps.

Brief

Once steps props is set and Chatbot mounted, I could not find a way to update its internal state.steps by injecting bunch of new steps which one could then trigger.

Proposed feature will extend current capability of pre-scripted chat steps to receive new steps dynamically. With this one can hook it up with a "bot server" that can respond with suggested step(s). This step(s) gets injected into current state.steps which can then be triggered.

Solution

add new method addNewSteps(newStepData: Array){ .. }
process will be similar to instantiating steps onComponentWillMount.
it will parse incoming newStepsData into local var newSteps which then gets merged with
this.state.steps

thoughts?

Cheers.

ChatBotContainer.js`: Module does not exist in the module map

Description

Add here all the descriptions that you think it will be useful and valuable to this issue.

Adding recognitionEnable={true} options to chatbot doesnt enable speech recognition.

render() { return ( <ChatBot recognitionEnable={true} steps={steps} /> ); }

Screenshots

Add screenshots case needes, otherwise delete this section.

As soon as I install and import react-native-chatbot, I am getting following error thrown. It appears to be some missing item in the package, please look into this matter and let me know how to fix this up.

`// import dependencies here
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import ChatBot from 'react-native-chatbot';

// import screens here

// import components here

const steps = [
  {
    id: '0',
    message: 'Welcome to react chatbot!',
    trigger: '1',
  },
  {
    id: '1',
    message: 'Bye!',
    end: true,
  },
];

export default class Chat extends Component {
  render() {
    return (
      <View>

      </View>
    );
  }
}`

Description

I want to add the chatbot as a little bubble in the corner same with the normal react app you have. I donated in that repository bro, it is a good helpful code! But i'm lost here with trying to do this.

Screenshots

Description

When using custom component the container has white background with padding

Screenshots

need the ability to override CustomStepContainer props.

Description

Can you hide the keyboard for certain steps? The screen for my app looks crowded otherwise.

If I using component with props "asMessage: true" like below
{
id: 'customComponent',
component: (),
asMessage: true,
trigger: 'nextTrigger',
}

the ChatBot class, renderStep function use TextStep with no previousStep will pass to custom component(use previousValue)
In TextStep class, renderMessage function use and pass previousStep again so neither previousStep or previousValue can be use in custom component.

So please fix that (pass previousStep to TextStep or pass previousValue instead of previousStep at renderMessage() function)

sorry for my bad English.

Description

Hey there! Would be great to change the fontFamily for the bubbles. :) Or is it already possible?

Screenshots

Add screenshots case needes, otherwise delete this section.

Olá,

Eu comecei um projeto do zero e incluir somente o react-native-chatbot e mesmo assim continua com erro, alguém pode me ajudar ?

já fiz a instalação do react-native-community pelo link https://github.com/react-native-community/art já fiz a instalação manual e mesmo assim não tive sucesso e fica com o erro do print abaixo.

Do you have any example of a Dynamic Step component, which brings data from REST API and injects them into the react native chat bot?

Thanks!

Description

I am trying to display a link in the message. It works in the debug mode but when I try to test it release mode it doesn't display

Below is the code for reference

steps={[
id: 'Claims & Refund',
component: <Link />,
asMessage: true,
trigger: 'auto-reply'
]}

class Link extends Component {
constructor(props) {
super(props);
this.state = {

};

}

componentWillMount() {
const { steps, step } = this.props;
}

render() {
return (

    {
      <View>
        <Text>Please visit this link</Text>
        <Text>About xxx Trade</Text>
      </View>
    }

    {
      this.props.step.id == 'Cargo Clearance' && <View>
        <Text style={{ color: 'white' }}> Please visit this link </Text>
        <Text style={{
          color: 'white', textAlign: 'center',
          fontSize: 20
        }}
          onPress={() => Linking.openURL('http://www.xxx.ae/en/service/service-provider/dp-world/cargo-clearance.html?serviceType=External')}>
          Cargo Clearance</Text>
      </View>
    }

    {
      this.props.step.id == 'Case Registration' && <View>
        <Text style={{ color: 'white' }}>Please visit this link</Text>
        <Text style={{
          color: 'white', textAlign: 'center',
          fontSize: 20
        }}
          onPress={() => Linking.openURL('http://www.xxx.ae/en/service/service-provider/dp-world/case-registration.html?serviceType=External')}>
          Case Registration</Text>
      </View>
    }

    {
      this.props.step.id == 'Claims & Refund' && <View>
        <Text style={{ color: 'white' }}>Please visit this link</Text>
        <Text style={{
          color: 'white', textAlign: 'center',
          fontSize: 20
        }}
          onPress={() => Linking.openURL('http://www.xxx.ae/en/service/service-provider/dp-world/claims-and-refund.html?serviceType=External')}>
          Claims and Refund</Text>
      </View>
    }

    {
      this.props.step.id == 'Clearance Ports' && <View>
        <Text style={{ color: 'white' }}>Please visit this link </Text>
        <Text style={{
          color: 'white', textAlign: 'center',
          fontSize: 20
        }}
          onPress={() => Linking.openURL('http://www.xxx.ae/en/service/service-provider/dp-world/clearance-ports.html?serviceType=External')}>
          Clearance Ports</Text>
      </View>
    }

  </View>
);

}
}
Link.propTypes = {
steps: PropTypes.object,
step: PropTypes.object,
};

Link.defaultProps = {
steps: undefined,
step: undefined,
};

Any inputs ?

Description

Title says it all. Is there a way to hide the bot avatar? The user avatar has hideUserAvatar, but I don't see anything for the bot.

Hello guys,

I am facing an issue. Can you please look for me.

https://stackoverflow.com/questions/58027518/how-to-resolve-unexpected-token-error-while-importing-chatbot-in-react-native-we

If you guys need more details please let me know.
Thanks.

Description

Hello, it appears that the theme isn't working on iOS simulator.

##Versions
ios simulator: Version 10.0
"react": "16.2.0",
"react-native": "0.52.0",
"react-native-chatbot": "0.0.1-alpha.9",
"styled-components": "^3.2.3"

##Code
`import React from 'react';
import { ThemeProvider } from 'styled-components';
import ChatBot from 'react-native-chatbot';

// all available props
const theme = {
background: '#f5f8fb',
fontFamily: 'Helvetica Neue',
headerBgColor: '#EF6C00',
headerFontColor: '#fff',
headerFontSize: '15px',
botBubbleColor: '#EF6C00',
botFontColor: '#fff',
userBubbleColor: '#fff',
userFontColor: '#4a4a4a',
};

const steps = [
{
id: '1',
message: 'Hello World',
end: true,
},
];

const App = () => (



);

export default App;`

Description

I need to take action when I choose any of the bot's options.

example: option 1 and option 2, when I choose the option 1 I need to make a request on an api, step 2 I need to make a console.log ("...").

There is no way to add custom styles for:

1. Bot avatar container.
2. Messages texts.

I wanted to change the bot avatar and the current bot avatar container has the background color set and there seem to be no way to override the styles.

And for the messages texts, needed to change the font and the font sizes.

I'm having trouble getting Custom Components to communicate with state or props, whenever I try they always come up as 'undefined'. I think it's because Custom Components technically exist outside of the parent Component (class), and therefore do not share state?

Examples: Custom Component that is a button that can setState on parent Component by passing props up, or receive props from parent Component to use in the Custom Component. Non-dynamic props can be passed, but not component state.

Example: <Button tree={'green'} /> works, but <Button props={this.state.tree} /> returns undefined.

If this is outside of the scope of the project, could you point me in the right direction in the code base to start implementing this? Or would you suggest using something like Redux instead? Thanks!

Edit: I think this is also preventing triggerNextStep() from working as well? The below configuration does not trigger the next step, and throws an 'undefined' error as well:

  triggerNext = () => {
    this.props.triggerNextStep();
  }
  
  {
    id: 'Button',
    waitAction: true,
    component: (
      <BuyButton onPress={() => this.triggerNext()} />
    ),
    trigger: `Next Step`,
  },

In this module, we have a feature called selecting options.
In this case text field got disabled. I need a requirement in my app, that needs to allow selecting options and can give text as input through text field.
So can you please support me in this case, that how should I implement this feature in my app.
Regards,

I am trying to help convert the Web versions to RN. I have problems though. I can't get the environment setup exactly so I just used "react native init" and transferred the files over. Maybe using expo will alleviate this environment issue?

https://github.com/juanmndz/rnchatbotclone

Now with the edits I did:
I replace the code by comparing and contrasting the RN and Web version.
It seems to work well but the cache function is something I can't seem to work properly.

I tried for the past days to redit storage.js to work for RN but I figured out the underlying problem is an AsyncStorage storage will not work where it will be called in the componetwillMount from getData)_ in storage.js

Currently when cache is true, it will get the localstorage asynchronously but will load nothing bc componetwillMount.
https://github.com/juanmndz/rnchatbotclone/blob/master/lib/storage.js

With the data being return :

I tried doing with another local storage package but w/o async but I could not ever resolved my promise
https://github.com/juanmndz/rnchatbotclone/blob/master/lib/storagenonasync.js

So it would crash the app.

I really want to get this package up and running, but I have hit a wall atm. I would like to do an official pr if necessary. I just really excited about this package and wish for it to succeed as soon as it can.

When I'm using a custom component, it always shows tons of warning with all prop, pls show me how to get rid of those.

Failed prop type: the prop 'step' is marked as required in '...', but its value is 'undefined'
Failed prop type: the prop 'steps' is marked as required in '...', but its value is 'undefined'
Failed prop type: the prop 'previousStep' is marked as required in '...', but its value is 'undefined'
Failed prop type: the prop 'TriggerNextStep' is marked as required in '...', but its value is 'undefined'

I get a empty white bubble

Hello! I'm using the 'react-native-chatbot' component, I saw that there is a way to put custom components built into the chat. However, I can only put text and I need to put a video. Can anyone help?

Thanks for your awesome React Chatbot project! Looks like this repo was created 2 months ago. Was wondering if you plan on porting over the React chatbot project into React Native? Any ETA would be greatly appreciated :-)

Description

I have implemented the react-native-chatbot and within the steps array, I set end: false on every step except the last one, where it is set to true. Yet, as soon as the ChatBot is loaded, my handleEnd function is called. Any ideas what I can do about this?

Description

Hi there, I need to use async / await functions inside the validator and trigger functions in chatbot. Is there a way to do this ?

Hi Lucas looking very cool :) thank you for making this.

is it possible to load previous conversation, like typically any chat application does?

For a newbie, there seems to be confusion to setup this application smoothly. It may be the environment related issues or the way React Native application is created, is causing the issues.

Can you please let me know if I am performing the right approach to get Demo App working?

My Environment:

OS: Ubuntu 16.04 LTS 
node: v8.9.4 
npm: 5.6.0 
react-native-cli: 2.0.1
react-native: 0.52.0

Steps to reproduce my issue(s) and the fixes I have done:

Part 1 - Get the default React Native app running first

P1-0) Ensure that you have Android emulator setup done. I am using the Android Emulator, instead of physical device. The emulator should be running.

P1-1) On your development folder (mine is ~/dev), open Terminal and create a new react-native project

react-native init DemoChatApp

P1-2) Change your current directory to DemoChatApp folder. Run the following command:

react-native run-android

You should see the sample React Native app running. If all is well, press CTRL+C in Terminal to kill the application and move to Part 2 to add Chat Bot functionality into this app.

Part 2 - Setup React Native Chat Bot

P2-1) In the DemoChatApp folder, run the below command (npm breaks my app, hence I am using yarn):

yarn add react-native-chatbot

P2-2) Replace the default App.js code with the code giving in Usage section of README:

import ChatBot from 'react-native-chatbot';

const steps = [
  {
    id: '0',
    message: 'Welcome to react chatbot!',
    trigger: '1',
  },
  {
    id: '1',
    message: 'Bye!',
    end: true,
  },
];

<ChatBot steps={steps} />

P2-3) Run the application once again, using the below command:

react-native run-android

This time you will get error "Unable to resolve module 'styled-components'". To fix this issue, once again kill the application by pressing CTRL+C in Terminal.

P2-3) Run the below command to install style-components:

yarn add styled-components

P2-4) Run the application once again using the command shown in P2-3. This time you will see a new error "Can't find variable: React". To fix this, replace the entire code in App.js as shown below:

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import ChatBot from 'react-native-chatbot';

const steps = [
  {
    id: '0',
    message: 'Welcome to react chatbot!',
    trigger: '1',
  },
  {
    id: '1',
    message: 'Bye!',
    end: true,
  },
];

class App extends Component {
  render() {
    return (
      <View>
      <ChatBot steps={steps} />
      </View>
    );
  }
}

export default App;

P2-5) Refresh the Android App - by tapping R twice on Android Emulator. And finally the Chat Bot works

Description

Hi, I am trying to create a pull request to add option styling. In the contribution guidelines it says that we need to add unit tests etc to make sure everything is ok and that npm test passes. However, when I simply pull, and after doing npm install, the unit tests fail. This may be a bug, or I might be missing something to get set up correctly.
Please advise whether or not I am set up correctly.

This is the error I get:

react-native-chatbot/node_modules/react-native-mock/build/propTypes/LayoutPropTypes.js:21
 */var LayoutPropTypes={width:PropTypes.number,

TypeError: Cannot read property 'number' of undefined

Thanks,
kmbro