WhatsApp Clone Using React Native

Description:

This is an open source clone of whatsapp using the react-native library maintained by facebook, the goal of this project is to build an application exactly like the original application, however using a different technical approach. This project is not for profit and is used only as an object of study on development.

Stack Project:

React Native, Redux, Redux Thunk, React Native Router Flux, Firebase

---

Running

git clone [email protected]:filipenatanael/whatsapp-clone-react-native.git
cd whatsapp-clone-react-native
npm install
react-native run-android or react-native run-ios

Firebase Configuration

To set up the firebase, you need to rename FirebaseSettings.js.example to FirebaseSettings.js. Then, add your apiKey configuration.

// whatsapp-clone-react-native/source/resources/FirebaseSettings.js.example

export const config = {
  apiKey: "YOUR-FIREBASE-API-KEY",
  authDomain: "YOUR-FIREBASE-DOMAIN",
  databaseURL: "YOUR-FIREBASE-DATABASE",
  projectId: "YOUR-FIREBASE-PROJECT-ID",
  storageBucket: "YOUR-FIREBASE-STORAGE",
  messagingSenderId: "YOUR-FIREBASE-MASSAGING"
}

Firebase Structure

{
  "messages" : {
    "ZmlsaXBlbmF0YW5hZWwxQGxpdmUuY29t" : {
      "anVsaWFuYUBleGFtcGxlLmNvbQ==" : {
        "-LJHKFv3DtehjTsPivri" : {
          "message" : "Hello, how are you?",
          "type" : "send"
        },
        "-LJHKFv3DtehjTsPivrt" : {
          "message" : "Ça va et toi? :)"
        },
        "-LJHQQy12wRyzRp9q_e8" : {
          "message" : "I'm also fine, Hi.. Let's go out today.",
          "type" : "send"
        },
        "-LJHpYvgmDXFPAl8xznz" : {
          "message" : "Yeah, sure!",
          "type" : "receive"
        },
        "-LJHpdJx0Mc3wTdyWZkD" : {
          "message" : "Where do you wanna go?",
          "type" : "receive"
        },
        "-LJHu8GfIwQKU2T7SZ7-" : {
          "message" : "I want to go to the movies to watch the new Marvel movie",
          "type" : "send"
        },
        "-LJM02ycsXF-4KKCEwzt" : {
          "message" : "I'm leaving home now",
          "type" : "send"
        },
      }
    },
    "anVsaWFuYUBleGFtcGxlLmNvbQ==" : {
      "ZmlsaXBlbmF0YW5hZWwxQGxpdmUuY29t" : {
        "-LJHKFy6pBl_3JnbbJ29" : {
          "message" : "Hello, how are you?",
          "type" : "receive"
        },
        "-LJHpYsPW-X-4VH7_6im" : {
          "message" : "Ola filipe",
          "type" : "send"
        },
        "-LJHpdGQoX4B4T5dfQbh" : {
          "message" : "Tudo bem?",
          "type" : "send"
        }
      }
    }
  },
  "user_conversations" : {
    "ZmlsaXBlbmF0YW5hZWwxQGxpdmUuY29t" : {
      "anVsaWFuYUBleGFtcGxlLmNvbQ==" : {
        "email" : "[email protected]",
        "lastMessage" : "I'm leaving home now",
        "name" : "Juliana Freitas"
      }
    },
	"anVsaWFuYUBleGFtcGxlLmNvbQ==" : {
      "ZmlsaXBlbmF0YW5hZWwxQGxpdmUuY29t" : {
        "email" : "[email protected]",
        "lastMessage" : "I'm leaving home now",
        "name" : "Filipe Natanael"
      }
    }
  },
  "users" : {
    "ZmlsaXBlbmF0YW5hZWwxQGxpdmUuY29t" : {
      "-LITnhW1yLKAwwvAyPJG" : {
        "name" : "Filipe Natanael"
      }
    },
    "anVsaWFuYUBleGFtcGxlLmNvbQ==": {
      "-L2NfSXjEWlBdxICeLGz" : {
        "name" : "Juliana Freitas"
      }
    },
	"dG9ueXN0YXJrQGV4ZW1wbGUuY29t==": {
      "-L2NfSXjEWlBdxICeLG2" : {
        "name" : "Tony Stark"
      }
    }
  },
  "users_of_contacts" : {
    "ZmlsaXBlbmF0YW5hZWwxQGxpdmUuY29t": {
      "-LIYrkTkJ28REbAhD0Xz" : {
        "email" : "[email protected]",
        "name" : "Juliana Freitas",
        "profileImage" : "https://bootdey.com/img/Content/avatar/avatar5.png"
      },
	  "-LIYrkTkJ28REbAhD0X5" : {
        "email" : "[email protected]",
        "name" : "Tony Stark",
        "profileImage" : "https://bootdey.com/img/Content/avatar/avatar5.png"
      }
    },
    "anVsaWFuYUBleGFtcGxlLmNvbQ==": {
      "-LJHjLeuvZrC-GTIEL_3" : {
        "email" : "[email protected]",
        "name" : "Filipe Natanael",
        "profileImage" : "https://bootdey.com/img/Content/avatar/avatar5.png"
      }
    }
  }
}

References

• React Native Docs
• Firebase
• WhatsApp Messenger
• Redux Thunk
• Community - Android Developers