Skip to content

tgoldenberg/meteor-react-native-chat-example

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published