renderField for reduxForm and react native

renderField.js

// @flow
import React, { Component } from 'react'
import {
  Picker,
} from 'react-native'
import {
  find,
  get,
  omit,
} from 'lodash/fp'
import {
  Text,
  View,
  TextInput,
  DropDownMenu,
  Row,
} from '@shoutem/ui'
import AutogrowInput from 'react-native-autogrow-input'

function renderError({ touched, error }) {
  const saying = (
    <Text
      style={{
        color: 'red',
        paddingLeft: 5,
      }}
    >
      *{error}
    </Text>
  )

  return touched && error ? saying : null
}

type Props = {
  input: {
    onChange: () => any,
    onBlur: () => any,
    value: string,
  },
  meta: {
    error: string,
    warning: string,
    touched: bool,
  },
  options: Array<{value: any, label: string}>,
  label: string,
  placeholder: string,
  props: any,
}

export default class renderField extends Component {
  props: Props

  componentDidMount() {
    this.props.input.onChange(this.props.defaultValue)
  }

  render() {
    const { options, input, meta, label, defaultValue, autoGrow } = this.props
    return (
      options ? (
        <View
          styleName="vertical"
          style={{
          paddingLeft: 10,
        }}
        >
          <Text>
            {label}
          </Text>
          <Picker
            onValueChange={value => input.onChange(value)}
            selectedValue={get('value', find(({ value }) => value === input.value, options)) || defaultValue}
            mode="dropdown"
            {...this.props}
          >
            {
              options.map(option => (
                <Picker.Item key={option.value} {...option}/>
              ))
            }
          </Picker>
          {renderError(meta)}
        </View>
      ) : (
        <View
          style={{
          paddingVertical: 5,
        }}
        >
          {
            autoGrow ?
              (
                <AutogrowInput
                  {...input}
                  {...this.props}
                  value={input.value || defaultValue}
                  style={{
                    paddingHorizontal: 15,
                    fontSize: 15,
                    fontFamily: 'Rubik',
                    backgroundColor: '#fff',
                  }}
                  maxHeight={100}
                />
              )
              : (
                <TextInput
                  {...input}
                  value={input.value || defaultValue}
                  returnKeyType="next"
                  {...this.props}
                />
              )
          }

          {renderError(meta)}
        </View>
      )
    )
  }
}