react-native-platform-searchbar/lib/module/components/SearchBar/ios/CancelButton.js

A searchbar component for React Native

import React, { useState, useRef, useLayoutEffect } from 'react';
import { Text, StyleSheet, Animated, Easing } from 'react-native';
import { iosBlue } from '../../../constants/colors';
import Button from '../../Button';

const CancelButton = ({
  text,
  visible,
  style,
  textStyle,
  accessibilityLabel = 'cancel',
  onPress
}) => {
  const [width, setWidth] = useState();
  const animationValue = useRef(new Animated.Value(visible ? 1 : 0));
  useLayoutEffect(() => {
    const animation = Animated.timing(animationValue.current, {
      toValue: visible ? 1 : 0,
      useNativeDriver: true,
      duration: visible ? 250 : 200,
      delay: visible ? 50 : 0,
      easing: Easing.inOut(Easing.ease)
    });
    animation.start();
    return animation.stop;
  }, [visible]);
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: [{
      opacity: animationValue.current,
      transform: [{
        translateX: animationValue.current.interpolate({
          inputRange: [0, 1],
          outputRange: [width || 1, 0]
        })
      }]
    }, !visible && styles.notVisible, style],
    onLayout: e => {
      setWidth(e.nativeEvent.layout.width);
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onPress: onPress,
    accessibilityLabel: accessibilityLabel,
    hitSlop: 8
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.cancelButtonText, textStyle],
    allowFontScaling: false
  }, text)));
};

const styles = StyleSheet.create({
  cancelButtonText: {
    color: iosBlue,
    fontSize: 16
  },
  notVisible: {
    position: 'absolute',
    right: 0
  }
});
export default CancelButton;
//# sourceMappingURL=CancelButton.js.map