How to animate SVG image when keyboard or any other event occur in react native?

How To
#1

I’m trying to find the way to change the dimensions of the SVG when the keyboard event or any other event 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.

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 imageOriginal = useRef( new Animated.Value(200)).current;
    
      const _listnerShow = (event) => {
        Animated.timing(imageOriginal, {
          duration: event.duration,
          toValue: 80,
          useNativeDriver:false,
        }).start();
      };
    
       const _listerHide = (event) => {
        Animated.timing(imageOriginal, {
          duration: event.duration,
          toValue: 200,
          useNativeDriver:false,
        }).start();
      };

Now how can I change my SVG image width and height when keyboardWillShow event occurs? and vise versa?

Here is the example of what I want :

Example
Example1920×1920 337 KB

#2

Hi

I haven’t tried this, but the following comment (and maybe some of the others in that thread) looks like it might point you in the right direction:

Also have a look at this: