My Reads

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

WhatsApp clone print screen

Running

1
2
3
4
git clone git@github.com: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.

1
2
3
4
5
6
7
8
9
10
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
{
  "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" : "juliana@example.com",
        "lastMessage" : "I'm leaving home now",
        "name" : "Juliana Freitas"
      }
    },
	"anVsaWFuYUBleGFtcGxlLmNvbQ==" : {
      "ZmlsaXBlbmF0YW5hZWwxQGxpdmUuY29t" : {
        "email" : "example@example.com",
        "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" : "juliana@example.com",
        "name" : "Juliana Freitas",
        "profileImage" : "https://bootdey.com/img/Content/avatar/avatar5.png"
      },
	  "-LIYrkTkJ28REbAhD0X5" : {
        "email" : "tonystark@exemple.com",
        "name" : "Tony Stark",
        "profileImage" : "https://bootdey.com/img/Content/avatar/avatar5.png"
      }
    },
    "anVsaWFuYUBleGFtcGxlLmNvbQ==": {
      "-LJHjLeuvZrC-GTIEL_3" : {
        "email" : "example@example.com",
        "name" : "Filipe Natanael",
        "profileImage" : "https://bootdey.com/img/Content/avatar/avatar5.png"
      }
    }
  }
}


References