RnDanovinExpo/src/components/Select.js

import React from 'react';
import {Image, Dimensions} from 'react-native';
import SelectDropdown from 'react-native-select-dropdown';
import dropdownIcon from '../assets/icons/dropdown.png';
import tw from 'tailwind-react-native-classnames';

function Select({iconPosition, options, onChange, value, width, defaultValue}) {
  return (
    <SelectDropdown
      data={options}
      buttonStyle={{
        width: width,
        borderWidth: 1,
        borderColor: '#DBDBDB',
        borderRadius: 6,
        height: 36,
        backgroundColor: '#F9F9F9',
        fontFamily : 'light'
      }}
      rowTextStyle={{fontSize: Dimensions.get('window').width / 36, fontFamily : 'light'}}
      defaultButtonText={defaultValue}
      statusBarTranslucent={true}
      buttonTextStyle={{
        textAlign: 'center',
        justifyContent: 'flex-end',
        flex: 0,
        fontSize: Dimensions.get('window').width / 36,
        color: '#707070',
        fontFamily : 'light'
        // display: 'inline'
      }}
      dropdownIconPosition={iconPosition}
      onSelect={selectedItem => {
        onChange(selectedItem);
      }}
      renderDropdownIcon={() => (
        <Image source={dropdownIcon} style={{width: 12, height: 8}} />
      )}
    />
  );
}

export default Select;

Select.defaultProps = {
  options: ['1', '2', '3'],
  iconPosition: 'left',
};