vishaldhanotiya / react-native-modal-picker

This is a cross-platform picker with search bar for react native support both platform IOs and android
https://www.npmjs.com/package/rn-modal-picker
44 stars 18 forks source link

item can select then error genrate is can not find variable :item #11

Closed nkbeldar closed 4 years ago

nkbeldar commented 4 years ago

i can select country in picker then error generate is "can't find variable :item" please resolve this error apas

vishaldhanotiya commented 4 years ago

Can you please add code here because i have test code in both platform but not finding this issue??

nkbeldar commented 4 years ago
import React from 'react';
import { FlatList, ScrollView, Text, View,TouchableOpacity,StyleSheet, TouchableHighlight, Image ,StatusBar,TextInput,Picker} from 'react-native';
import styles from './styles';
import { recipes } from '../../data/dataArrays';
import MenuImage from '../../components/MenuImage/MenuImage';
import DrawerActions from 'react-navigation';
import { getCategoryName } from '../../data/MockDataAPI';
import RNPicker from "rn-modal-picker";

export default class HomeScreen extends React.Component {

  state = {user: '',user2: '',user3: '',
  dataSource: [
    {
      id: 1,
      name: "Afghanistan"
    },
    {
      id: 2,
      name: "Bahrain"
    },
    {
      id: 3,
      name: "Canada"
    },
    {
      id: 4,
      name: "Denmark"
    },
    {
      id: 5,
      name: "Egypt"
    },
    {
      id: 6,
      name: "France"
    },
    {
      id: 7,
      name: "Greece"
    },
    {
      id: 8,
      name: "Hong Kong"
    },
    {
      id: 9,
      name: "India"
    },
    {
      id: 10,
      name: "Japan"
    },
    {
      id: 11,
      name: "Kenya"
    },
    {
      id: 12,
      name: "Liberia"
    }
  ],
  placeHolderText: "Please Select Country",
  selectedText: ""}
  updateuser = (user) => {
     this.setState({ user: user })
  }
  updateUser2 = (user2) => {
    this.setState({ user2: user2 })
 }
 updateUser3 = (user3) => {
  this.setState({ user: user3 })
}
_selectedValue(index, item) {
  this.setState({ selectedText: item.name });
}

  static navigationOptions = ({ navigation }) => ({
    title: 'Paypal Calculator',
    headerStyle: {
      backgroundColor: '#2680EB',

    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontFamily: "Arvo-Bold"
    },
    headerLeft: (
      <MenuImage
        onPress={() => {
          navigation.openDrawer();
        }}
      />
    )
  });

  render() {
    return (
      <View>

       <Text style={{marginLeft:15,color:'black',fontFamily:'Arvo-Bold'}}>Receiver's Country</Text>
       <View  >
       <RNPicker
          dataSource={this.state.dataSource}
          dummyDataSource={this.state.dataSource}
          defaultValue={false}
          pickerTitle={"Country Picker"}
          showSearchBar={true}
          disablePicker={false}
          changeAnimation={"none"}
          searchBarPlaceHolder={"Search....."}
          showPickerTitle={true}
          searchBarContainerStyle={this.props.searchBarContainerStyle}
          pickerStyle={Styles.pickerStyle}
          pickerItemTextStyle={Styles.listTextViewStyle}
          selectedLabel={this.state.selectedText}
          placeHolderLabel={this.state.placeHolderText}
          selectLabelTextStyle={Styles.selectLabelTextStyle}
          placeHolderTextStyle={Styles.placeHolderTextStyle}
          dropDownImageStyle={Styles.dropDownImageStyle}

          selectedValue={(index, name,) => this._selectedValue(index, item)}
        />
       </View>

      </View>
    );
  }
}
const Styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },

  searchBarContainerStyle: {
    marginBottom: 10,
    flexDirection: "row",
    height: 50,
    width:250,
    shadowOpacity: 1.0,
    shadowRadius: 5,
    shadowOffset: {
      width: 1,
      height: 1
    },
    backgroundColor: "rgba(255,255,255,1)",
    shadowColor: "#d3d3d3",
    borderRadius: 10,
    elevation: 3,
    marginLeft: 10,
    marginRight: 10
  },

  selectLabelTextStyle: {
    color: "#000",
    textAlign: "left",
    width: "99%",
    padding: 10,
    flexDirection: "row"
  },
  placeHolderTextStyle: {
    color: "#D3D3D3",
    padding: 10,
    textAlign: "left",
    width: "99%",
    flexDirection: "row"
  },
  dropDownImageStyle: {
    marginLeft: 10,
    width: 10,
    height: 10,
    alignSelf: "center"
  },
  listTextViewStyle: {
    color: "black",
    marginVertical: 10,
    flex: 0.9,
    marginLeft: 20,
    marginHorizontal: 10,
    textAlign: "left"
  },
  pickerStyle: {
    marginLeft: 18,
    elevation:3,
    paddingRight: 25,
    marginRight: 10,
    marginBottom: 2,
    shadowOpacity: 1.0,
    shadowOffset: {
      width: 1,
      height: 1
    },
    borderWidth:1,
    shadowRadius: 10,
    backgroundColor: "rgba(255,255,255,1)",
    shadowColor: "#d3d3d3",
    borderRadius: 5,
    flexDirection: "row"
  }
});
vishaldhanotiya commented 4 years ago

Please change name to item into selected value arrow function something like this

selectedValue={(index,item) => this._selectedValue(index, item)}

Please check i have also updated read me doc

nkbeldar commented 4 years ago

ok Thanq u bro....