Skip to content

Commit

Permalink
docs: tell about a secondary layout argument in createStyleSheet
Browse files Browse the repository at this point in the history
  • Loading branch information
justblender committed Mar 1, 2024
1 parent 4940340 commit d3c967c
Showing 1 changed file with 16 additions and 0 deletions.
16 changes: 16 additions & 0 deletions docs/src/content/docs/reference/create-stylesheet.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,22 @@ const stylesheet = createStyleSheet(theme => ({
}))
```

In addition to the `theme` argument, you can also accept the `layout` argument when passing a function, which can be useful to access screen orientation, dimensions, insets, and more.

```ts /theme/
const stylesheet = createStyleSheet((theme, layout) => ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: layout.insets.top,
backgroundColor: layout.orientation === 'portrait'
? theme.colors.accent
: theme.colors.oak
},
}))
```

Importantly, you'll receive the same TypeScript hints as with `StyleSheet.create`!

</Seo>

0 comments on commit d3c967c

Please sign in to comment.