Skip to content

Commit eaef22d

Browse files
Karthik-B-06Karthik-B-06
committed
chore: 📝 updated README
1 parent 26c0680 commit eaef22d

File tree

1 file changed

+27
-31
lines changed

1 file changed

+27
-31
lines changed

‎README.md‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div align="center">
22
<h1>React Native Segmented Control</h1>
33

4-
![npm](https://badgen.net/badge/license/MIT/blue)
5-
[![npm](https://badgen.net/npm/dt/rn-segmented-control)](https://www.npmjs.com/package/rn-segmented-control)
6-
[![npm](https://badgen.net/npm/v/rn-segmented-control)](https://www.npmjs.com/package/rn-segmented-control)
7-
[![](https://badgen.net/npm/types/tslib)](https://badgen.net/npm/types/tslib)
4+
![npm](https://badgen.net/badge/license/MIT/blue)
5+
[![npm](https://badgen.net/npm/dt/rn-segmented-control)](https://www.npmjs.com/package/rn-segmented-control)
6+
[![npm](https://badgen.net/npm/v/rn-segmented-control)](https://www.npmjs.com/package/rn-segmented-control)
7+
[![](https://badgen.net/npm/types/tslib)](https://badgen.net/npm/types/tslib)
88

99
![SegmentedControl (1)](https://user-images.githubusercontent.com/35562287/149624807-88be6b2c-e9ee-4f1d-80d9-8b3711df0a70.gif)
1010
React Native Segmented Control for both iOS, Android and Web 😎
@@ -23,34 +23,30 @@ yarn add rn-segmented-control
2323

2424
## :arrows_counterclockwise: Dependencies
2525

26-
Make sure you have [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs) and [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) installed and configured.
26+
Make sure you have [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs) and [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) installed and configured.
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-
| badgeCount | 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 | ViewStyle | {} |
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-
44-
45-
> :warning: `segmentedControlWrapper` accepts all View styles and does override some default styles provided by the package. Make sure you use it properly :)
46-
47-
> :warning: `activeTextStyle` and `inactiveTextStyle` accepts all Text styles and overrides the defaults. Make sure you use it properly :)
48-
49-
> :warning: `tileStyle` accepts all View styles and does override some default styles provided by the package. Make sure you use it properly :)
50-
51-
> :information_source: To apply your own `shadowStyles` use the tileStyle prop
52-
53-
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+
| tileStyle | Inactive Badge Style | NO | ViewStyle | {} |
45+
| tileStyle | Badge text styles | NO | TextStyle | {} |
46+
47+
> :warning: all View styles or Text Styles passed as props overrides some default styles provided by the package. Make sure you use it properly :)
48+
49+
> :information_source: To apply your own `shadowStyles` use the tileStyle prop
5450
5551
## :mag: Usage
5652

@@ -104,7 +100,9 @@ const styles = StyleSheet.create({
104100
},
105101
});
106102
```
103+
107104
### Working Examples
105+
108106
## :iphone: iOS and Android working Example.
109107

110108
![SegmentedControl](https://user-images.githubusercontent.com/35562287/149624111-2b3d1f7f-a685-404a-a167-f7020706880d.gif)
@@ -113,8 +111,6 @@ const styles = StyleSheet.create({
113111

114112
![DesktopExample](https://user-images.githubusercontent.com/35562287/149624298-c415d1cc-5f65-4e44-8efb-02a9e0f96dbb.gif)
115113

116-
117-
118114
## :v: Contributing
119115

120116
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

0 commit comments

Comments
 (0)