Can't use my own state/function inside the custom picker function.

ririlya94 commented 5 years ago

Hi there.. I'm trying to use the renderHeader for the custom picker and i'm trying to use my own state and function inside the renderHeader function. Is there anyway i can do or pass anything to those custom picker function? Thanks in advance

Here's my code:

-- render function ` render() {

return (
  <View style={styles.container}>
    <CustomPicker 
      options={[
           {label:'English',value:'english'},
           {label:'Chinese',value:'simplified'},
           {label:'Malay',value:'malay'},
           ]}
       style={{
           justifyContent:'center',alignItems:'center'
       }}
       getLabel={item => item.label}
       placeholder = {'English'}
       headerTemplate={this.renderHeader}
       optionTemplate={this.renderOption}
       modalStyle={{
          borderColor:'gray',borderRadius:wp('3%'),
          borderWidth:wp('0.2%'),
          width:'80%',
          alignSelf:'center'
       }}
       fieldTemplate={this.renderFieldLanguage}
       onValueChange={value => {
           this.chglang(value.value)
       }}
    />

  </View>
);

}`

-- my renderheader function:

` renderHeader() {

return (
  <View style={{ padding: '5%',
    alignItems: 'center',}}>
    <Text style={{color:'#ff4e00',fontWeight:'normal',fontSize:wp('4.4%')
    }}>Select a {this.state.pickerHeaderTitle}</Text>
  </View>

) }`

budiadiono commented 5 years ago

Hi @ririlya94 ,

Do you mean to use state inside your renderHeader function? Yes of course, don't forget to bind the function to this on constructor:

this.renderHeader = this.renderHeader.bind(this);

You may want to take a look this demo: https://snack.expo.io/@budiadiono/react-native-custom-picker-custom-header

ririlya94 commented 5 years ago

Thank you so much!! Finally its working

budiadiono / react-native-custom-picker

Can't use my own state/function inside the custom picker function. #8