I was to implement CustomPicker in my functional component in react native

Question

Please tell me that
if I want to change the CustomExample Class component into a functional component

**as: ** const CustomExample = () =>{...}

then how will change the following code to work in similar manner:

<CustomPicker
      placeholder={'Please select your favorite item...'}
      options={options}
      getLabel={item => item.label}
      fieldTemplate={this.renderField}
      optionTemplate={this.renderOption}
    />

I have tried following methods:

changing definition as
rederField(settings){...} to const renderField = (settings) => {...}
and then assigning renderField to fieldTemplate as follow:

        * fieldTemplate={renderField()}
        * fieldTemplate={()=>renderField()}
        * fieldTemplate={renderField(selectedItem,defaultText,getLabel,clear)}  

on each attempt it showed some error.

PLZ HELP ME I'M STUCK ON IT FROM LAST FEW DAYS
GOING THROUGH ALL THE DOCS WILL TAKE MONTHS FOR ME.

import * as React from 'react'
import { Alert, Text, View, TouchableOpacity, StyleSheet } from 'react-native'
import { CustomPicker } from 'react-native-custom-picker'
 
export class CustomExample extends React.Component {
  render() {
    const options = [
      {
        color: '#2660A4',
        label: 'One',
        value: 1
      },
      {
        color: '#FF6B35',
        label: 'Two',
        value: 2
      },
    ]
    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
        <CustomPicker
          placeholder={'Please select your favorite item...'}
          options={options}
          getLabel={item => item.label}
          fieldTemplate={this.renderField}
          optionTemplate={this.renderOption}
        />
      </View>
    )
  }
  
renderField(settings) {
    const { selectedItem, defaultText, getLabel, clear } = settings
    return (
      <View style={styles.container}>
        <View>
          {!selectedItem && <Text style={[styles.text, { color: 'grey' }]}>{defaultText}</Text>}
          {selectedItem && (
            <View style={styles.innerContainer}>
              <TouchableOpacity style={styles.clearButton} onPress={clear}>
                <Text style={{ color: '#fff' }}>Clear</Text>
              </TouchableOpacity>
              <Text style={[styles.text, { color: selectedItem.color }]}>
                {getLabel(selectedItem)}
              </Text>
            </View>
          )}
        </View>
      </View>
    )
  }
 
  renderOption(settings) {
    const { item, getLabel } = settings
    return (
      <View style={styles.optionContainer}>
        <View style={styles.innerContainer}>
          <View style={[styles.box, { backgroundColor: item.color }]} />
          <Text style={{ color: item.color, alignSelf: 'flex-start' }}>{getLabel(item)}</Text>
        </View>
      </View>
    )
  }
}

// STYLE FILES PRESENT HERE.

Answer 1

change the definition of function to

function renderOption(settings) {...}
function renderField (settings) {...}

and call function like this.

<CustomPicker
      placeholder={'Please select your favorite item...'}
      options={options}
      getLabel={item => item.label}
      fieldTemplate={renderField}
      optionTemplate={renderOption}
    />