minor fix with how we render custom native picker

Author: ethanshar

demo/src/screens/componentScreens/PickerScreen.js

@@ -1,7 +1,16 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView, Image} from 'react-native';
-import {View, Colors, Dialog, Text, Stepper, Typography, Picker, Avatar, Assets, TagsInput, PanningProvider} from 'react-native-ui-lib'; //eslint-disable-line
+import {
+  View,
+  Colors,
+  Dialog,
+  Text,
+  Picker,
+  Avatar,
+  Assets,
+  PanningProvider
+} from 'react-native-ui-lib'; //eslint-disable-line
 import contacts from '../../data/conversations';
 import tagIcon from '../../assets/icons/tags.png';
 import dropdown from '../../assets/icons/chevronDown.png';
@@ -11,13 +20,13 @@ const options = [
   {label: 'Java', value: 'java'},
   {label: 'Python', value: 'python'},
   {label: 'C++', value: 'c++', disabled: true},
-  {label: 'Perl', value: 'perl'},
+  {label: 'Perl', value: 'perl'}
 ];
 const filters = [
   {label: 'All', value: 0},
   {label: 'Draft', value: 1},
   {label: 'Published', value: 2},
-  {label: 'Scheduled', value: 3},
+  {label: 'Scheduled', value: 3}
 ];
 
 export default class PickerScreen extends Component {
@@ -35,7 +44,7 @@ export default class PickerScreen extends Component {
       contact: contacts[0],
       tags: [{label: 'Amit'}, {label: 'Ethan'}],
       tags2: ['Tags', 'Input'],
-      tags3: ['Non', 'Removable', 'Tags'],
+      tags3: ['Non', 'Removable', 'Tags']
     };
   }
 
@@ -74,9 +83,7 @@ export default class PickerScreen extends Component {
     return (
       <ScrollView keyboardShouldPersistTaps="always">
         <View flex padding-20>
-          <Text text40>
-            Picker
-          </Text>
+          <Text text40>Picker</Text>
           <Picker
             placeholder="Favorite Language"
             floatingPlaceholder
@@ -91,7 +98,7 @@ export default class PickerScreen extends Component {
             // onSearchChange={value => console.warn('value', value)}
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option} disabled={option.disabled} />
+              <Picker.Item key={option.value} value={option} disabled={option.disabled}/>
             ))}
           </Picker>
 
@@ -105,7 +112,7 @@ export default class PickerScreen extends Component {
               hideUnderline
             >
               {_.map(options, option => (
-                <Picker.Item key={option.value} value={option} disabled={option.disabled} />
+                <Picker.Item key={option.value} value={option} disabled={option.disabled}/>
               ))}
             </Picker>
           </View>
@@ -118,7 +125,14 @@ export default class PickerScreen extends Component {
             onChange={nativePickerValue => this.setState({nativePickerValue})}
             rightIconSource={dropdown}
             containerStyle={{marginTop: 20}}
-            // renderNativePicker={(props) => {
+            // renderPicker={() => {
+            //   return (
+            //     <View>
+            //       <Text>Open Native Picker!</Text>
+            //     </View>
+            //   );
+            // }}
+            // renderNativePicker={props => {
             //   return (
             //     <View flex bg-red50>
             //       <Text>CUSTOM NATIVE PICKER</Text>
@@ -136,7 +150,7 @@ export default class PickerScreen extends Component {
             cancelLabelStyle={{color: Colors.violet30}}
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled} />
+              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
             ))}
           </Picker>
 
@@ -151,7 +165,7 @@ export default class PickerScreen extends Component {
               renderCustomModal={this.renderDialog}
             >
               {_.map(options, option => (
-                <Picker.Item key={option.value} value={option} label={option.label} disabled={option.disabled} />
+                <Picker.Item key={option.value} value={option} label={option.label} disabled={option.disabled}/>
               ))}
             </Picker>
           </View>
@@ -165,7 +179,7 @@ export default class PickerScreen extends Component {
             renderPicker={({label}) => {
               return (
                 <View row center>
-                  <Image style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon} />
+                  <Image style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
                   <Text dark10 text80>
                     {label} Posts
                   </Text>
@@ -174,7 +188,7 @@ export default class PickerScreen extends Component {
             }}
           >
             {_.map(filters, filter => (
-              <Picker.Item key={filter.value} value={filter} />
+              <Picker.Item key={filter.value} value={filter}/>
             ))}
           </Picker>
 
@@ -188,7 +202,7 @@ export default class PickerScreen extends Component {
             renderPicker={contact => {
               return (
                 <View row center>
-                  <Avatar size={30} imageSource={{uri: contact.thumbnail}} />
+                  <Avatar size={30} imageSource={{uri: contact.thumbnail}}/>
                   <Text text70 marginL-10>
                     {contact.name}
                   </Text>
@@ -205,20 +219,20 @@ export default class PickerScreen extends Component {
                     style={{
                       height: 56,
                       borderBottomWidth: 1,
-                      borderColor: Colors.dark80,
+                      borderColor: Colors.dark80
                     }}
                     paddingH-15
                     row
                     centerV
                     spread
                   >
                     <View row centerV>
-                      <Avatar size={35} imageSource={{uri: item.thumbnail}} />
+                      <Avatar size={35} imageSource={{uri: item.thumbnail}}/>
                       <Text marginL-10 text70 dark10>
                         {item.name}
                       </Text>
                     </View>
-                    {props.isSelected && <Image source={Assets.icons.check} />}
+                    {props.isSelected && <Image source={Assets.icons.check}/>}
                   </View>
                 )}
                 getItemLabel={item => item.name}

src/components/picker/NativePicker.js

@@ -5,7 +5,6 @@ import TextField from '../inputs/TextField';
 import {WheelPicker} from '../../nativeComponents';
 import PickerDialog from './PickerDialog';
 import TouchableOpacity from '../touchableOpacity';
-import View from '../view';
 import {Colors} from '../../style';
 
 class NativePicker extends BaseComponent {
@@ -80,12 +79,12 @@ class NativePicker extends BaseComponent {
     if (_.isFunction(renderPicker)) {
       const {selectedValue} = this.state;
       return (
-        <View left>
+        <>
           <TouchableOpacity {...customPickerProps} link onPress={() => this.toggleDialog(true)} testID={testID}>
             {renderPicker(selectedValue)}
           </TouchableOpacity>
           {this.renderPickerDialog()}
-        </View>
+        </>
       );
     }