Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/doganozturk/react-native-messaging-app
A simple cross-platform messaging app.
https://github.com/doganozturk/react-native-messaging-app
cross-platform firebase react react-hooks react-native redux
Last synced: 2 months ago
JSON representation
A simple cross-platform messaging app.
- Host: GitHub
- URL: https://github.com/doganozturk/react-native-messaging-app
- Owner: doganozturk
- License: mit
- Created: 2019-08-31T09:16:10.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T00:49:13.000Z (about 2 years ago)
- Last Synced: 2024-10-11T23:13:59.875Z (3 months ago)
- Topics: cross-platform, firebase, react, react-hooks, react-native, redux
- Language: JavaScript
- Homepage:
- Size: 1.77 MB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React-Native-Messaging-App
This is a mobile application I built for studying purposes, using React-Native (v0.60.5).
Application has two screens: one for user login and one for chat. Application is kind of dummy, login functionality for example simply uses a user name, there is no password control. Chat functionality is also very simple for now, there is no persistence on that side and it uses a ready made json blob for initial data. Even though, I think the application is a good example and study piece because:
1. It contains a simple user authentication/session system by storing unique device ids on Firebase.
2. It contains examples of component level and global (through Redux architecture) state. Also asynchronous actions with help of Redux middleware [redux-thunk](https://github.com/reduxjs/redux-thunk).
3. There are also use cases of some general React-Native components such as View, Text, Image, Flatlist .etc and also some advanced ones such as LinearGradient.
4. Written entirely using React Hooks.
## Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
### Prerequisites
If you want to set up a development environment for the project , you need these:
```
brew install [email protected]
brew install [email protected]
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8
```
*Note: Especially for Node, I strongly recommend usage of a Node version management tool such as [NVM](https://github.com/nvm-sh/nvm)* or [n](https://github.com/tj/n).
### Installing
You should have a Firebase project already set up. You can look at the `.env.example` file to how to set a `.env` file. After creating `.env` file with your Firebase credentials, to set up a development environment running
```
git clone https://github.com/doganozturk/react-native-messaging-app.git
cd messagingApp
# Install project dependencies
npm install
```
#### For iOS
```
cd ios
# Install native dependiences through CocoaPods
pod install
# Start metro bundler
npm run start:bundler
# Build project for iOS
npm run start:ios
```
#### For Android
After setting up project on Android Studio and syncing with Gradle files, you need to register a simulator device. Open your simulator, then:
```
# Start metro bundler
npm run start:bundler
# Build project for Android
npm run start:android
```
## Linting & Formatting
The project uses current community favorites such as ESLint and Prettier. I use Intellij IDEA as my IDE and there are appropriate plugins for these tools. All known and respected IDEs and editors have that kind of tools, so I recommend installing them before development.
## Known Caveats & Improvements
- React-Native version used in this project has some [issues](https://github.com/facebook/react-native/issues/25822). To bypass them I used [patch-package](https://github.com/ds300/patch-package) to patch a file inside that library. This patching process runs at npm postinstall step and it is automatic.
- Project uses [react-native-dotenv](https://github.com/zetachang/react-native-dotenv) library for supporting .env file usage for environment variables. I used this for Firebase configuration variables.
- I chose to manipulate users' id fields in the initial json blob data. I did this manipulation because there is this case in Chat screen where user's own messages should be rendered at right hand side of the screen. So there is a need for some kind of data to choose which messages should be rendered at where. I use unique Firebase Firestore ids which are generated by Firebase as user ids in my application and these are in `String` type. The project also uses PropTypes, so there is this issue of number-string problem. To bypass this, after fetching initial json data I convert `Number` type ids to `String` type.
## Tooling
- [React Devtools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Redux Devtools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
- Android Studio
- XCode
## Author
* **Doğan Öztürk** - [Github](https://github.com/doganozturk)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.