selected lables in heading not change able

[MAhtishamShahzad]

selected lables in heading not change able

[hossein-zare]

Hello, Please edit your issue.

[sandeepg1220]

Unable to select the dropdown values

[hossein-zare]

Others haven't faced the issue, Please add your Code Snippet.

[sandeepg1220]

<DropDownPicker
            items={[
                {label: 'India', value: 'in'},
                {label: 'France', value: 'france'},
            ]}
            defaultValue={this.state.country}
            containerStyle={loginStyles.dropdownStyle}
            style={{backgroundColor: '#fafafa'}}
            dropDownStyle={{backgroundColor: '#fafafa'}}
            onChangeItem={item => this.setState({
                country: item.value
            })}
           
          />

[hossein-zare]

@sandeepg1220
https://snack.expo.io/@hossein-zare/change-value-example
If you're using an older version, Update it to the latest version. (current version: 3.0.5)

[sandeepg1220]

Finally found the issue. Check the below code.
I'm using the latest version only.

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

import DropDownPicker from 'react-native-dropdown-picker'

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      country: null
    }
  }

  render() {
      return (
        <View style={styles.container}>
        <View>
          <DropDownPicker
            items={[
              {label: 'India', value: 'in'},
              {label: 'France', value: 'france'},
               {label: 'France', value: 'france'},
                {label: 'France', value: 'france'},
            ]}
            defaultValue={this.state.country}
            containerStyle={{}}
            style={{backgroundColor: '#fafafa'}}
            dropDownStyle={{backgroundColor: '#fafafa'}}
            onChangeItem={item => this.setState({
              country: item.value
            })}
          />
          </View>
          <Text>Value: {this.state.country}</Text>
          <Text>Some other text </Text>
          <Text>Some other text </Text>
          <Text>Some other text </Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

[hossein-zare]

@sandeepg1220
It's working fine, or did i miss anything?

[sandeepg1220]

Not able to select france country

[sandeepg1220]

[hossein-zare]

https://snack.expo.io/@hossein-zare/change-value-example (Updated)

Nested Views
You have to add zIndex to the nested views which contain the picker.
Note! zIndex locks the picker on Android, The solution is to use the Platform.OS
https://github.com/hossein-zare/react-native-dropdown-picker#zindex-conflicts-untouchable-items-overlapping-pickers

#19

[sandeepg1220]

Ok now it's perfect. How to achieve when user click on anywhere in the screen the opened drop down has to close.

[hossein-zare]

@sandeepg1220
#29
https://snack.expo.io/@hossein-zare/touch-outside