Basic sample code for a React Native chat application from start to end

React Netive chat application from start to end. This code will cover setting up a new React Native project, creating a simple chat interface, and basic functionality to send and receive messages. Please note that this is a simplified example for educational purposes, and in a real-world application, you'd need to implement more features and handle edge cases.

Let's assume the project is named "ChattingApp". Make sure you have Node.js and npm installed on your machine before starting.

Step 1: Set up the React Native project

Open a terminal and execute the following commands:

bash
npx react-native init ChattingApp
cd ChattingApp

Step 2: Create the chat screen

Navigate to the ChattingApp/src directory and create a new file called ChatScreen.js. This file will contain the chat interface.

javascript
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from 'react-native';

const ChatScreen = () => {
  const [messages, setMessages] = useState([]);
  const [inputText, setInputText] = useState('');

  const handleSendMessage = () => {
    if (inputText.trim() === '') return;
    
    const newMessage = {
      id: new Date().getTime().toString(),
      text: inputText.trim(),
      isSent: true,
    };

    setMessages([...messages, newMessage]);
    setInputText('');
  };
return ( 
     <View style={styles.container}>
      <FlatList
        data={messages}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={[styles.messageBubble, item.isSent ? styles.sentMessage : styles.receivedMessage]}>
            <Text style={styles.messageText}>{item.text}</Text>
          </View>
        )}
      />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={inputText}
          onChangeText={setInputText}
          placeholder="Type your message..."
        />
        <TouchableOpacity style={styles.sendButton} onPress={handleSendMessage}>
          <Text style={styles.sendButtonText}>Send</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};   const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  messageBubble: {
    padding: 8,
    borderRadius: 8,
    margin: 4,
  },
  sentMessage: {
    backgroundColor: '#DCF8C6',
    alignSelf: 'flex-end',
  },
  receivedMessage: {
    backgroundColor: '#F0F0F0',
    alignSelf: 'flex-start',
  },
  messageText: {
    fontSize: 16,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 8,
  },
  input: {
    flex: 1,
    height: 40,
    borderWidth: 1,
    borderRadius: 20,
    paddingHorizontal: 16,
    marginRight: 8,
  },
  sendButton: {
    backgroundColor: '#4CAF50',
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 20,
  },
  sendButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
});export default ChatScreen;

Step 3: Update the App.js

Now, open the App.js file in the same directory and replace the content with the following code

 code editor 
import React from 'react';
import { SafeAreaView, StatusBar } from 'react-native';

import ChatScreen from './ChatScreen';

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar barStyle="dark-content" />
      <ChatScreen />
    </SafeAreaView>
  );
};

export default App;

Step 4: Run the app

Now, go back to the root of the project and run the following command to start the app:

bash
npx react-native run-android

Assuming you have set up your development environment correctly, this will launch the app in an Android emulator or on a connected device.

The app will display a simple chat interface where you can type a message in the input box at the bottom, and when you tap the "Send" button, the message will be displayed in a message bubble below. The sent messages will appear on the right side, and received messages on the left side.

Remember, this is a basic example, and in a real chat application, you would need to handle user authentication, message storage, real-time updates, and more. Additionally, for deploying the app to app stores, you'd need to follow the respective guidelines for Android and iOS and build release versions of the app.

Good luck with your React Native learning journey