CODEWITHSUNDEEP
androidreact-nativeanimation
Reuben
Reuben

Reputation: 141

React Native Animation (animated) not working on Android

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;

Upvotes: 0

Views: 1754

Answers (1)

Reuben
Reuben

Reputation: 141

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

Upvotes: 2

Related Questions