0

Am trying to animate an image to shrink when the onscreen keyboard is called (see code below). Got it working on IOS but not on Android :(

I have searched the web for solutions, but so far nothing works. Any suggestions?

Thanks in advance 

constructor(props) {
  super(props);

  this.imageSize = new Animated.Value(imageSizeNormal);
}

componentWillMount() {
    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}

componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
}

keyboardWillShow = (event) => {
    Animated.timing(this.imageSize, {
        toValue: imageSizeSmall
    }).start();
};


keyboardWillHide = (event) => {
    Animated.timing(this.imageSize, {
        toValue: imageSize
    }).start();
};


render() {
    return (
      <Animated.Image 
         source={require('../../assets/circle.png')} 
         resizeMode="contain"
         style={[styles.logo, { height: this.imageSize, width: this.imageSize}]}
       />
    )
}


const imageSizeNormal = Dimensions.get("window").width/2;

const imageSizeSmall = Dimensions.get("window").width/4;
Reuben
  • 141
  • 12

1 Answers1

2

Here's how I solved it.

First thing I did was change the keywords "keyboardWill..." to "keyboardDid...""

Second, I added the following to AndroidManifest.xml

    android:fitsSystemWindows="true"
    android:windowSoftInputMode="adjustResize"

Sources:

windowSoftInputMode="adjustResize" not working with translucent action/navbar

https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

Reuben
  • 141
  • 12