Remove blinking of Keyboard after navigating to Send Sheet (#367)

src/components/fab/SendFab.js

@@ -2,15 +2,39 @@ import PropTypes from 'prop-types';
 import React from 'react';
 // import Animated from 'react-native-reanimated';
 import { withNavigation } from 'react-navigation';
+import { InteractionManager } from 'react-native';
 import { compose, onlyUpdateForKeys, withHandlers } from 'recompact';
-import { withFabSelection } from '../../hoc';
+import { withFabSelection, withTransitionProps } from '../../hoc';
 import { colors } from '../../styles';
 import { Icon } from '../icons';
 import { Centered } from '../layout';
 // import DeleteButton from './DeleteButton';
 import FloatingActionButton from './FloatingActionButton';
 // import MovableFabWrapper from './MovableFabWrapper';
 
+let onPressMutex = false;
+/**
+ * This function is a bit hacky workaround for an issue of blinking
+ * keyboard while navigating from wallet screen to send sheet immediately
+ * after closing asset screen. Firstly, I guarantee that there're no
+ * collapsing events by mutex, then I set additional timeout with flexible
+ * time set in order to make sure that there's always enough time
+ * to close the keyboard after transition.
+ */
+function performSafely(operation, transitionProps) {
+  if (onPressMutex) {
+    return;
+  }
+  onPressMutex = true;
+  InteractionManager.runAfterInteractions(() => {
+    const current = Date.now();
+    setTimeout(() => {
+      operation();
+      onPressMutex = false;
+    }, Math.max(1000 - current + transitionProps.date + transitionProps.isTransitioning ? 400 : 0, 0));
+  });
+}
+
 const FloatingActionButtonWithDisabled = withFabSelection(FloatingActionButton);
 
 const SendFab = ({
@@ -68,8 +92,11 @@ SendFab.defaultProps = {
 
 export default compose(
   withNavigation,
+  withTransitionProps,
   withHandlers({
-    onPress: ({ navigation }) => () => navigation.navigate('SendSheet'),
+    onPress: ({ navigation, transitionProps }) => () => {
+      performSafely(() => navigation.navigate('SendSheet'), transitionProps);
+    },
   }),
   onlyUpdateForKeys(['disabled', 'sections'])
   // withProps({

src/redux/navigation.js

@@ -9,13 +9,17 @@ export const updateTransitionProps = payload => dispatch => {
 const INITIAL_STATE = {
   transitionProps: {
     blurColor: null,
+    date: Date.now(),
     effect: '',
     isTransitioning: false,
   },
 };
 
 export default (state = INITIAL_STATE, action) => {
   if (action.type === UPDATE_TRANSITION_PROPS) {
+    if (action.payload.date) {
+      state.transitionProps.data = action.payload.date;
+    }
     return {
       ...state,
       transitionProps: {

src/screens/Routes/Routes.ios.js

@@ -37,9 +37,13 @@ import {
 enableScreens();
 
 const onTransitionEnd = () =>
-  store.dispatch(updateTransitionProps({ isTransitioning: false }));
+  store.dispatch(
+    updateTransitionProps({ date: Date.now(), isTransitioning: false })
+  );
 const onTransitionStart = () =>
-  store.dispatch(updateTransitionProps({ isTransitioning: true }));
+  store.dispatch(
+    updateTransitionProps({ date: Date.now(), isTransitioning: true })
+  );
 
 const SwipeStack = createMaterialTopTabNavigator(
   {