no-unused-styles doesn't work with functions and vars

[yelled3]

when I added the rule for no-unused-styles to my project I got many errors.
most of them were due to styles dynamically loaded from functions or vars.

consider the following use cases:

class MyView extends Component {

  static propTypes = {
    isActive: React.PropTypes.bool,
    type: React.PropTypes.oneOf(['typeA', 'typeB'])
  };

  get myActiveStyle() {
     return this.props.isActive ? style.active : {}
  }

 render() {
    var typeStyle = styles[this.props.type];
    return (
      <View style={[this.activeStyle, typeStyle]} / >
    );
  }

}

// All 3 styles will be marked as unused
const styles = StyleSheet.create({
   active: {...},
   typeA: {...},
   typeB: {...},
})

my current solution is to wrap the erroring code with:

/*eslint-disable react-native/no-unused-styles */
 const styles = StyleSheet.create({...});
/*eslint-enable react-native/no-unused-styles */

Thoughts?

[Intellicode]

Hi @yelled3, thanks for opening a ticket for your problem! I can see how this rule is currently not suitable for your needs.

I think the following two changes will help:

1. If the index operator is used, no errors, for that stylesheet will be thrown. The responsibility lies with the developer to make sure all properties are used.
2. Styles should be marked as used when they are referenced anywhere in the component. The developer has the responsibility that these abstractions actually end up being used as well.

How does that sound?

[yelled3]

If the index operator is used, no errors

what's the index operator?

Styles should be marked as used when they are referenced anywhere in the component.

sounds about right.

Also, maybe some rule configuration can be used to define the level of strictness you want. then you can simply override them for specific files.

Thanks for the help @Intellicode

[Intellicode]

@yelled3 The index operator is [], to access properties dynamically. I think rule configuration is a good idea, for now please disable (or refactor code) the rule in files in which this problem occurs for you.

[antoinerousseau]

Any update on this? This is not recognized for example:

const style = condition ? styles.title : styles.text
return <Text style={style}>{value}</Text>

[Intellicode]

Sorry, I have not been developing React Native apps recently, hence I haven't had a personal motive to work on the issue yet, but I definitely see it as a valid case that should be checked. I´m considering to stop throwing warnings when styles are referenced anywhere in the code, will that work for you @antoinerousseau?

[antoinerousseau]

Yeah I think that'd be enough right?