Flatlist inverted props not working in huawei p9

[rhenmark]

Flatlist render items cannot be seen when using inverted props only in huawei p9 phones. Any suggestions/help is very much appreciated.

[enahum]

I had to extend the FlatList and change the style to this

vertical: Platform.select({
        android: {
            scaleY: -1
        },
        ios: {
            transform: [{scaleY: -1}]
        }
    }),

is the only way is working on Huawei devices, the whole thing seems to be that Huawei devices do not support the transform: [{scaleY: -1}] style for some reason.

[pull-bot]

@facebook-github-bot no-template

[facebook-github-bot]

Hey, thanks for reporting this issue! It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce the issue being reported. I am going to close this, but feel free to open a new issue with the additional information provided. Thanks! See "What to Expect from Maintainers" to learn more.

[almostintuitive]

This is actually a useful issue with a great suggestion!

We're having the same issue with a Huawei tablet, but

android: {
            scaleY: -1
        },

Is actually also inverting the FlatList's row's content, nut just FlatList itself.

Also we're getting a deprecation warning.

Does anyone have any info regarding why this could be happening with some Huawei devices?

[lekenny]

same problem

[mindaugas-zaluba]

Same on Honor 8 (Huawei sub-brand)

[rhenmark]

When setting transform style in the View the Text inside it makes blurry.

[yury]

{perspective: 1} fixes transformation on Huawei

const FLIP_Y_TRANSFORM = [{scaleY: -1}];
const FLIP_X_TRANSFORM = [{scaleX: -1}];

if (Platform.OS === 'android') {
  FLIP_Y_TRANSFORM.push({perspective: 1});
  FLIP_X_TRANSFORM.push({perspective: 1});
}

[enahum]

@yury can you confirm that fix actually works?

[yury]

Yep, we shipped that fix in production. RN v0.43.4

[henninghall]

@yury Looks good, where did you put that code?

[yury]

@henninghall

it is in our components/theme.js

const theme = {
   /* ... */
  flipX: { transform: FLIP_Y_TRANSFORM },
  flipY: { transform: FLIP_Y_TRANSFORM }
  /* ... */
}

export default theme;

Basic usage

import theme from '../theme';

class XComponent extends Component {
  render() {
     return <View style={ styles.wrapper }>/*...*/</View>
  }
}

const styles = StyleSheet.create({
  wrapper: {
    marginTop: 12,
    ...theme.flipY,
  },
});

[henninghall]

@yury's solution also inverts the FlatList's row's content, not just FlatList itself (discussed earlier)

[yury]

@henninghall yep, if you want just flip listview, you should apply this transform on list and on row. That’s the trick.

[sondremare]

@facebook-github-bot reopen