Skip to content

Commit

Permalink
docs: add info about dynamic functions
Browse files Browse the repository at this point in the history
  • Loading branch information
jpudysz committed Oct 3, 2023
1 parent e9ead68 commit c252875
Showing 1 changed file with 37 additions and 0 deletions.
37 changes: 37 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down

0 comments on commit c252875

Please sign in to comment.