Nativebase: Picker ios icon - bug which is always float right to the end of the screen

[khanzzirfan]

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

node -v = 8.10.0
npm = 6.4.1

"dependencies": {
    "@expo/vector-icons": "^10.0.2",
    "buffer": "^5.2.1",
    "expo": "^33.0.0",
    "expo-camera": "^5.0.1",
    "expo-constants": "^5.0.1",
    "expo-file-system": "^5.0.1",
    "expo-font": "^5.0.1",
    "expo-permissions": "^5.0.1",
    "expo-sqlite": "^5.0.1",
    "lodash": "^4.17.11",
    "moment": "^2.22.2",
    "native-base": "^2.11.0",
    "prop-types": "15.6.2",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-datepicker": "^1.7.2",
    "react-native-image-view": "^2.1.2",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-modal": "^7.0.0",
    "react-native-pin-view": "2.0.1",
    "react-navigation": "^3.11.0",
    "react-redux": "5.0.7",
    "redux": "4.0.0",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0",
    "styled-components": "4.1.1"
  },



md5-b3b8bcfd6255f4b1eb625f9036e16f37



import React, { Component } from 'react';
import PropTypes from 'prop-types';
import orderBy from 'lodash/orderBy';
import isEqual from 'lodash/isEqual';
import { View, StyleSheet } from 'react-native';
import { Icon, Picker, Form } from 'native-base';

class component .... {

render() {
    const { data, selectedKey } = this.state;
    const { isLoading } = this.props;
    return (
      <View style={{ width: 300 }}>
        <Form style={{ width: 300 }}>
          <Picker
            mode="dropdown"
            placeholder="Select Vineyard"
            placeholderStyle={{ color: '#bfc6ea' }}
            placeholderIconColor="#007aff"
            iosHeader="Select Vineyard"
            iosIcon={<Icon name="ios-arrow-down" />}
            style={{ width: 250 }}
            selectedValue={selectedKey}
            onValueChange={this.onValueChange.bind(this)}
            enabled={!isLoading}
          >
            {data.map(item => (
              <Picker.Item key={item.VineaID} label={item.KnownAs} value={item.VineaID} />
            ))}
          </Picker>
        </Form>
      </View>
    );
  }
}

}


![vineapicker](https://user-images.githubusercontent.com/8625166/60626108-0ff5e180-9e2d-11e9-8725-5e486a6d812c.jpg)

Is the bug present in both iOS and Android or in any one of them?

IOS Only. Android looks fine.

[khanzzirfan]

Icon should be next to the 'Select ... ' but as you see it is floating right.

[sankhadeeproy007]

@sahilkhan99 Hey, did we try giving the picker a width to see if the caret icon is restricted within it?

[khanzzirfan]

@sankhadeeproy007 I tried giving width to picker. Still it didn't align.

[jeremiahk]

I am also seeing this issue. With or without a width added to the picker.

[sankhadeeproy007]

@sahilkhan99 @jeremiahk The fix has just been merged to master. Can you check and let me know if that works?

[jeremiahk]

I pulled down the latest changes from master, but I am still seeing the issue.

Here is the code.

        <Picker
          style={{
            backgroundColor: 'blue',
            width: 200
          }}
          mode="dropdown"
          iosIcon={<Icon name="arrow-down" />}
          placeholder="State"
          placeholderStyle={{ color: '#bfc6ea' }}
          placeholderIconColor="#007aff"
          selectedValue={undefined}
          onValueChange={console.log}
        >

[sankhadeeproy007]

@jeremiahk Can you try deleting and reinstalling native-base? Or clearing the cache?
If it still persists, can you share a reproducible repo where we can check it out?
We aren't able to reproduce it on out end.

[khanzzirfan]

@sankhadeeproy007 how to get latest from master? do I have to install from npm with @latest tag will that pickup from master or I need to reference github url in my package.json?

Thanks

[jeremiahk]

@sankhadeeproy007 Thanks for the quick response. Here is an example repo.

[akinkoker]

What is the solution to this problem?
thanks

[michaelkoek]

Am having the same problem. The problem is especially annoying when you have an icon or label on the left side of the picker.

I've set a style={{ width: '50%' }}. It adjusts the picker but the caret icon is still pushed to the far right

[sankhadeeproy007]

@sahilkhan99 @jeremiahk @akinkoker @michaelkoek Can you guys please try it on v2.1.12?

[akinkoker]

"width: undefined" is ineffective

[akinkoker]

I changed "Item" component with "View" component
It's successful

"native-base": "^2.12.2", "react": "16.8.3", "react-native": "^0.59.9",

[jeremiahk]

@sankhadeeproy007 Sorry for the delay in getting back with you. Had to put out some fires.

I just tried it with native-base 2.13.4 and it is working correctly. I think this issue can be closed

[PlabanJr]

@jeremiahk Alright 👍

[ozc]

On native-base 2.13.12 problem persists.

Tried replacing Item with View as @akinkoker suggested, but still width undefined for picker has no effect