import React, {useState, useRef} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
FlatList,
StyleSheet,
KeyboardAvoidingView,
Platform,
Keyboard,
} from 'react-native';
const Chatting3 = () => {
const [messages, setMessages] = useState([]);
const [newMessage, setNewMessage] = useState('');
const flatlistRef = useRef(null);
const handleSend = () => {
if (newMessage.trim() === '') return;
const updatedMessages = [
...messages,
{id: messages.length + 1, text: newMessage, sender: 'me'},
];
setMessages(updatedMessages);
setNewMessage('');
// Auto-scroll to the latest message
flatlistRef.current.scrollToEnd();
};
const handleReply = () => {
// Contoh: Menambah pesan balasan dari pengguna lain
const replyMessage = 'Terima kasih atas pesan Anda!';
const updatedMessages = [
...messages,
{id: messages.length + 1, text: replyMessage, sender: 'other'},
];
setMessages(updatedMessages);
};
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -150}>
<View style={styles.chatContainer}>
<FlatList
ref={flatlistRef}
data={messages}
keyExtractor={item => item.id.toString()}
renderItem={({item}) => (
<View
style={
item.sender === 'me'
? styles.myMessageContainer
: styles.otherMessageContainer
}>
<Text style={styles.messageText}>{item.text}</Text>
</View>
)}
onContentSizeChange={() => flatlistRef.current.scrollToEnd()}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
value={newMessage}
onChangeText={text => setNewMessage(text)}
placeholder="Type your message"
/>
<TouchableOpacity style={styles.sendButton} onPress={handleSend}>
<Text style={styles.sendButtonText}>Send</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.replyButton} onPress={handleReply}>
<Text style={styles.replyButtonText}>Reply</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f8f8',
},
chatContainer: {
flex: 1,
padding: 16,
},
myMessageContainer: {
alignSelf: 'flex-end',
backgroundColor: '#4CAF50',
padding: 8,
marginVertical: 4,
borderRadius: 8,
maxWidth: '80%',
},
otherMessageContainer: {
alignSelf: 'flex-start',
backgroundColor: '#2196F3',
padding: 8,
marginVertical: 4,
borderRadius: 8,
maxWidth: '80%',
},
messageText: {
fontSize: 16,
color: 'white',
},
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
padding: 16,
borderTopWidth: 1,
borderTopColor: '#ddd',
backgroundColor: 'white',
},
input: {
flex: 1,
height: 40,
borderColor: '#ddd',
borderWidth: 1,
marginRight: 8,
paddingHorizontal: 8,
borderRadius: 20,
},
sendButton: {
backgroundColor: '#2196F3',
padding: 10,
borderRadius: 20,
},
sendButtonText: {
color: 'white',
fontWeight: 'bold',
},
replyButton: {
backgroundColor: '#f39c12',
padding: 10,
borderRadius: 20,
},
replyButtonText: {
color: 'white',
fontWeight: 'bold',
},
});
export default Chatting3;
