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

[dudemacbook]

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 :

[wodin]

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:

[Rect] width not being animated via createAnimatedComponent and interpolate

Also have a look at this:

SVG Animations with React Native