Skip to content

Commit ba36942

Browse files
Karthik-B-06Karthik-B-06
authored
Merge pull request #29 from Karthik-B-06/next
2 parents 219fb51 + eaef22d commit ba36942

File tree

4 files changed

+169
-60
lines changed

4 files changed

+169
-60
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.

‎example/src/App.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { StyleSheet, View } from 'react-native';
3-
import SegmentedControl from 'rn-segmented-control';
3+
import SegmentedControl from './SegmentedControl';
44

55
export default function App() {
66
const [tabIndex, setTabIndex] = React.useState(0);
@@ -19,6 +19,7 @@ export default function App() {
1919
segments={['Label 1', 'Label 2']}
2020
onChange={(index) => setTabIndex(index)}
2121
currentIndex={tabIndex}
22+
badgeValues={[2, null, 1]}
2223
/>
2324
</View>
2425
<View style={styles.box}>
@@ -69,7 +70,7 @@ export default function App() {
6970
activeTextStyle={styles.customBlueTextColor}
7071
inactiveTextStyle={styles.customWhiteColor}
7172
tileStyle={styles.customBlueColor}
72-
badgeCount={[2]}
73+
badgeValues={[2]}
7374
/>
7475
</View>
7576
<View style={styles.box}>
@@ -78,7 +79,7 @@ export default function App() {
7879
segments={['Label 1', 'Label 2', 'Label 3']}
7980
onChange={(index) => setTabIndex6(index)}
8081
currentIndex={tabIndex6}
81-
badgeCount={[2, null, 1]}
82+
badgeValues={[2, null, 1]}
8283
/>
8384
</View>
8485
</View>

‎example/src/SegmentedControl.tsx‎

Lines changed: 69 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,75 @@ import Animated, {
1515
import { widthPercentageToDP } from 'react-native-responsive-screen';
1616

1717
interface SegmentedControlProps {
18+
/**
19+
* The Segments Text Array
20+
*/
1821
segments: Array<string>;
22+
/**
23+
* The Current Active Segment Index
24+
*/
1925
currentIndex: number;
26+
/**
27+
* A callback onPress of a Segment
28+
*/
2029
onChange: (index: number) => void;
21-
badgeCount?: Array<number | null>;
30+
/**
31+
* An array of Badge Values corresponding to the Segment
32+
*/
33+
badgeValues?: Array<number | null>;
34+
/**
35+
* Is right-to-left mode.
36+
*/
2237
isRTL?: boolean;
38+
/**
39+
* The container margin for the segmented control
40+
* Used to calculate the width of Segmented Control
41+
*/
2342
containerMargin?: number;
43+
/**
44+
* Active Segment Text Style
45+
*/
2446
activeTextStyle?: TextStyle;
47+
/**
48+
* InActive Segment Text Style
49+
*/
2550
inactiveTextStyle?: TextStyle;
51+
/**
52+
* Segment Container Styles
53+
*/
2654
segmentedControlWrapper?: ViewStyle;
55+
/**
56+
* Pressable Container Styles
57+
*/
2758
pressableWrapper?: ViewStyle;
59+
/**
60+
* The moving Tile Container Styles
61+
*/
2862
tileStyle?: ViewStyle;
63+
/**
64+
* Active Badge Styles
65+
*/
66+
activeBadgeStyle?: ViewStyle;
67+
/**
68+
* Inactive Badge Styles
69+
*/
70+
inactiveBadgeStyle?: ViewStyle;
71+
/**
72+
* Badge Text Styles
73+
*/
74+
badgeTextStyle?: TextStyle;
2975
}
3076

3177
const defaultShadowStyle = {
3278
shadowColor: '#000',
3379
shadowOffset: {
34-
width: 0,
35-
height: 2,
80+
width: 1,
81+
height: 1,
3682
},
37-
shadowOpacity: 0.23,
38-
shadowRadius: 2.62,
83+
shadowOpacity: 0.025,
84+
shadowRadius: 1,
3985

40-
elevation: 4,
86+
elevation: 1,
4187
};
4288

4389
const DEFAULT_SPRING_CONFIG = {
@@ -53,14 +99,17 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
5399
segments,
54100
currentIndex,
55101
onChange,
56-
badgeCount = [],
102+
badgeValues = [],
57103
isRTL = false,
58104
containerMargin = 0,
59105
activeTextStyle,
60106
inactiveTextStyle,
61107
segmentedControlWrapper,
62108
pressableWrapper,
63109
tileStyle,
110+
activeBadgeStyle,
111+
inactiveBadgeStyle,
112+
badgeTextStyle,
64113
}: SegmentedControlProps) => {
65114
const width = widthPercentageToDP('100%') - containerMargin * 2;
66115
const translateValue = width / segments.length;
@@ -91,34 +140,41 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
91140

92141
const finalisedActiveTextStyle: TextStyle = {
93142
fontSize: 15,
94-
fontWeight: '500',
143+
fontWeight: '600',
95144
textAlign: 'center',
96-
color: '#0ea5e9',
145+
color: '#111827',
97146
...activeTextStyle,
98147
};
99148

100149
const finalisedInActiveTextStyle: TextStyle = {
101150
fontSize: 15,
102151
textAlign: 'center',
103-
color: '#1f2937',
152+
color: '#4b5563',
104153
...inactiveTextStyle,
105154
};
106155

107156
const finalisedActiveBadgeStyle: ViewStyle = {
108-
backgroundColor: '#0ea5e9',
157+
backgroundColor: '#27272a',
109158
marginLeft: 4,
159+
alignItems: 'center',
160+
justifyContent: 'center',
161+
...activeBadgeStyle,
110162
};
111163

112164
const finalisedInActiveBadgeStyle: ViewStyle = {
113165
backgroundColor: '#6b7280',
114166
marginLeft: 4,
167+
justifyContent: 'center',
168+
alignItems: 'center',
169+
...inactiveBadgeStyle,
115170
};
116171

117172
const finalisedBadgeTextStyle: TextStyle = {
118173
fontSize: 11,
119174
fontWeight: '500',
120175
textAlign: 'center',
121176
color: '#FFFFFF',
177+
...badgeTextStyle,
122178
};
123179

124180
return (
@@ -154,7 +210,7 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
154210
>
155211
{segment}
156212
</Text>
157-
{badgeCount[index] && (
213+
{badgeValues[index] && (
158214
<View
159215
style={[
160216
styles.defaultBadgeContainerStyle,
@@ -164,7 +220,7 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
164220
]}
165221
>
166222
<Text style={finalisedBadgeTextStyle}>
167-
{badgeCount[index]}
223+
{badgeValues[index]}
168224
</Text>
169225
</View>
170226
)}

0 commit comments

Comments
 (0)