-
Notifications
You must be signed in to change notification settings - Fork 86
/
index.d.ts
140 lines (124 loc) · 3.23 KB
/
index.d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
// These types are derived from @types/react-native.
// All credit goes to amazing people who made the react-native typings.
import * as React from 'react';
import {
ViewProps,
NativeSyntheticEvent,
NativeMethods,
TargetedEvent,
ViewStyle,
} from 'react-native';
type Constructor<T> = new (...args: any[]) => T;
export interface NativeSegmentedControlIOSChangeEvent extends TargetedEvent {
value: string;
selectedSegmentIndex: number;
}
export type FontStyle = {
/**
* Font Color of Segmented Control
*/
color?: string;
/**
* Font Size of Segmented Control
*/
fontSize?: number;
/**
* Font Family of the Segmented Control
*/
fontFamily?: string;
/**
* Font Weight of the Segmented Control
*/
fontWeight?:
| 'normal'
| 'bold'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900';
};
export interface SegmentedControlProps extends ViewProps {
/**
* If false the user won't be able to interact with the control. Default value is true.
*/
enabled?: boolean;
/**
* If true, then selecting a segment won't persist visually.
* The onValueChange callback will still work as expected.
*/
momentary?: boolean;
/**
* Callback that is called when the user taps a segment;
* passes the event as an argument
*/
onChange?: (
event: NativeSyntheticEvent<NativeSegmentedControlIOSChangeEvent>,
) => void;
/**
* Callback that is called when the user taps a segment; passes the segment's value as an argument
*/
onValueChange?: (value: string) => void;
/**
* The index in props.values of the segment to be (pre)selected.
*/
selectedIndex?: number;
/**
* Accent color of the control.
*/
tintColor?: string;
/**
* (iOS 13+ only)
* Background color of the control.
*/
backgroundColor?: string;
/**
* The labels for the control's segment buttons, in order.
*/
values?: string[];
/**
* (iOS 13+ only)
* Overrides the control's appearance irrespective of the OS theme
*/
appearance?: 'dark' | 'light';
/**
* Font style properties of the Segmented Control
*/
fontStyle?: FontStyle;
/**
* Active Font style properties of the Segmented Control
*/
activeFontStyle?: FontStyle;
/**
* Touchable style properties for Segmented Control Tab
*/
tabStyle?: ViewStyle;
}
/**
* Use `SegmentedControl` to render a UISegmentedControl iOS.
*
* #### Programmatically changing selected index
*
* The selected index can be changed on the fly by assigning the
* selectIndex prop to a state variable, then changing that variable.
* Note that the state variable would need to be updated as the user
* selects a value and changes the index, as shown in the example below.
*
* ````
* <SegmentedControl
* values={['One', 'Two']}
* selectedIndex={this.state.selectedIndex}
* onChange={(event) => {
* this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
* }}
* />
* ````
*/
declare class SegmentedControlComponent extends React.Component<SegmentedControlProps> {}
declare const SegmentedControlBase: Constructor<NativeMethods> &
typeof SegmentedControlComponent;
export default class SegmentedControl extends SegmentedControlBase {}