You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A Picker component for React Native which emulates the native `<select>` interfaces for iOS and Android
9
9
@@ -23,7 +23,7 @@ For either platform, you can alternatively pass down a child element of your cho
23
23
24
24
This package is built around and depends on [@react-native-picker/picker](https://github.com/react-native-picker/picker). Please make sure you install it correctly (as seen below in installation steps).
@@ -94,26 +94,26 @@ All properties mentioned below must be nested under the `style` prop. Examples o
94
94
95
95
#### iOS-specific
96
96
97
-
-The component wraps a TextInput without styling. You can target the TextInput styling with `inputIOS`.
98
-
-Other styles that can be modified for iOS are named `inputIOSContainer`, `placeholder`, `viewContainer`, `chevronContainer`, `chevron`, `chevronUp`, `chevronDown`, `chevronActive`, `done`, `modalViewTop`, `modalViewMiddle`, and `modalViewBottom`
97
+
- The component wraps a TextInput without styling. You can target the TextInput styling with `inputIOS`.
98
+
- Other styles that can be modified for iOS are named `inputIOSContainer`, `placeholder`, `viewContainer`, `chevronContainer`, `chevron`, `chevronUp`, `chevronDown`, `chevronActive`, `done`, `modalViewTop`, `modalViewMiddle`, and `modalViewBottom`
99
99
100
100
#### Android-specific
101
101
102
-
-The native Picker in its inactive state acts looks similar to a TextInput, but it has limitations on custom styling. Any styling that is possible can be applied via `inputAndroid`.
103
-
-You can add some styling customization to the active-state native Picker, [but that requires modifying some xml files](https://stackoverflow.com/a/39141949/1437023)
104
-
-If you set the prop `useNativeAndroidPickerStyle` to false, the component will allow a few other style objects: `inputAndroidContainer`, `placeholder`, and `inputAndroid`
105
-
-Other styles that can be modified for Android are named `headlessAndroidContainer` and `viewContainer`
102
+
- The native Picker in its inactive state acts looks similar to a TextInput, but it has limitations on custom styling. Any styling that is possible can be applied via `inputAndroid`.
103
+
- You can add some styling customization to the active-state native Picker, [but that requires modifying some xml files](https://stackoverflow.com/a/39141949/1437023)
104
+
- If you set the prop `useNativeAndroidPickerStyle` to false, the component will allow a few other style objects: `inputAndroidContainer`, `placeholder`, and `inputAndroid`
105
+
- Other styles that can be modified for Android are named `headlessAndroidContainer` and `viewContainer`
106
106
107
107
#### Web-specific
108
108
109
-
-The component creates a select tag
110
-
-The styling of this select tag can be modified using a nested object with the key `inputWeb`
109
+
- The component creates a select tag
110
+
- The styling of this select tag can be modified using a nested object with the key `inputWeb`
111
111
112
112
### Icon
113
113
114
-
-If a component is passed in via the `Icon` prop - it will be rendered with `{ position: 'absolute', right: 0 }` applied to its wrapping container. You can modify these values and add additional spacing to position the icon as needed by modifying `iconContainer`. You'll probably also want to add some `paddingRight` to your input styling to avoid any longer text appearing behind the icon.
115
-
-You can pass a component of your choosing (css, image, svg, etc..) for use as the icon. For ease of use, consider a library such as [react-native-shapes](https://github.com/lfkwtz/react-native-shapes) or [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).
116
-
-Examples of different icons and their usage can be found [on the example snack](https://snack.expo.io/@lfkwtz/react-native-picker-select).
114
+
- If a component is passed in via the `Icon` prop - it will be rendered with `{ position: 'absolute', right: 0 }` applied to its wrapping container. You can modify these values and add additional spacing to position the icon as needed by modifying `iconContainer`. You'll probably also want to add some `paddingRight` to your input styling to avoid any longer text appearing behind the icon.
115
+
- You can pass a component of your choosing (css, image, svg, etc..) for use as the icon. For ease of use, consider a library such as [react-native-shapes](https://github.com/lfkwtz/react-native-shapes) or [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).
116
+
- Examples of different icons and their usage can be found [on the example snack](https://snack.expo.io/@lfkwtz/react-native-picker-select).
117
117
118
118
## Accessibility
119
119
@@ -128,21 +128,21 @@ In the example below, we render the picker with supplementary description text,
128
128
129
129
```js
130
130
constselectedItem= {
131
-
title:'Selected item title',
132
-
description:'Secondary long descriptive text ...',
131
+
title:'Selected item title',
132
+
description:'Secondary long descriptive text ...',
0 commit comments