not working in IOS

[TarekSalahUddinMahmud]

it doesnot show anything on IOS.

a blank space on the place of the component

[danielweinmann]

Hey, @tsmrafee-bs. Can you please paste the contents of your package.json so I can see which versions you are using?

[TarekSalahUddinMahmud]

@danielweinmann
this is the package.json file:
{
"name": "wallet",
"version": "0.0.0",
"description": "Hello Expo!",
"author": "tsmrafee",
"private": true,
"main": "main.js",
"dependencies": {
"expo": "16.0.0",
"react": "16.0.0-alpha.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-16.0.0.tar.gz",
"react-native-device-info": "^0.10.2",
"react-native-infinite-scroll-view": "^0.4.2",
"react-native-loading-spinner-overlay": "^0.5.0",
"react-native-picker-dropdown": "0.0.1",
"react-native-vector-icons": "^4.1.1",
"react-navigation": "git+https://github.com/react-community/react-navigation.git"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"eslint": "^3.19.0",
"eslint-config-exponent": "^5.1.3",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-flowtype": "^2.32.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-react": "^6.10.3"
},
"eslintConfig": {
"extends": "exponent/react",
"rules": {
"semi": "off",
"react/jsx-no-bind": [
0,
{
"allowArrowFunctions": 1,
"allowBind": 2
}
]
}
}
}

[danielweinmann]

Thanks! And how are you rendering it?

[TarekSalahUddinMahmud]

@danielweinmann
import { Picker } from 'react-native-picker-dropdown'

         <Picker
            selectedValue={this.state.language}
            style={{flex:1, justifyContent:'center'}}
            onValueChange={(lang) => {
              this.setState({language: lang})
            }}>
            <Picker.Item label="English" value="en" />
            <Picker.Item label="Africans" value="af" />
          </Picker>

[danielweinmann]

If you create the following component and render it instead, does it work?

import React, { Component } from 'react'
import { View } from 'react-native'
import PickerDropDown from 'react-native-picker-dropdown'

export default class Picker extends Component {
  static Item = PickerDropDown.Picker.Item

  render() {
    const { children, style } = this.props
    return(
      <View style={[{
        backgroundColor: 'gray',
        margin: 10,
        marginTop: 0,
      }, style]}>
        <PickerDropDown.Picker
          {...this.props}
          style={[{
            alignSelf: 'stretch',
            color: 'white',
            height: 32,
          }, style]}
        >
          {children}
        </PickerDropDown.Picker>
      </View>
    )
  }
}

[TarekSalahUddinMahmud]

thanks @danielweinmann , it works. but it shows the dropdown icon in the middle in IOS. how to set it in the right?

[danielweinmann]

Weird, it shouldn't since we're using flex: 1 for the text. Does it show it in the middle even with a selected value?

[TarekSalahUddinMahmud]

oh no..without selected value it shows in the middle. thanks

[danielweinmann]

Great! I'll leave this issue open until I release a new version with:

1. A view surrounding our TouchableOpacity with a little margin.
2. alignSelf: stretch on our Text for the value.
3. A fix for the dropdown icon appearing in the middle.
4. Different style props, for the view, the text, etc.
5. Proper propTypes and defaultProps to document the component.

Thanks a lot for your feedback! :D

[satishmane]

node_modules/react-native-picker-dropdown/Picker.js: Unexpected token (39:19)
37 | return(
38 | <TouchableOpacity

39 | onPress={::this.handlePress}
| ^
40 | style={{
41 | alignSelf: 'stretch',
42 | alignItems: 'center',

I wasted my time using this component

[agersoncgps]

I am getting this same error: node_modules/react-native-picker-dropdown/Picker.js: Unexpected token (39:19)

[satishmane]

You need to edit this package and remove those two :: before this. In addition to this, you might need to put () after handlePress like handlePress(). Then it will work. Even after this, there are issues.

I would recommend using react-native-modal-picker