vitalets / react-native-extended-stylesheet

Extended StyleSheets for React Native
MIT License
2.93k stars 132 forks source link

Doesn't compile array of styles with destructured classes in Android #166

Closed thoughtassassin closed 2 years ago

thoughtassassin commented 2 years ago

Steps to Reproduce

  1. Create a view with an array of styles like: <View style={[container, style]}>
  2. Destructure the properties from the create method (e. g. const {style1, style2, style3} = EStyleSheet.create({ )
  3. All of the styles do not get compiled and / or show on the screen on the first time it compiles and runs.

Try in Expo

https://snack.expo.dev/5jUHFOmD7

Expected Behavior

It should show all of the styles and display a black background at compile time

Actual Behavior

It does not compile and / or show all of the styles

Show the code

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';

export default class MyComponent extends Component {
  render() {
    return (
      <View style={[column, arrayStyle]}>
        <Text style={header}>Welcome to Extended StyleSheet!</Text>
      </View>
    );
  }
}

const {header, column, arrayStyle} = EStyleSheet.create({
  header: {
    fontSize: '1.5rem',
    color: '$fontColor',
    textAlign: 'center',
  },
  column: {
    width: '80%',
    height: '60%',
    marginHorizontal: '10%',
    marginTop: '20%',
    flexDirection: 'column',
    justifyContent: 'center',
    padding: 5,
  },
  arrayStyle: {
    backgroundColor: '#000'
  }
});

Environment

System: OS: macOS 11.4 CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz Memory: 7.57 GB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 12.13.1 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 8.3.0 - /usr/local/bin/npm Watchman: 2021.08.30.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.0 - /usr/local/bin/pod SDKs: iOS SDK: Not Found Android SDK: API Levels: 28, 29 Build Tools: 28.0.3, 29.0.2 System Images: android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7678000 Xcode: /undefined - /usr/bin/xcodebuild Languages: Java: 11.0.1 - /usr/bin/javac Python: 3.8.5 - /opt/anaconda3/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.2 => 0.63.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

thoughtassassin commented 2 years ago

I am reopening this issue. I was not able to reproduce it on Expo. However, I created a screen recording of what I am seeing. Any suggestions or help is appreciated.

thoughtassassin commented 2 years ago

I finally was able to recreate the issue in Expo. It turns out that the combo of destructuring the css classes from the object and then using those classes in the array in a component's style property does not work. For some reason in my project if I save the file with hot module reload, the styles work. They do not work at compile time with the properties set that way.

stale[bot] commented 2 years ago

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.