@@ -22,6 +22,7 @@ import {longOptions} from './PickerScreenLongOptions';
2222
2323const tagIcon = require ( '../../assets/icons/tags.png' ) ;
2424const dropdown = require ( '../../assets/icons/chevronDown.png' ) ;
25+ const dropdownIcon = < Icon source = { dropdown } tintColor = { Colors . $iconDefault } /> ;
2526
2627const contacts = _ . map ( contactsData , ( c , index ) => ( { ...c , value : index , label : c . name } ) ) ;
2728
@@ -56,7 +57,7 @@ export default class PickerScreen extends Component {
5657 dialogHeader : DialogProps [ 'renderPannableHeader' ] = props => {
5758 const { title} = props ;
5859 return (
59- < Text margin-15 text60 >
60+ < Text margin-15 text60 $textDefault >
6061 { title }
6162 </ Text >
6263 ) ;
@@ -76,7 +77,7 @@ export default class PickerScreen extends Component {
7677 height = "45%"
7778 bottom
7879 useSafeArea
79- containerStyle = { { backgroundColor : Colors . white } }
80+ containerStyle = { { backgroundColor : Colors . $backgroundDefault } }
8081 renderPannableHeader = { this . dialogHeader }
8182 panDirection = { PanningProvider . Directions . DOWN }
8283 pannableHeaderProps = { { title : 'Custom modal' } }
@@ -90,7 +91,9 @@ export default class PickerScreen extends Component {
9091 return (
9192 < ScrollView keyboardShouldPersistTaps = "always" >
9293 < View flex padding-20 >
93- < Text text40 > Picker</ Text >
94+ < Text text40 $textDefault >
95+ Picker
96+ </ Text >
9497 < Picker
9598 placeholder = "Favorite Language"
9699 floatingPlaceholder
@@ -103,6 +106,7 @@ export default class PickerScreen extends Component {
103106 searchPlaceholder = { 'Search a language' }
104107 searchStyle = { { color : Colors . blue30 , placeholderTextColor : Colors . grey50 } }
105108 // onSearchChange={value => console.warn('value', value)}
109+ migrateTextField
106110 >
107111 { _ . map ( longOptions , option => (
108112 < Picker . Item key = { option . value } value = { option } label = { '' } disabled = { option . disabled } />
@@ -115,7 +119,8 @@ export default class PickerScreen extends Component {
115119 onChange = { items => this . setState ( { languages : items } ) }
116120 mode = { Picker . modes . MULTI }
117121 selectionLimit = { 3 }
118- rightIconSource = { dropdown }
122+ trailingAccessory = { dropdownIcon }
123+ migrateTextField
119124 >
120125 { _ . map ( options , option => (
121126 < Picker . Item key = { option . value } value = { option } label = { '' } disabled = { option . disabled } />
@@ -152,12 +157,13 @@ export default class PickerScreen extends Component {
152157 </ Picker >
153158
154159 < Picker
155- title = "Custom modal"
160+ label = "Custom modal"
156161 placeholder = "Pick multiple Languages"
157162 value = { this . state . customModalValues }
158163 onChange = { items => this . setState ( { customModalValues : items } ) }
159164 mode = { Picker . modes . MULTI }
160- rightIconSource = { dropdown }
165+ trailingAccessory = { dropdownIcon }
166+ migrateTextField
161167 renderCustomModal = { this . renderDialog }
162168 >
163169 { _ . map ( options , option => (
@@ -171,7 +177,7 @@ export default class PickerScreen extends Component {
171177 ) ) }
172178 </ Picker >
173179
174- < Text marginB-10 text70 >
180+ < Text marginB-10 text70 $textDefault >
175181 Custom Picker:
176182 </ Text >
177183 < Picker
@@ -180,8 +186,12 @@ export default class PickerScreen extends Component {
180186 renderPicker = { ( _value ?: any , label ?: string ) => {
181187 return (
182188 < View row >
183- < Icon style = { { marginRight : 1 , height : 16 , resizeMode : 'contain' } } source = { tagIcon } />
184- < Text grey10 text80 >
189+ < Icon
190+ style = { { marginRight : 1 , height : 16 , resizeMode : 'contain' } }
191+ source = { tagIcon }
192+ tintColor = { Colors . $iconDefault }
193+ />
194+ < Text $textDefault text80 >
185195 { label } Posts
186196 </ Text >
187197 </ View >
@@ -193,11 +203,11 @@ export default class PickerScreen extends Component {
193203 ) ) }
194204 </ Picker >
195205
196- < Text text60 marginT-s5 >
206+ < Text text60 marginT-s5 $textDefault >
197207 Migrated Pickers
198208 </ Text >
199209
200- < Text marginT-20 marginB-10 text70 >
210+ < Text marginT-20 marginB-10 text70 $textDefault >
201211 Custom Picker Items:
202212 </ Text >
203213 < Picker
@@ -214,12 +224,12 @@ export default class PickerScreen extends Component {
214224 { contact ? (
215225 < >
216226 < Avatar size = { 30 } source = { { uri : contact ?. thumbnail } } />
217- < Text text70 marginL-10 >
227+ < Text text70 marginL-10 $textDefault >
218228 { contact ?. name }
219229 </ Text >
220230 </ >
221231 ) : (
222- < Text text70 grey30 >
232+ < Text text70 $textNeutral >
223233 Pick a contact
224234 </ Text >
225235 ) }
@@ -239,7 +249,7 @@ export default class PickerScreen extends Component {
239249 style = { {
240250 height : 56 ,
241251 borderBottomWidth : 1 ,
242- borderColor : Colors . grey80
252+ borderColor : Colors . $backgroundNeutral
243253 } }
244254 paddingH-15
245255 row
@@ -248,11 +258,11 @@ export default class PickerScreen extends Component {
248258 >
249259 < View row centerV >
250260 < Avatar size = { 35 } source = { { uri : contact ?. thumbnail } } />
251- < Text marginL-10 text70 grey10 >
261+ < Text marginL-10 text70 $textDefault >
252262 { contact ?. name }
253263 </ Text >
254264 </ View >
255- { props . isSelected && < Icon source = { Assets . icons . check } /> }
265+ { props . isSelected && < Icon source = { Assets . icons . check } tintColor = { Colors . $iconDefault } /> }
256266 </ View >
257267 ) ;
258268 } }
0 commit comments