Add suggestion fix for the rule `no-inline-styles`

[ahoseinian]

One of the things I notice myself doing a lot during development is moving inline styles out after I finalize them. I thought it could increase my and hopefully others' productivity if we could automize that job with help of your plugin.

Therefore I prepared a basic PR that would add the suggestion for the no-inline-styles rule. would like to get the maintainers' idea for it and hopefully make it acceptable to merge.

the idea

there are two different ways that the suggestion would act.

• if there are no StyleSheet.create nodes are defined in the document creates one and puts the styles in.

  from

  <View style={{flex:1}} />
  

  to

  <View style={styles.viewStyle} />
  
  const styles = Stylesheet.create({ viewStyle: { flex: 1 } });
  

• if there is already a StyleSheet node defined:

  from

  <View style={{flex:1}} />
  const styles = Stylesheet.create({ container: { flex: 1 } });
  

  to

  <View style={styles.viewStyle} />
  
  const styles = Stylesheet.create({container: { flex: 1 },  viewStyle: { flex: 1 } });
  

[Intellicode]

Sorry for late reply, but it looks like an interesting idea. How should it work if you have multiple views?

<View style={{flex:1}} />
<View style={{margin:10}} />

[ahoseinian]

Ultimately I think the style should be renamed by the programmer as normally it is named after the purpose of the component like container, button, etc. however, for the purpose of this suggestion, we could add a suffix to the second style like viewStyle_2, viewStyle_3, ....