From fca696695f6e39f555b92df0b500d9a89930a175 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 15 Apr 2021 23:31:48 +0530 Subject: [PATCH 1/3] fix Modal animations --- src/components/OptionsSelector.js | 12 ++++++++++-- .../Navigation/AppNavigator/AuthScreens.js | 2 +- .../AppNavigator/modalCardStyleInterpolator.js | 18 +++++++++++------- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js index 8e976eab31c7..e1dabbbc52ca 100644 --- a/src/components/OptionsSelector.js +++ b/src/components/OptionsSelector.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import TextInputWithFocusStyles from './TextInputWithFocusStyles'; import OptionsList from './OptionsList'; import styles from '../styles/styles'; @@ -87,7 +87,15 @@ class OptionsSelector extends Component { } componentDidMount() { - this.textInput.focus(); + this.interactionHandle = InteractionManager.runAfterInteractions(() => { + this.textInput.focus(); + }); + } + + componentWillUnmount() { + if (this.interactionHandle) { + this.interactionHandle.cancel(); + } } /** diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 2269e198f9e5..77248feae0d2 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -176,7 +176,7 @@ class AuthScreens extends React.Component { const modalScreenOptions = { headerShown: false, cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth), - cardStyleInterpolator: modalCardStyleInterpolator, + cardStyleInterpolator: (...props) => modalCardStyleInterpolator(this.props.isSmallScreenWidth, ...props), animationEnabled: true, gestureDirection: 'horizontal', diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js index 28b85c68b7ec..8ad5b1603cdd 100644 --- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js +++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js @@ -1,15 +1,19 @@ import {Animated} from 'react-native'; +import variables from '../../../styles/variables'; -export default ({ - current: {progress}, - inverted, - layouts: { - screen, +export default ( + isSmallScreen, + { + current: {progress}, + inverted, + layouts: { + screen, + }, }, -}) => { +) => { const translateX = Animated.multiply(progress.interpolate({ inputRange: [0, 1], - outputRange: [screen.width, 0], + outputRange: [isSmallScreen ? screen.width : variables.sideBarWidth, 0], extrapolate: 'clamp', }), inverted); From e5c453af1b595a4c38e6fb766c921c7ab6ae74a9 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 23 Apr 2021 20:21:39 +0530 Subject: [PATCH 2/3] chg: refactor Interaction Manager to Custom events --- src/components/OptionsSelector.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js index e1dabbbc52ca..4425e13f480f 100644 --- a/src/components/OptionsSelector.js +++ b/src/components/OptionsSelector.js @@ -1,7 +1,8 @@ import _ from 'underscore'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {InteractionManager, View} from 'react-native'; +import {View} from 'react-native'; +import {withNavigation} from '@react-navigation/compat'; import TextInputWithFocusStyles from './TextInputWithFocusStyles'; import OptionsList from './OptionsList'; import styles from '../styles/styles'; @@ -59,6 +60,10 @@ const propTypes = { // Whether to show the title tooltip showTitleTooltip: PropTypes.bool, + + // The ref to the search input + // eslint-disable-next-line react/forbid-prop-types + navigation: PropTypes.object.isRequired, }; const defaultProps = { @@ -87,15 +92,13 @@ class OptionsSelector extends Component { } componentDidMount() { - this.interactionHandle = InteractionManager.runAfterInteractions(() => { + this.unsubscribeTransitionEnd = this.props.navigation.addListener('transitionEnd', () => { this.textInput.focus(); }); } componentWillUnmount() { - if (this.interactionHandle) { - this.interactionHandle.cancel(); - } + this.unsubscribeTransitionEnd(); } /** @@ -212,4 +215,4 @@ class OptionsSelector extends Component { OptionsSelector.defaultProps = defaultProps; OptionsSelector.propTypes = propTypes; -export default OptionsSelector; +export default withNavigation(OptionsSelector); From 419c9d68dd583f6ee0c8c90ed42349bd3ef477ee Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 26 Apr 2021 07:48:47 +0530 Subject: [PATCH 3/3] chg: enabled animatons for Emoji Picker --- .../home/report/EmojiPickerMenu/index.js | 3 +++ .../report/EmojiPickerMenu/index.native.js | 3 +++ src/pages/home/report/ReportActionCompose.js | 21 +++++++++++++------ 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index 99b69a7b8582..2ef6eb41e952 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -136,6 +136,9 @@ class EmojiPickerMenu extends Component { renderItem={this.renderItem} keyExtractor={item => `emoji_picker_${item.code}`} numColumns={this.numColumns} + removeClippedSubviews + maxToRenderPerBatch={this.numColumns} + windowSize={3} style={styles.emojiPickerList} extraData={this.state.filteredEmojis} stickyHeaderIndices={this.state.headerIndices} diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js index e119b893eba1..22c8031f9355 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.native.js +++ b/src/pages/home/report/EmojiPickerMenu/index.native.js @@ -68,6 +68,9 @@ class EmojiPickerMenu extends Component { renderItem={this.renderItem} keyExtractor={item => (`emoji_picker_${item.code}`)} numColumns={this.numColumns} + removeClippedSubviews + maxToRenderPerBatch={this.numColumns} + windowSize={3} style={styles.emojiPickerList} stickyHeaderIndices={this.unfilteredHeaderIndices} /> diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index ecf3d7db91f9..ff210a67e3ec 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -127,6 +127,15 @@ class ReportActionCompose extends React.Component { } } + componentWillUnmount() { + if (this.emojiFocusInteractionHandle) { + this.emojiFocusInteractionHandle.cancel(); + } + if (this.textInputFocusInteractionHandle) { + this.textInputFocusInteractionHandle.cancel(); + } + } + /** * Updates the Highlight state of the composer * @@ -161,7 +170,7 @@ class ReportActionCompose extends React.Component { if (this.textInput) { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. - InteractionManager.runAfterInteractions(() => { + this.textInputFocusInteractionHandle = InteractionManager.runAfterInteractions(() => { this.textInput.focus(); }); } @@ -249,9 +258,11 @@ class ReportActionCompose extends React.Component { * Focus the search input in the emoji picker. */ focusEmojiSearchInput() { - if (this.emojiSearchInput) { - this.emojiSearchInput.focus(); - } + this.emojiFocusInteractionHandle = InteractionManager.runAfterInteractions(() => { + if (this.emojiSearchInput && !this.props.isSmallScreenWidth) { + this.emojiSearchInput.focus(); + } + }); } /** @@ -397,8 +408,6 @@ class ReportActionCompose extends React.Component { onClose={this.hideEmojiPicker} onModalShow={this.focusEmojiSearchInput} hideModalContentWhileAnimating - animationInTiming={1} - animationOutTiming={1} anchorPosition={{ top: this.state.emojiPopoverAnchorPosition.vertical - CONST.EMOJI_PICKER_SIZE, left: this.state.emojiPopoverAnchorPosition.horizontal - CONST.EMOJI_PICKER_SIZE,