123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- // @flow
-
- import * as React from 'react';
- import {Image, Platform, View} from "react-native";
- import {FAB, TouchableRipple, withTheme} from 'react-native-paper';
- import * as Animatable from "react-native-animatable";
- import CustomTabBar from "./CustomTabBar";
-
- type Props = {
- focused: boolean,
- onPress: Function,
- onLongPress: Function,
- theme: Object,
- }
-
- const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
-
- /**
- * Abstraction layer for Agenda component, using custom configuration
- */
- class TabHomeIcon extends React.Component<Props> {
-
- focusedIcon = require('../../../assets/tab-icon.png');
- unFocusedIcon = require('../../../assets/tab-icon-outline.png');
-
- constructor(props) {
- super(props);
- Animatable.initializeRegistryWithDefinitions({
- fabFocusIn: {
- "0": {
- scale: 1, translateY: 0
- },
- "0.9": {
- scale: 1.2, translateY: -9
- },
- "1": {
- scale: 1.1, translateY: -7
- },
- },
- fabFocusOut: {
- "0": {
- scale: 1.1, translateY: -6
- },
- "1": {
- scale: 1, translateY: 0
- },
- }
- });
- }
-
- iconRender = ({size, color}) =>
- this.props.focused
- ? <Image
- source={this.focusedIcon}
- style={{width: size, height: size, tintColor: color}}
- />
- : <Image
- source={this.unFocusedIcon}
- style={{width: size, height: size, tintColor: color}}
- />;
-
- shouldComponentUpdate(nextProps: Props): boolean {
- return (nextProps.focused !== this.props.focused);
- }
-
- render(): React$Node {
- const props = this.props;
- return (
- <View
- style={{
- flex: 1,
- justifyContent: 'center',
- }}>
- <TouchableRipple
- onPress={props.onPress}
- onLongPress={props.onLongPress}
- borderless={true}
- rippleColor={Platform.OS === 'android' ? this.props.theme.colors.primary : 'transparent'}
- style={{
- position: 'absolute',
- bottom: 0,
- left: 0,
- width: '100%',
- height: CustomTabBar.TAB_BAR_HEIGHT + 30,
- marginBottom: -15,
- }}
- >
- <AnimatedFAB
- duration={200}
- easing={"ease-out"}
- animation={props.focused ? "fabFocusIn" : "fabFocusOut"}
- icon={this.iconRender}
- style={{
- marginTop: 15,
- marginLeft: 'auto',
- marginRight: 'auto'
- }}/>
- </TouchableRipple>
- </View>
-
- );
- }
-
- }
-
- export default withTheme(TabHomeIcon);
|