Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ImageBackground doesn't re-render the image inside, on Orientation-Change & resizeMode='repeat' #23675

Closed
xstable opened this issue Feb 27, 2019 · 7 comments
Labels
Bug Component: Image Component: ImageBackground Platform: Android Android applications. Platform: Linux Building on Linux. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@xstable
Copy link

xstable commented Feb 27, 2019

🐛 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

@react-native-bot
Copy link
Collaborator

It looks like you are using an older version of React Native. Please update to the latest release, v0.58 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

@xstable
Copy link
Author

xstable commented Feb 28, 2019

Issue still exist with react-native 0.58.5

@CatapultJesse
Copy link

CatapultJesse commented Mar 5, 2019

Can confirm replication of the issue of state change not re-rendering on android: https://snack.expo.io/@jkcooper/rn23675-imagebackground-size-change (iOS seems to be working correctly)

Edit: Seems to work correctly when running the snack on a real android device. @xstable can you confirm if this is also the case for you?

@xstable
Copy link
Author

xstable commented Mar 5, 2019

Yes, I've only tested it at a real device (usb connected (in DEV-Mode) ).
Android 9

@CatapultJesse
Copy link

Related: #22975

@stale
Copy link

stale bot commented Aug 2, 2019

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 2, 2019
@stale
Copy link

stale bot commented Aug 9, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Aug 9, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Aug 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: Image Component: ImageBackground Platform: Android Android applications. Platform: Linux Building on Linux. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

5 participants