overflow: 'hidden' has wrong affect on scaleX and scaleY on Android 7.0 (API 24)

React Native version: 0.61.5

Steps To Reproduce

I have created a simple expo to reproduce the problem but please note that the problem does not show up on Expo’s emulator.

I have tested it on a few Android emulators with different API levels and some real devices and still no bug and currently, I’m not to test it on the IOS platform.

1. android emulator: API 19
2. android emulator: API 22
3. android emulator: API 23
4. android emulator: API 28
5. android device: LG K4, android version 5.1.1
6. android device: Samsung Galaxy J2, android version 5.1.1
7. android device: Huawei CUN-L21, android version 5.1

I just could reproduce the bug on My LG Stylus 2 with android 7.0 so it’s too hard to reproduce it, but it’s a bug I think, a rare one. you can reproduce it on an Android emulator API 24 (android 7.0)

here are some results of playing with overflow, scaleX, and scaleY styles

overflow	scaleX	scaleY	result
visible	1	1
visible	1.5	1.5
hidden	1	1
hidden	1.5	1
hidden	1	1.5
hidden	1.5	1.5

Describe what you expected to happen: I expect that the View renders correctly in given scaleX or scaleY no matter what value of overflow is.

Snack, code example, screenshot, or link to a repository:

Snack example but please try to run the example on a real device especially if you have LG Stylus 2 or an Android emulator running API 24.

The only workaround I found is to remove overflow: 'hidden' style and modify my inner views styles to respect their parent’s current style which is not good for maintenance.

update

in the case of the above snack example accidentally removed. I just copied the snack code here without any change.

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.indicatorContainer}>
          <View style={styles.indicator} />
        </View>
        <View style={styles.textContainer}>
          <Text>some text</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: 120,
    height: 70,
    borderRadius: 5,
    borderWidth: 1.5,
    overflow: 'hidden',
    position: 'absolute',
    top: 200,
    left: 120,
    backgroundColor: '#FFFFFF',
    borderColor: '#ff7171',
    // play with scaleX and scaleY to see the bug
    scaleY: 1.5,
    scaleX: 1.5,
  },
  indicatorContainer: {
    flex: 0.65,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FDFFDB',
  },
  indicator: {
    width: 20,
    height: 20,
    borderRadius: 5,
    borderColor: '#000',
    borderWidth: 2,
  },
  textContainer: {
    flexDirection: 'row',
    flex: 0.35,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[chrisbobbe]

(I think the Flow label was misapplied by the bot; this has nothing to do with Flow type-checking; I have no other comment on the issue, unfortunately.)

[safaiyeh]

Hi @SaeedZhiany apologies you are having issues. Thank you for the detailed issue and Snack! Adding the correct tags