Adds support for Toast message (#188)

android/app/build.gradle

@@ -152,6 +152,7 @@ dependencies {
     compile project(':react-native-vector-icons')
     compile project(':react-native-fetch-blob')
     compile project(':react-native-zeroconf')
+    compile project(':react-native-toast')
     compile project(':realm')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"

android/app/src/main/java/com/rocketchatrn/MainApplication.java

@@ -15,6 +15,8 @@ import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
 import com.brentvatne.react.ReactVideoPackage;
+import com.remobile.toast.RCTToastPackage;
+
 import java.util.Arrays;
 import java.util.List;
 import org.devio.rn.splashscreen.SplashScreenReactPackage;
@@ -39,7 +41,8 @@ public class MainApplication extends Application implements ReactApplication {
               new RealmReactPackage(),
               new ReactNativePushNotificationPackage(),
               new ReactVideoPackage(),
-        new SplashScreenReactPackage()
+              new SplashScreenReactPackage(),
+              new RCTToastPackage()
       );
     }
   };

android/settings.gradle

@@ -17,4 +17,6 @@ include ':realm'
 project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
 include ':react-native-push-notification'
 project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')
+include ':react-native-toast'
+project(':react-native-toast').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-toast/android')
 include ':app'

app/containers/MessageActions.js

@@ -15,6 +15,7 @@ import {
 	setInput,
 	actionsHide
 } from '../actions/messages';
+import { showToast } from '../utils/info';
 
 @connect(
 	state => ({
@@ -127,7 +128,7 @@ export default class MessageActions extends React.Component {
 			if (this.state.copyPermalink) {
 				this.setState({ copyPermalink: false });
 				await Clipboard.setString(nextProps.permalink);
-				Alert.alert('Permalink copied to clipboard!');
+				showToast('Permalink copied to clipboard!');
 				this.props.permalinkClear();
 			// quote
 			} else if (this.state.quote) {
@@ -235,7 +236,7 @@ export default class MessageActions extends React.Component {
 
 	handleCopy = async() => {
 		await Clipboard.setString(this.props.actionMessage.msg);
-		Alert.alert('Copied to clipboard!');
+		showToast('Copied to clipboard!');
 	}
 
 	handleStar() {

app/utils/info.js

@@ -0,0 +1,6 @@
+import { Alert } from 'react-native';
+import Toast from '@remobile/react-native-toast';
+
+export const showToast = (message: string) => Toast.showLongCenter(message, Toast.SHORT);
+
+export const showErrorAlert = (message: string, title: string) => Alert.alert(title, message, [{ text: 'OK', onPress: () => {} }], { cancelable: true });

app/views/ForgotPasswordView.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import Spinner from 'react-native-loading-spinner-overlay';
 import PropTypes from 'prop-types';
-import { Text, TextInput, View, TouchableOpacity, Alert, SafeAreaView } from 'react-native';
+import { Text, TextInput, View, TouchableOpacity, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as loginActions from '../actions/login';
 import KeyboardView from '../presentation/KeyboardView';
 
 import styles from './Styles';
+import { showErrorAlert } from '../utils/info';
 
 class ForgotPasswordView extends React.Component {
 	static propTypes = {
@@ -35,11 +36,11 @@ class ForgotPasswordView extends React.Component {
 		if (login.success) {
 			this.props.navigation.goBack();
 			setTimeout(() => {
-				Alert.alert(
-					'Alert',
+				showErrorAlert(
 					'If this email is registered, ' +
 					'we\'ll send instructions on how to reset your password. ' +
-					'If you do not receive an email shortly, please come back and try again.'
+					'If you do not receive an email shortly, please come back and try again.',
+					'Alert'
 				);
 			});
 		}

app/views/LoginView.js

@@ -8,6 +8,7 @@ import * as loginActions from '../actions/login';
 import KeyboardView from '../presentation/KeyboardView';
 
 import styles from './Styles';
+import { showToast } from '../utils/info';
 
 class LoginView extends React.Component {
 	static propTypes = {
@@ -34,6 +35,7 @@ class LoginView extends React.Component {
 	submit = () => {
 		const {	username, password, code } = this.state;
 		if (username.trim() === '' || password.trim() === '') {
+			showToast('Email or password field is empty');
 			return;
 		}
 

app/views/RegisterView.js

@@ -10,6 +10,7 @@ import * as loginActions from '../actions/login';
 import KeyboardView from '../presentation/KeyboardView';
 
 import styles from './Styles';
+import { showToast } from '../utils/info';
 
 const placeholderTextColor = 'rgba(255,255,255,.2)';
 
@@ -51,6 +52,7 @@ class RegisterView extends React.Component {
 			name, email, password, code
 		} = this.state;
 		if (!this._valid()) {
+			showToast('Some field is invalid or empty');
 			return;
 		}
 

package-lock.json

@@ -149,6 +149,11 @@
       "resolved": "https://registry.npmjs.org/@hypnosphi/fuse.js/-/fuse.js-3.0.9.tgz",
       "integrity": "sha1-6pn2EhtKjwZbTHH4VZXbJxRJiAc="
     },
+    "@remobile/react-native-toast": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@remobile/react-native-toast/-/react-native-toast-1.0.7.tgz",
+      "integrity": "sha512-iOD1PRnTSVr9sDWQdesIpfRrwJhHfeEQe5BpalQxC5OhM9thpiE6cu2NlW1KBWl0RJG4ZiJaF1xLlCo9YxU6dA=="
+    },
     "@storybook/addon-storyshots": {
       "version": "3.2.18",
       "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-3.2.18.tgz",

package.json

@@ -21,6 +21,7 @@
     ]
   },
   "dependencies": {
+    "@remobile/react-native-toast": "^1.0.7",
     "@storybook/addons": "^3.3.1",
     "@storybook/react-native": "^3.2.18",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",