Description
🐛 Bug Report
If you have an and you change the dimensions of this Component while changing orientation... the Component itself got the new Dimensions, but the image inside doesn't re-renderd to fit the component.
If you switch resizeMode to "cover" the expected behavior (for covering image) works. Seems to be a bug with "repeat".
See Video here: http://somup.com/cqntbyn3FX
Code Example
import React, { Component } from 'react';
import {
GiftedChat,
InputToolbar,
Send,
Message,
Bubble,
} from 'react-native-gifted-chat';
import {
View,
Dimensions,
Platform,
ImageBackground,
} from 'react-native';
import Orientation from 'react-native-orientation';
class CustomChat extends Component {
constructor(props) {
super(props);
const { width, height } = Dimensions.get('window');
this.state = {
messages,
screenDimensions: { width, height },
};
}
componentDidMount() {
Dimensions.addEventListener('change', this.orientationDidChange);
}
orientationDidChange = (orientation) => {
const { width, height } = Dimensions.get('window');
this.setState({ screenDimensions: { width, height } });
};
componentWillUnmount() {
Dimensions.removeEventListener('change', this.orientationDidChange);
}
render() {
...
const { screenDimensions: { width, height } } = this.state;
...
return (
<ImageBackground
source={require('../../../assets/chat_bg_900_33.jpg')}
resizeMode="cover"
style={{ width, height: height - 80 }}
>
<GiftedChat
... someProps...
/>
</ImageBackground>
);
}
}
Expected Behavior
Background-Image should fill the whole screen
Environment
React Native Environment Info:
System:
OS: Linux 4.14 Manjaro Linux undefined
CPU: (8) x64 Intel(R) Core(TM) i7-3610QM CPU @ 2.30GHz
Memory: 177.88 MB / 11.19 GB
Shell: 5.0.0 - /bin/bash
Binaries:
Node: 10.14.1 - /usr/local/bin/node
Yarn: 1.7.0 - ~/.yarn/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/bin/watchman
SDKs:
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.3, 24.0.3, 25.0.1, 25.0.2, 26.0.0, 26.0.1, 26.0.3, 27.0.2, 27.0.3, 28.0.0, 28.0.2, 28.0.3
System Images: android-19 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
npmPackages:
react: 16.6.3 => 16.6.3
react-native: ^0.58.5 => 0.58.5
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-debugger-open: 0.3.17
react-native-git-upgrade: 0.2.7