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