Skip to content

Commit 21a6b2f

Browse files
committed
chore: updated README with renderTile prop
1 parent df65124 commit 21a6b2f

File tree

1 file changed

+19
-16
lines changed

1 file changed

+19
-16
lines changed

README.md

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,27 +27,30 @@ Make sure you have [React Native Reanimated](https://docs.swmansion.com/react-na
2727

2828
## :wrench: Props
2929

30-
| Name | Description | Required | Type | Default |
31-
| ----------------------- | ---------------------------------------------- | -------- | --------- | -------- |
32-
| segments | An array of labels for segments | YES | Array | [] |
33-
| currentIndex | Index for the currently active segment | YES | Number | 0 |
34-
| onChange | A callback Function with pressed segment index | YES | Function | () => {} |
35-
| badgeValues | An array of badge value for segments. | NO | Array | [] |
36-
| isRTL | Controls the toggle animation direction | NO | Boolean | false |
37-
| containerMargin | The value used to determine the width | NO | Number | 16 |
38-
| activeTextStyle | active text styles | NO | TextStyle | {} |
39-
| inactiveTextStyle | inactive text styles. | NO | TextStyle | {} |
40-
| segmentedControlWrapper | Style object for the Segmented Control. | NO | ViewStyle | {} |
41-
| pressableWrapper | Style object for the Pressable Container | NO | ViewStyle | {} |
42-
| tileStyle | Style object for the Absolute positioned tile | NO | ViewStyle | {} |
43-
| activeBadgeStyle | Active Badge Style | NO | ViewStyle | {} |
44-
| inactiveBadgeStyle | Inactive Badge Style | NO | ViewStyle | {} |
45-
| badgeTextStyle | Badge text styles | NO | TextStyle | {} |
30+
| Name | Description | Required | Type | Default |
31+
| ----------------------- | ---------------------------------------------- | -------- | --------- | -------- |
32+
| segments | An array of labels for segments | YES | Array | [] |
33+
| currentIndex | Index for the currently active segment | YES | Number | 0 |
34+
| onChange | A callback Function with pressed segment index | YES | Function | () => {} |
35+
| badgeValues | An array of badge value for segments. | NO | Array | [] |
36+
| isRTL | Controls the toggle animation direction | NO | Boolean | false |
37+
| containerMargin | The value used to determine the width | NO | Number | 16 |
38+
| activeTextStyle | active text styles | NO | TextStyle | {} |
39+
| inactiveTextStyle | inactive text styles. | NO | TextStyle | {} |
40+
| segmentedControlWrapper | Style object for the Segmented Control. | NO | ViewStyle | {} |
41+
| pressableWrapper | Style object for the Pressable Container | NO | ViewStyle | {} |
42+
| tileStyle | Style object for the Absolute positioned tile | NO | ViewStyle | {} |
43+
| activeBadgeStyle | Active Badge Style | NO | ViewStyle | {} |
44+
| inactiveBadgeStyle | Inactive Badge Style | NO | ViewStyle | {} |
45+
| badgeTextStyle | Badge text styles | NO | TextStyle | {} |
46+
| renderTile | Render a custom tile component | NO | Function | undefined |
4647

4748
> :warning: all View styles or Text Styles passed as props overrides some default styles provided by the package. Make sure you use it properly :)
4849
4950
> :information_source: To apply your own `shadowStyles` use the tileStyle prop
5051
52+
> :information_source: `renderTile` takes a function with `style`, `transform` and `width`. You can use these to style your custom tile to look the same as the default style (e.g. if you just wanted to change the animation)
53+
5154
## :mag: Usage
5255

5356
```tsx

0 commit comments

Comments
 (0)