This repository contains a simple chat application built using React Native and React Navigation.
-
App.tsx: This is the entry point of the application. It wraps the entire app within the
NavigationContainer
provided by React Navigation and uses theAuthNavigator
component to handle authentication-related navigation. -
src/navigator/index.tsx: This file contains the
AuthNavigator
component responsible for managing the navigation flow within the app. It utilizescreateNativeStackNavigator
from React Navigation to define a stack navigator with screens for the Splash and Chat components. -
src/features/SplashScreen.tsx: This file defines the
SplashScreen
component. It presents a simple screen with a button to navigate to the chat interface. -
src/features/ChatScreen.tsx: The
ChatScreen
component represents the chat interface. It displays a list of messages and provides functionality to send new messages. -
src/components/ChatComponent.tsx: This file contains the
ChatComponent
reusable component used within theChatScreen
. It handles the rendering of messages, input for sending messages, and the overall chat UI.
-
App Start: The application starts with
App.tsx
, rendering theNavigationContainer
wrapping theAuthNavigator
. -
AuthNavigator:
AuthNavigator
manages authentication-related navigation. It sets up a stack navigator with two screens:Splash
andChat
. -
SplashScreen: Initially, the app lands on the
SplashScreen
, displaying a button to open the chat. -
ChatScreen: Upon pressing the button, the app navigates to the
ChatScreen
, which displays the chat interface. -
ChatComponent: The core UI of the chat is handled by
ChatComponent
. It renders messages, provides an input field to send new messages, and maintains the state for managing messages.
To run the application:
- Make sure you have the necessary development environment set up for React Native.
- Clone this repository.
- Install dependencies using
npm install
oryarn install
. - Run the app using
npm start
oryarn start
.
- Message Structure: Messages are objects containing an ID, text content, and a boolean flag indicating if the message was sent or received.
- Automated Messages: There's a commented-out block in
ChatScreen
that demonstrates how to send automated messages every 30 seconds. - Styling: The UI is styled using React Native's StyleSheet with components like
TextInput
,FlatList
, andTouchableOpacity
.