Skip to content

Commit 896dd7f

Browse files
Karthik-B-06Karthik-B-06
authored
Merge pull request #28 from Karthik-B-06/next-1.0
Next 1.0
2 parents 4a74cdf + ef441e6 commit 896dd7f

File tree

16 files changed

+23112
-51
lines changed

16 files changed

+23112
-51
lines changed

‎README.md‎

Lines changed: 148 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,166 @@
22

33
React Native Segmented Control for both iOS and Android
44

5-
## Installation
5+
## :anchor: Installation
66

77
```sh
88
npm install react-native-segmented-control
99
```
1010

11-
## Usage
11+
## :wrench: Props
1212

13-
```js
14-
import SegmentedControl from "react-native-segmented-control";
13+
| Name | Description | Required | Type | Default |
14+
| ------------------------------- | ---------------------------------------------- | -------- | -------------------- | --------------------- |
15+
| segments | An array of labels for segments | YES | Array | [] |
16+
| currentIndex | Index for the currently active segment | YES | Number | 0 |
17+
| onChange | A callback Function with pressed segment index | YES | Function | () => {} |
18+
| badgeCount | An array of badge value for segments. | NO | Array | [] |
19+
| isRTL | Controls the toggle animation direction | NO | Boolean | false |
20+
| containerMargin | The value used to determine the width | NO | Number | 16 |
21+
| activeTextStyle | active text styles | NO | TextStyle | {} |
22+
| inactiveTextStyle | inactive text styles. | NO | ViewStyle | {} |
23+
| segmentedControlWrapper | Style object for the Segmented Control. | NO | ViewStyle. | {} |
24+
| pressableWrapper | Style object for the Pressable Container | NO | ViewStyle. | {} |
25+
| tileStyle | Style object for the Absolute positioned tile | NO | ViewStyle | {} |
1526

16-
// ...
1727

18-
const result = await SegmentedControl.multiply(3, 7);
28+
> :warning: `segmentedControlWrapper` accepts all View styles and does override some default styles provided by the package. Make sure you use it properly :)
29+
30+
> :warning: `activeTextStyle` and `inactiveTextStyle` accepts all Text styles and overrides the defaults. Make sure you use it properly :)
31+
32+
> :warning: `tileStyle` accepts all View styles and does override some default styles provided by the package. Make sure you use it properly :)
33+
34+
> :information_source: To apply your own `shadowStyles` use the tileStyle prop
35+
36+
37+
38+
## :mag: Usage
39+
40+
```tsx
41+
import SegmentedControl from 'react-native-segmented-control';
42+
43+
import * as React from 'react';
44+
import { StyleSheet, View } from 'react-native';
45+
import SegmentedControl from './SegmentedControl';
46+
47+
export default function App() {
48+
const [tabIndex, setTabIndex] = React.useState(0);
49+
const [tabIndex1, setTabIndex1] = React.useState(0);
50+
const [tabIndex2, setTabIndex2] = React.useState(0);
51+
const [tabIndex3, setTabIndex3] = React.useState(0);
52+
const [tabIndex4, setTabIndex4] = React.useState(0);
53+
const [tabIndex5, setTabIndex5] = React.useState(0);
54+
const [tabIndex6, setTabIndex6] = React.useState(0);
55+
56+
return (
57+
<View style={styles.container}>
58+
<View style={styles.box}>
59+
<SegmentedControl
60+
containerMargin={16}
61+
segments={['Label 1', 'Label 2']}
62+
onChange={(index) => setTabIndex(index)}
63+
currentIndex={tabIndex}
64+
/>
65+
</View>
66+
<View style={styles.box}>
67+
<SegmentedControl
68+
containerMargin={16}
69+
segments={['Label 1', 'Label 2', 'Label 3']}
70+
onChange={(index) => setTabIndex1(index)}
71+
currentIndex={tabIndex1}
72+
/>
73+
</View>
74+
<View style={styles.box}>
75+
<SegmentedControl
76+
containerMargin={16}
77+
segments={['Label 1', 'Label 2', 'Label 3', 'Label 4']}
78+
onChange={(index) => setTabIndex2(index)}
79+
currentIndex={tabIndex2}
80+
/>
81+
</View>
82+
<View style={styles.box}>
83+
<SegmentedControl
84+
containerMargin={16}
85+
segments={['Label 1', 'Label 2', 'Label 3']}
86+
onChange={(index) => setTabIndex3(index)}
87+
currentIndex={tabIndex3}
88+
segmentedControlWrapper={{ backgroundColor: '#4a5568' }}
89+
activeTextStyle={styles.customBlackColor}
90+
inactiveTextStyle={styles.customWhiteColor}
91+
/>
92+
</View>
93+
<View style={styles.box}>
94+
<SegmentedControl
95+
containerMargin={16}
96+
segments={['Label 1', 'Label 2', 'Label 3', 'Label 4']}
97+
onChange={(index) => setTabIndex4(index)}
98+
currentIndex={tabIndex4}
99+
segmentedControlWrapper={{ backgroundColor: '#a3e635' }}
100+
activeTextStyle={styles.customGreenColor}
101+
inactiveTextStyle={styles.customWhiteColor}
102+
/>
103+
</View>
104+
<View style={styles.box}>
105+
<SegmentedControl
106+
containerMargin={16}
107+
segments={['Label 1', 'Label 2', 'Label 3']}
108+
onChange={(index) => setTabIndex5(index)}
109+
currentIndex={tabIndex5}
110+
segmentedControlWrapper={{ backgroundColor: '#7dd3fc' }}
111+
activeTextStyle={styles.customBlueTextColor}
112+
inactiveTextStyle={styles.customWhiteColor}
113+
tileStyle={styles.customBlueColor}
114+
badgeCount={[2]}
115+
/>
116+
</View>
117+
<View style={styles.box}>
118+
<SegmentedControl
119+
containerMargin={16}
120+
segments={['Label 1', 'Label 2', 'Label 3']}
121+
onChange={(index) => setTabIndex6(index)}
122+
currentIndex={tabIndex6}
123+
badgeCount={[2, null, 1]}
124+
/>
125+
</View>
126+
</View>
127+
);
128+
}
129+
130+
const styles = StyleSheet.create({
131+
container: {
132+
flex: 1,
133+
justifyContent: 'center',
134+
},
135+
box: {
136+
marginHorizontal: 16,
137+
marginVertical: 16,
138+
},
139+
customBlackColor: {
140+
color: 'black',
141+
},
142+
customWhiteColor: {
143+
color: 'white',
144+
},
145+
customGreenColor: {
146+
color: '#3f6212',
147+
},
148+
customBlueColor: {
149+
backgroundColor: '#e0f2fe',
150+
},
151+
customBlueTextColor: {
152+
color: '#0369a1',
153+
},
154+
});
19155
```
20156

21-
## Contributing
157+
## :v: Contributing
22158

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

25-
## License
161+
## :man: Author
162+
163+
[Karthik B](https://twitter.com/_iam_karthik)
164+
165+
## :clipboard: License
26166

27167
MIT

‎babel.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
module.exports = {
22
presets: ['module:metro-react-native-babel-preset'],
3+
plugins: ['react-native-reanimated/plugin'],
34
};

‎example/assets/adaptive-icon.png‎

17.1 KB
Loading

‎example/assets/favicon.png‎

1.43 KB
Loading

‎example/assets/icon.png‎

21.9 KB
Loading

‎example/assets/splash.png‎

46.2 KB
Loading

‎example/babel.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = function (api) {
1717
},
1818
},
1919
],
20+
'react-native-reanimated/plugin',
2021
],
2122
};
2223
};

‎example/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'react-native-gesture-handler';
12
import { registerRootComponent } from 'expo';
23

34
import App from './src/App';

‎example/package.json‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,16 @@
1212
"test": "jest"
1313
},
1414
"dependencies": {
15-
"expo": "^40.0.0",
16-
"expo-splash-screen": "~0.8.1",
17-
"react": "16.13.1",
18-
"react-dom": "16.13.1",
19-
"react-native": "0.63.4",
20-
"react-native-unimodules": "~0.12.0",
21-
"react-native-web": "~0.14.9"
15+
"@types/react-native": "^0.66.12",
16+
"expo": "^44.0.5",
17+
"expo-splash-screen": "~0.14.1",
18+
"react": "17.0.2",
19+
"react-dom": "17.0.2",
20+
"react-native": "0.64.3",
21+
"react-native-gesture-handler": "~2.1.0",
22+
"react-native-reanimated": "~2.3.1",
23+
"react-native-unimodules": "~0.15.0",
24+
"react-native-web": "~0.17.5"
2225
},
2326
"devDependencies": {
2427
"@babel/core": "~7.12.10",

‎example/src/App.tsx‎

Lines changed: 94 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,112 @@
11
import * as React from 'react';
2-
3-
import { StyleSheet, View, Text } from 'react-native';
4-
import SegmentedControl from 'react-native-segmented-control';
2+
import { StyleSheet, View } from 'react-native';
3+
import SegmentedControl from './SegmentedControl';
54

65
export default function App() {
7-
const [result, setResult] = React.useState<number | undefined>();
8-
9-
React.useEffect(() => {
10-
SegmentedControl.multiply(3, 7).then(setResult);
11-
}, []);
6+
const [tabIndex, setTabIndex] = React.useState(0);
7+
const [tabIndex1, setTabIndex1] = React.useState(0);
8+
const [tabIndex2, setTabIndex2] = React.useState(0);
9+
const [tabIndex3, setTabIndex3] = React.useState(0);
10+
const [tabIndex4, setTabIndex4] = React.useState(0);
11+
const [tabIndex5, setTabIndex5] = React.useState(0);
12+
const [tabIndex6, setTabIndex6] = React.useState(0);
1213

1314
return (
1415
<View style={styles.container}>
15-
<Text>Result: {result}</Text>
16+
<View style={styles.box}>
17+
<SegmentedControl
18+
containerMargin={16}
19+
segments={['Label 1', 'Label 2']}
20+
onChange={(index) => setTabIndex(index)}
21+
currentIndex={tabIndex}
22+
/>
23+
</View>
24+
<View style={styles.box}>
25+
<SegmentedControl
26+
containerMargin={16}
27+
segments={['Label 1', 'Label 2', 'Label 3']}
28+
onChange={(index) => setTabIndex1(index)}
29+
currentIndex={tabIndex1}
30+
/>
31+
</View>
32+
<View style={styles.box}>
33+
<SegmentedControl
34+
containerMargin={16}
35+
segments={['Label 1', 'Label 2', 'Label 3', 'Label 4']}
36+
onChange={(index) => setTabIndex2(index)}
37+
currentIndex={tabIndex2}
38+
/>
39+
</View>
40+
<View style={styles.box}>
41+
<SegmentedControl
42+
containerMargin={16}
43+
segments={['Label 1', 'Label 2', 'Label 3']}
44+
onChange={(index) => setTabIndex3(index)}
45+
currentIndex={tabIndex3}
46+
segmentedControlWrapper={{ backgroundColor: '#4a5568' }}
47+
activeTextStyle={styles.customBlackColor}
48+
inactiveTextStyle={styles.customWhiteColor}
49+
/>
50+
</View>
51+
<View style={styles.box}>
52+
<SegmentedControl
53+
containerMargin={16}
54+
segments={['Label 1', 'Label 2', 'Label 3', 'Label 4']}
55+
onChange={(index) => setTabIndex4(index)}
56+
currentIndex={tabIndex4}
57+
segmentedControlWrapper={{ backgroundColor: '#a3e635' }}
58+
activeTextStyle={styles.customGreenColor}
59+
inactiveTextStyle={styles.customWhiteColor}
60+
/>
61+
</View>
62+
<View style={styles.box}>
63+
<SegmentedControl
64+
containerMargin={16}
65+
segments={['Label 1', 'Label 2', 'Label 3']}
66+
onChange={(index) => setTabIndex5(index)}
67+
currentIndex={tabIndex5}
68+
segmentedControlWrapper={{ backgroundColor: '#7dd3fc' }}
69+
activeTextStyle={styles.customBlueTextColor}
70+
inactiveTextStyle={styles.customWhiteColor}
71+
tileStyle={styles.customBlueColor}
72+
badgeCount={[2]}
73+
/>
74+
</View>
75+
<View style={styles.box}>
76+
<SegmentedControl
77+
containerMargin={16}
78+
segments={['Label 1', 'Label 2', 'Label 3']}
79+
onChange={(index) => setTabIndex6(index)}
80+
currentIndex={tabIndex6}
81+
badgeCount={[2, null, 1]}
82+
/>
83+
</View>
1684
</View>
1785
);
1886
}
1987

2088
const styles = StyleSheet.create({
2189
container: {
2290
flex: 1,
23-
alignItems: 'center',
2491
justifyContent: 'center',
2592
},
2693
box: {
27-
width: 60,
28-
height: 60,
29-
marginVertical: 20,
94+
marginHorizontal: 16,
95+
marginVertical: 16,
96+
},
97+
customBlackColor: {
98+
color: 'black',
99+
},
100+
customWhiteColor: {
101+
color: 'white',
102+
},
103+
customGreenColor: {
104+
color: '#3f6212',
105+
},
106+
customBlueColor: {
107+
backgroundColor: '#e0f2fe',
108+
},
109+
customBlueTextColor: {
110+
color: '#0369a1',
30111
},
31112
});

0 commit comments

Comments
 (0)