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.

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

[IS-2151] fixed FAB issue #2305

Merged
merged 3 commits into from
Apr 14, 2021
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
24 changes: 9 additions & 15 deletions src/components/FAB.js → src/components/FAB/FAB.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,19 @@
import React, {PureComponent} from 'react';
import {Pressable, Animated, Easing} from 'react-native';
import PropTypes from 'prop-types';
import Icon from './Icon';
import {Plus} from './Icon/Expensicons';
import styles, {getAnimatedFABStyle} from '../styles/styles';
import themeColors from '../styles/themes/default';
import {
Pressable, Animated, Easing,
} from 'react-native';
import Icon from '../Icon';
import {Plus} from '../Icon/Expensicons';
import styles, {getAnimatedFABStyle} from '../../styles/styles';
import themeColors from '../../styles/themes/default';
import fabPropTypes from './fabPropTypes';

const AnimatedIcon = Animated.createAnimatedComponent(Icon);
AnimatedIcon.displayName = 'AnimatedIcon';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
AnimatedPressable.displayName = 'AnimatedPressable';

const propTypes = {
// Callback to fire on request to toggle the FAB
onPress: PropTypes.func.isRequired,

// Current state (active or not active) of the component
isActive: PropTypes.bool.isRequired,
};

class FAB extends PureComponent {
constructor(props) {
super(props);
Expand Down Expand Up @@ -77,5 +71,5 @@ class FAB extends PureComponent {
}
}

FAB.propTypes = propTypes;
FAB.propTypes = fabPropTypes;
export default FAB;
11 changes: 11 additions & 0 deletions src/components/FAB/fabPropTypes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import PropTypes from 'prop-types';

const FabPropTypes = {
aliabbasmalik8 marked this conversation as resolved.
Show resolved Hide resolved
// Callback to fire on request to toggle the FAB
onPress: PropTypes.func.isRequired,

// Current state (active or not active) of the component
isActive: PropTypes.bool.isRequired,
};

export default FabPropTypes;
18 changes: 18 additions & 0 deletions src/components/FAB/index.ios.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import {
KeyboardAvoidingView,
} from 'react-native';

import FAB from './FAB';
import fabPropTypes from './fabPropTypes';

function Fab({onPress, isActive}) {
return (
<KeyboardAvoidingView behavior="position">
<FAB onPress={onPress} isActive={isActive} />
</KeyboardAvoidingView>
);
}

Fab.propTypes = fabPropTypes;
export default Fab;
11 changes: 11 additions & 0 deletions src/components/FAB/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';

import FAB from './FAB';
import fabPropTypes from './fabPropTypes';

function Fab({onPress, isActive}) {
aliabbasmalik8 marked this conversation as resolved.
Show resolved Hide resolved
return <FAB onPress={onPress} isActive={isActive} />;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not following why we can't use the KeyboardAvoidingView everywhere? What is the problem exactly?

Copy link
Contributor Author

@aliabbasmalik8 aliabbasmalik8 Apr 13, 2021

Choose a reason for hiding this comment

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

  1. For android we have no need to use KeyboardAvoidingView
  2. If we want to add KeyboardAvoidingView for android then we need to make many style changes(for both big and small screen) on the SidebarScreen because FAB onPress not working with KeyboardAvoidingView in android. (can fix by making style changes but it's no need so that's the reason not did, will do on demand)

Copy link
Contributor

Choose a reason for hiding this comment

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

Alright, I'll take your word for it. Although I'm not sure which style changes you mean in this case.

Copy link
Contributor

Choose a reason for hiding this comment

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

We should add some kind of comment so that we will understand what purpose splitting these files in two serves?


Fab.propTypes = fabPropTypes;
export default Fab;