React Native Chatbot: Build Engaging Conversational Apps

1import { GiftedChat } from 'react-native-gifted-chat'
2
3const MyChatComponent = () => {
4  const [messages, setMessages] = React.useState([]);
5
6  React.useEffect(() => {
7    setMessages([
8      {
9        _id: 1,
10        text: 'Hello developer',
11        createdAt: new Date(),
12        user: {
13          _id: 2,
14          name: 'React Native Bot',
15          avatar: 'https://placeimg.com/140/140/any',
16        },
17      },
18    ])
19  }, [])
20
21  const onSend = React.useCallback((messages = []) => {
22    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
23  }, [])
24
25  return (
26    <GiftedChat
27      messages={messages}
28      onSend={messages => onSend(messages)}
29      user={{
30        _id: 1,
31      }}
32    />
33  )
34}
35
36export default MyChatComponent;
37

1import Chat from 'react-native-chatbot-messenger'
2
3const MyChatComponent = () => {
4  const messages = [
5    {
6      _id: 1,
7      text: 'Hello! How can I help you?',
8      createdAt: new Date(),
9      user: {
10        _id: 2,
11        name: 'Bot',
12      },
13    },
14  ];
15
16  return (
17    <Chat
18      messages={messages}
19      onSend={(newMessage) => console.log('New Message:', newMessage)}
20      user={{ _id: 1, name: 'User' }}
21    />
22  );
23};
24
25export default MyChatComponent;
26

1import firebase from '@react-native-firebase/app';
2import '@react-native-firebase/database';
3
4const sendMessageToFirebase = (message) => {
5  firebase.database().ref('messages').push({
6    text: message.text,
7    createdAt: firebase.database.ServerValue.TIMESTAMP,
8    user: {
9      _id: message.user._id,
10    },
11  });
12};
13
14// Example usage:
15sendMessageToFirebase({ text: 'Hello from React Native!', user: { _id: 1 } });
16

1import React from 'react';
2import { View, Text, StyleSheet } from 'react-native';
3
4const ChatBubble = ({ text, isUser }) => {
5  return (
6    <View style={[styles.bubble, isUser ? styles.userBubble : styles.botBubble]}>
7      <Text style={isUser ? styles.userText : styles.botText}>{text}</Text>
8    </View>
9  );
10};
11
12const styles = StyleSheet.create({
13  bubble: {
14    borderRadius: 20,
15    padding: 10,
16    marginBottom: 5,
17  },
18  userBubble: {
19    backgroundColor: '#DCF8C6',
20    alignSelf: 'flex-end',
21  },
22  botBubble: {
23    backgroundColor: '#E5E5EA',
24    alignSelf: 'flex-start',
25  },
26  userText: {
27    color: 'black',
28  },
29  botText: {
30    color: 'black',
31  },
32});
33
34export default ChatBubble;
35

1import React, { useState } from 'react';
2import { View, TextInput, Button, FlatList, Text } from 'react-native';
3
4const ChatScreen = () => {
5  const [messages, setMessages] = useState([]);
6  const [inputText, setInputText] = useState('');
7
8  const handleSend = () => {
9    if (inputText.trim() !== '') {
10      setMessages([...messages, { text: inputText, sender: 'user' }]);
11      // Simulate bot response (replace with actual bot logic)
12      setTimeout(() => {
13        setMessages([...messages, { text: `You said: ${inputText}`, sender: 'bot' }]);
14      }, 500);
15      setInputText('');
16    }
17  };
18
19  return (
20    <View>
21      <FlatList
22        data={messages}
23        renderItem={({ item }) => <Text>{item.sender}: {item.text}</Text>}
24        keyExtractor={(item, index) => index.toString()}
25      />
26      <TextInput
27        value={inputText}
28        onChangeText={setInputText}
29        placeholder="Type your message..."
30      />
31      <Button title="Send" onPress={handleSend} />
32    </View>
33  );
34};
35
36export default ChatScreen;
37

1// Example using Dialogflow (requires Dialogflow setup and API key)
2import dialogflow from '@react-native-firebase/dialogflow';
3
4const sendToDialogflow = async (text) => {
5  try {
6    const response = await dialogflow().requestQuery(text);
7    return response.queryResult.fulfillmentText;
8  } catch (error) {
9    console.error('Dialogflow error:', error);
10    return 'Sorry, I encountered an error.';
11  }
12};
13
14// Example usage:
15sendToDialogflow('What is the weather like today?').then(response => {
16  console.log('Dialogflow response:', response);
17});
18