React-Native-Meteor-Chatting

meteor-react-native-chat-example

Simple example of live chat through a Meteor server on both iOS and Android with React Native

---

#Screenshots

Example with iOS

## Example with Android

---

Setup

• first git clone the repository locally
• to run the Meteor app, cd meteor-chat-mtr, type meteor, and open Chrome to localhost:3000
• to establish a connection with a local Meteor server, you will have to open the file MeteorChatRN/app/config/ddp.js and change line 8 to read from your computer's IP Address. You can find this out by typing ifconfig in your terminal. If running from a deployed Meteor server, you would instead use the full url of the site as instructed in the ddp-client repository's instructions
• to run the iOS app, from the root directory, cd MeteorChatRN, then type ios/MeteorChatRN.xcodeproj to open the project in XCode (you must have an up-to-date version of XCode), then hit the play icon to run the app in a simulator
• to run the Android app, first make sure the iOS Node server is not running (hit stop in XCode), then open an Android simulator (most users find Genymotion to be user-friendly and has a free tier). In your React-native root, type react-native run-android to run the app on the Android simulator

---

Libraries used

For Meteor, the following packages were used - to add them to other projects just type meteor add + project name in your Meteor app

• checks for server-side data checks
• react for using React
• react-template-helper for including React components in Blaze templates
• iron:router for routing
• accounts-password for Meteor's easy-to-use user account management

For React Native, the following libraries were used - to add them to other projects in React Native just type npm install + package + --save

• react-native-navbar for a reusable navbar on iOS and Android - note, to enable use on Android, you must comment out references in the library code to TabBarIOS; this is already done here - see the index.js file in the node_modules/react-native-navbar directory
• react-native-invertible-scroll-view for easy to implement UI in situations where you want to focus the screen towards the bottom of the ScrollView; this is particularly useful for chat applications
• ddp-client for establishing a DDP connection with the remote Meteor server and adding to collections server-side
• react-native-vector-icons for using MaterialIcon fonts as well as other icon fonts; the installation of this package for iOS and Android is distinct, but can easily be implemented through the source project instructions

---

Contributing

• Feel free to contribute to the project by forking and making a pull request, there are plenty of improvements to be made!

---

Shoutouts

• Thanks to Spencer Carli for the meteor-todos-react-native repository, which provides a great way of linking Meteor to React Native