Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fixed modal animations #2680

Merged
merged 8 commits into from
May 12, 2021
Merged

fixed modal animations #2680

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2905434
fix: modal animations
parasharrajat May 4, 2021
f2698e8
Merge branch 'main' of github.com:Expensify/Expensify.cash into anima…
parasharrajat May 7, 2021
8a613cc
added loader for searhPage
parasharrajat May 7, 2021
424fa46
added loader on new chat and new group page
parasharrajat May 7, 2021
0c617ae
chg: animation for IOUModals
parasharrajat May 7, 2021
b2ad5da
fix linting
parasharrajat May 7, 2021
5517db8
dried up duplicate logic to parent
parasharrajat May 7, 2021
1094dca
Pull latest changes
parasharrajat May 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions src/components/OptionsSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import _ from 'underscore';
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import {withNavigation} from '@react-navigation/compat';
import TextInputWithFocusStyles from './TextInputWithFocusStyles';
import OptionsList from './OptionsList';
import styles from '../styles/styles';
Expand Down Expand Up @@ -59,6 +60,13 @@ const propTypes = {

// Whether to show the title tooltip
showTitleTooltip: PropTypes.bool,

// Navigation prop from naviagtion lib
navigation: PropTypes.shape({

// Method to attach listner to Navigaton state.
addListener: PropTypes.func.isRequired,
}).isRequired,
};

const defaultProps = {
Expand Down Expand Up @@ -87,7 +95,13 @@ class OptionsSelector extends Component {
}

componentDidMount() {
this.textInput.focus();
this.unsubscribeTransitionEnd = this.props.navigation.addListener('transitionEnd', () => {
this.textInput.focus();
});
}

componentWillUnmount() {
this.unsubscribeTransitionEnd();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could be wrong, but I thought this could be more useful in the ScreenWrapper and then we just pass a prop like isScreenTransitioning. Maybe it would be more complicated. Perhaps the same could be done with an HOC so we don't need to drill something like an isScreenTransitioning prop down.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Of course, it depends on if there are other places where we'll need to do this. I think there already are..

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1, this looks like something that'll be needed down the road

}

/**
Expand Down Expand Up @@ -204,4 +218,4 @@ class OptionsSelector extends Component {

OptionsSelector.defaultProps = defaultProps;
OptionsSelector.propTypes = propTypes;
export default OptionsSelector;
export default withNavigation(OptionsSelector);
2 changes: 1 addition & 1 deletion src/libs/Navigation/AppNavigator/AuthScreens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ class AuthScreens extends React.Component {
const modalScreenOptions = {
headerShown: false,
cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth),
cardStyleInterpolator: modalCardStyleInterpolator,
cardStyleInterpolator: (...props) => modalCardStyleInterpolator(this.props.isSmallScreenWidth, ...props),
parasharrajat marked this conversation as resolved.
Show resolved Hide resolved
parasharrajat marked this conversation as resolved.
Show resolved Hide resolved
animationEnabled: true,
gestureDirection: 'horizontal',
cardOverlayEnabled: true,
Expand Down
18 changes: 11 additions & 7 deletions src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Expand Down