3

I'm trying to find the way to change the dimensions of the SVG when the KeyboardWillShow and KeyboardWillHide listener occurs. For example, using React native Animated prop we can change the image dimensions using Animated.Image. So how can we do the same with SVG image? any help would be appreciated.

Here is what I'm trying to do :

const keyboardListenerShow = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';

const keyboardListenerHide = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';      
  
        useEffect(() => {
    
        Keyboard.addListener(keyboardListenerShow, _listnerShow);
        Keyboard.addListener(keyboardListenerHide, _listerHide);
    
        return () => {
          Keyboard.removeListener(keyboardListenerShow, _listnerShow);
          Keyboard.removeListener(keyboardListenerHide, _listerHide);
        }},[])
    
      const svgDimensions = useRef( new Animated.Value(200)).current;
    
      const _listnerShow = (event) => {
        Animated.timing(svgDimensions, {
          duration: event.duration,
          toValue: 80,
          useNativeDriver:false,
        }).start();
      };
    
       const _listerHide = (event) => {
        Animated.timing(svgDimensions, {
          duration: event.duration,
          toValue: 200,
          useNativeDriver:false,
        }).start();
      };

Example: https://i.stack.imgur.com/zyxoE.jpg

The Dude
  • 41
  • 5

0 Answers0