From c2528751fdcaaa36723fd235f3c78f8c324355ac Mon Sep 17 00:00:00 2001
From: Jacek Pudysz <jacekpudysz@gmail.com>
Date: Tue, 3 Oct 2023 15:05:02 +0200
Subject: [PATCH] docs: add info about dynamic functions

---
 README.md | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/README.md b/README.md
index 60501fbd..05e3de9c 100644
--- a/README.md
+++ b/README.md
@@ -230,6 +230,43 @@ const stylesheet = createStyles(theme => ({
 }))
 ```
 
+## Dynamic functions
+
+Every style can be transformed to dynamic function to take additional parameters from JSX:
+
+```tsx
+export const ExampleUnistyles = () => {
+    const { styles } = useStyles(stylesheet)
+    return (
+        <ScrollView contentContainerStyle={styles.scrollContainer}>
+            {posts.map((post, index) => (
+                <View
+                    key={post.key}
+                    // call it as regular functions
+                    style={styles.post(index)}
+                >
+                    <Text>
+                        {post.title}
+                    </Text>
+                </View>
+            ))}
+        </ScrollView>
+    )
+}
+
+const stylesheet = createStyles({
+    scrollContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    // dynamic function
+    post: (index: number) => ({
+        backgroundColor: index % 2 === 0 ? 'gold' : 'silver',
+    })
+})
+```
+
 ## Example
 
 In order to check out working example go to [example/](./example).