feat: update unused styles docs

docs/rules/no-unused-styles.md

@@ -95,6 +95,23 @@ const Hello = React.createClass({
   }
 });
 ```
+
+Dynamic styles are marked as used only if you use a local variable with the same name as the variable in the actual component .
+
+```js
+const getStyles = () => {
+  const styles = StyleSheet.create({
+    name: {}
+  })
+  return styles;
+}
+const Hello = React.createClass({
+  render: function() {
+    const styles = getStyles();
+    return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;
+  }
+});
+```
 Rules are also marked as used when they are used in tags that contain the word `style`.
 
 ```js

tests/lib/rules/no-unused-styles.js

@@ -31,6 +31,21 @@ const tests = {
         }
       });
     `,
+  }, {
+    code: `
+      const getStyles = () => {
+        const styles = StyleSheet.create({
+          name: {}
+        })
+        return styles;
+      } 
+      const Hello = React.createClass({
+        render: function() {
+          const styles = getStyles();
+          return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;
+        }
+      });
+    `,
   }, {
     code: `
       const Hello = React.createClass({
@@ -231,6 +246,23 @@ const tests = {
     errors: [{
       message: 'Unused style detected: styles.text',
     }],
+  }, {
+    code: `
+      const getStyles = () => {
+        return OtherStyleSheet.create({
+          text: {}
+        })
+      } 
+      const Hi = React.createClass({
+        render: function() {
+          const globalStyles = getStyles();
+          return <Text textStyle={globalStyles.text}>Hi {this.props.name}</Text>;
+        }
+      });
+    `,
+    errors: [{
+      message: 'Unused style detected: undefined.text',
+    }],
   }, {
     code: `
       const styles = StyleSheet.create({