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

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.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 17 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I changed “Item” component with “View” component It’s successful

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

Adsız2

“width: undefined” is ineffective

Adsız