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>
);
}
}
}

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
- fix(): Fixes #2743 — committed to GeekyAnts/NativeBase by PlabanJr 5 years ago
I changed “Item” component with “View” component It’s successful
"native-base": "^2.12.2", "react": "16.8.3", "react-native": "^0.59.9",“width: undefined” is ineffective