Sample Application - Hiccups

[Kamlesh Rao]

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

[Lucas Bassetti]

Hi,

Thank you for this guide! 👍

I will considering put more details in the readme.