How to Build a Social Media App with React Native and Firebase

Posted on by Panther

In this tutorial, we will learn how to build a social media app using React Native and Firebase. We will be using Firebase for authentication, database, and storage functionality. React Native will allow us to develop our app for both iOS and Android platforms using a single codebase.

Prerequisites

In order to follow along with this tutorial, you will need the following:

  • Node.js installed on your machine
  • React Native CLI installed globally
  • Xcode and/or Android Studio installed for iOS and/or Android development respectively
  • A basic understanding of React and JavaScript

Setting up the Project

Let’s start by setting up a new React Native project. Open your terminal and run the following commands:

npx react-native init SocialMediaApp
cd SocialMediaApp

This will create a new React Native project called “SocialMediaApp” and navigate you into the project directory.

Installing Firebase Dependencies

Next, we need to install the necessary Firebase dependencies for our project. Run the following command in your terminal:

npm install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/database @react-native-firebase/storage

Initializing Firebase

To use Firebase in our app, we need to initialize it. Create a new file called firebase.js in the project’s root directory and add the following code:

import * as firebase from 'firebase';
import '@firebase/auth';
import '@firebase/database';
import '@firebase/storage';

const firebaseConfig = {
  // YOUR FIREBASE CONFIG HERE
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export { firebase };

Replace YOUR FIREBASE CONFIG HERE with your Firebase project’s configuration. You can find this configuration in the Firebase console of your project.

Setting up Navigation

For our app’s navigation, we will be using React Navigation. Run the following command in your terminal to install the necessary dependencies:

npm install @react-navigation/native @react-navigation/stack

Next, create a new file called AppNavigator.js in the project’s root directory and add the following code:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import SignupScreen from './screens/SignupScreen';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Home' }}
        />
        <Stack.Screen
          name="Login"
          component={LoginScreen}
          options={{ title: 'Login' }}
        />
        <Stack.Screen
          name="Signup"
          component={SignupScreen}
          options={{ title: 'Signup' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigator;

Creating Screens

Let’s create the screens for our app. Create a new directory called screens in the project’s root directory and navigate into it.

Inside the screens directory, create the following files and add the respective code:

  • HomeScreen.js
import React from 'react';
import { View, Text } from 'react-native';

function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

export default HomeScreen;
  • LoginScreen.js
import React from 'react';
import { View, Text } from 'react-native';

function LoginScreen() {
  return (
    <View>
      <Text>Login Screen</Text>
    </View>
  );
}

export default LoginScreen;
  • SignupScreen.js
import React from 'react';
import { View, Text } from 'react-native';

function SignupScreen() {
  return (
    <View>
      <Text>Signup Screen</Text>
    </View>
  );
}

export default SignupScreen;

Importing Screens

Let’s import the screens in AppNavigator.js to make them functional. Update the import statements at the top of the file as follows:

import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import SignupScreen from './screens/SignupScreen';

Adding Firebase Authentication

To enable authentication in our app, we will use the Firebase Auth module. Open SignupScreen.js and update the code as follows:

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

import { firebase } from '../firebase/firebase';

function SignupScreen({ navigation }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignUp = () => {
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(() => {
        console.log('User successfully registered!');
        navigation.navigate('Home');
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={(text) => setEmail(text)}
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={(text) => setPassword(text)}
      />
      <Button title="Sign Up" onPress={handleSignUp} />
    </View>
  );
}

export default SignupScreen;

Similarly, update the code in LoginScreen.js as follows:

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

import { firebase } from '../firebase/firebase';

function LoginScreen({ navigation }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        console.log('User successfully logged in!');
        navigation.navigate('Home');
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={(text) => setEmail(text)}
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={(text) => setPassword(text)}
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}

export default LoginScreen;

Adding Firebase Database

To store and retrieve data, we will use the Firebase Database module. Update the code in HomeScreen.js to add data to the database:

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

import { firebase } from '../firebase/firebase';

function HomeScreen() {
  const [text, setText] = useState('');

  const handleAddData = () => {
    const dbRef = firebase.database().ref();
    const data = {
      textValue: text,
    };
    dbRef.push(data).then(() => {
      console.log('Data added successfully!');
    });
  };

  return (
    <View>
      <TextInput
        placeholder="Enter some text"
        value={text}
        onChangeText={(text) => setText(text)}
      />
      <Button title="Add Data" onPress={handleAddData} />
    </View>
  );
}

export default HomeScreen;

To retrieve data from the database, update the code in HomeScreen.js as follows:

import React, { useState, useEffect } from 'react';
import { View, TextInput, Button, FlatList, Text } from 'react-native';

import { firebase } from '../firebase/firebase';

function HomeScreen() {
  const [text, setText] = useState('');
  const [data, setData] = useState([]);

  useEffect(() => {
    const dbRef = firebase.database().ref();
    dbRef.on('value', (snapshot) => {
      const firebaseData = snapshot.val();
      const dataArray = [];
      for (let id in firebaseData) {
        dataArray.push({ id, ...firebaseData[id] });
      }
      setData(dataArray);
    });
  }, []);

  const handleAddData = () => {
    const dbRef = firebase.database().ref();
    const newData = {
      textValue: text,
    };
    dbRef.push(newData).then(() => {
      setText('');
    });
  };

  return (
    <View>
      <TextInput
        placeholder="Enter some text"
        value={text}
        onChangeText={(text) => setText(text)}
      />
      <Button title="Add Data" onPress={handleAddData} />
      <FlatList
        data={data}
        renderItem={({ item }) => <Text>{item.textValue}</Text>}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

export default HomeScreen;

Adding Firebase Storage

To upload and retrieve images, we will use the Firebase Storage module. Update the code in HomeScreen.js to add image upload functionality:

import React, { useState } from 'react';
import { View, TextInput, Button, Image } from 'react-native';

import { firebase } from '../firebase/firebase';

function HomeScreen() {
  const [image, setImage] = useState(null);

  const handleChooseImage = () => {
    // Image picker code here
  };

  const handleUploadImage = () => {
    const storageRef = firebase.storage().ref();
    const imageRef = storageRef.child(image.fileName);
    imageRef.putFile(image.uri).then(() => {
      console.log('Image uploaded successfully!');
    });
  };

  return (
    <View>
      <Button title="Choose Image" onPress={handleChooseImage} />
      {image && <Image source={{ uri: image.uri }} />}
      <Button title="Upload Image" onPress={handleUploadImage} />
    </View>
  );
}

export default HomeScreen;

Conclusion

In this tutorial, we learned how to build a social media app using React Native and Firebase. We integrated Firebase for authentication, database, and storage functions. By following this tutorial, you now have the knowledge to create your own social media app with React Native and Firebase. Happy coding!

Related Post