I'll help you build a social media application using React Native CLI with TypeScript. Let's start with the project setup and then implement key features like authentication, feed, posts, and profiles.
First, let's set up a new React Native project with TypeScript:
# Install React Native CLI globally if you haven't already
npm install -g react-native-cli
# Create a new React Native project with TypeScript template
npx react-native init SocialMediaApp --template react-native-template-typescript
# Navigate to the project directory
cd SocialMediaApp
# Install additional dependencies
npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-gesture-handler @react-native-async-storage/async-storageLet's create a basic structure for our social media app:
project-structure.js
Now let's implement the core components of our social media app:
Let's set up the navigation structure:
src/navigation/AppNavigator.tsx
Let's define our TypeScript types:
src/types/navigation.ts
src/types/models.ts
Let's implement the login and registration screens:
src/screens/auth/LoginScreen.tsx
src/screens/auth/RegisterScreen.tsx
Let's implement the feed screen to display posts:
src/screens/feed/FeedScreen.tsx
Let's create a reusable post card component:
src/components/feed/PostCard.tsx
Let's implement the user profile screen:
src/screens/profile/ProfileScreen.tsx
Let's implement the post creation screen:
src/screens/post/CreatePostScreen.tsx
Let's implement the post detail screen with comments:
src/screens/post/PostDetailScreen.tsx
Finally, let's update the App.tsx file to use our navigation:
App.tsx
To run your social media app:
# Navigate to your project directory
cd SocialMediaApp
# Install dependencies
npm install
# For iOS
npx pod-install ios
npx react-native run-ios
# For Android
npx react-native run-androidThis is a foundation for your social media app. Here are some features you might want to add next:
Would you like me to expand on any specific part of this social media app?
To make your social media app fully functional, we'll need to integrate a backend service. I'll use Firebase for this implementation as it provides all the necessary services (authentication, database, storage, and real-time updates) that a social media app needs.
Let's enhance the app to make it fully functional:
First, let's install the required Firebase packages:
# Install Firebase
npm install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore @react-native-firebase/storage
# Install image picker for uploading photos
npm install react-native-image-picker
# Install additional dependencies
npm install react-native-uuidfirebase.config.js
You'll need to replace the placeholder values with your actual Firebase project configuration.
Let's create service files to handle Firebase operations:
src/services/auth.service.ts
src/services/post.service.ts
Let's create an authentication context to manage the user's authentication state throughout the app:
src/contexts/AuthContext.tsx
App.tsx
src/navigation/AppNavigator.tsx
src/types/navigation.ts
src/screens/auth/LoginScreen.tsx
src/screens/auth/RegisterScreen.tsx
src/screens/feed/FeedScreen.tsx
src/components/feed/PostCard.tsx
src/screens/profile/ProfileScreen.tsx
src/screens/profile/EditProfileScreen.tsx
I found some issues in the code block.
I will fix them.
src/screens/profile/EditProfileScreen.tsx
src/screens/post/CreatePostScreen.tsx
src/screens/post/PostDetailScreen.tsx
google-services.json file from your Firebase console and place it in the android/app directory.android/build.gradle file:buildscript {
// ...
dependencies {
// ...
classpath 'com.google.gms:google-services:4.3.15'
}
}android/app/build.gradle file:apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // Add this line
// ...
dependencies {
// ...
implementation platform('com.google.firebase:firebase-bom:32.0.0')
}GoogleService-Info.plist file from your Firebase console and add it to your Xcode project.ios/Podfile:target 'SocialMediaApp' do
# ...
pod 'Firebase', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
# ...
endcd ios && pod install to install the dependencies.To run your fully functional social media app:
# Navigate to your project directory
cd SocialMediaApp
# Install dependencies
npm install
# For iOS
npx pod-install ios
npx react-native run-ios
# For Android
npx react-native run-androidYou now have a fully functional social media app with the following features:
User Authentication:
Posts:
Profile Management:
Real-time Data:
This app provides a solid foundation that you can extend with additional features like: