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"
  },

Expected behaviour

Icon should align to next to the picker on IOS. But it is always float right to the screen.

Actual behaviour

Picker IOS icon is floating right on the screen.

Steps to reproduce

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