# Beta tests start, React Native select component - Mon, Tues 24th-25th Nov, 2020

With v1 of C+ complete and stable (with the odd small bug!), we are launching the app as an open beta to anyone that wants to try it out. I have set up [internal app sharing on Android](https://play.google.com/console/about/internalappsharing/) and [external TestFlight groups for iOS](https://developer.apple.com/testflight/) in order for us to just be able to share a link to sign-up for the beta (although iOS users will have to download TestFlight first).

I've also got started on v2 of the app, which needs to be done soon. v2 feature's include a dynamic form, possibly comprising inputs, selects, checkboxes, radio buttons, file uploads and more, so there are a lot of components to be built.

I built out the select component yesterday. This is useful as this component can both be used immediately in the app, and can go into my company's set of reusable React Native components (our *pattern lab*). It's always a challenge, but interesting, building React components to be properly generic and reusable. If anything, it's very easy building components and pages just for your app. The real challenge is making them reusable for others!

The Select is inspired a lot by the excellent [React Select](https://react-select.com/) library - acception either an `Option[]` array, or a `Record<string, any>[]` AND a function to customise how the label is rendered (which means a developer does not need to normalise all their `options` into the `DefaultOption` shape):

interface SelectProps extends TouchableOpacityProps, SpaceProps, LayoutProps, FlexboxProps {
    /** The select label */
    label: string
    /** Select values to show - works with `FlatList` and `SectionList` */
    options: Option[]
    /** Called whenever a value is selected */
    onChange?: (option: Option) => void
    /** A function to customize the option label */
    getOptionLabel?: (option: Option) => string
    /** A function to customize the section label */
    getSectionLabel?: (option: Option) => string
    /** Customize what gets rendered */
    components?: Components
    /** A string that gets shown before user selects a value */
    placeholder?: string
    /** A string or custom element to display as the modal header */
    modalHeader?: string | ReactElement
}

interface SelectItemProps extends TouchableOpacityProps {
    option: Option
    onPress: () => void
    selected: Option | null
    getOptionLabel?: (option: Option) => string
}

type DefaultOption = {
    value: string | number | boolean
    label: string
}

type OptionSections = {
    data?: DefaultOption[] | Record<string, any>[]
}

type Option = (DefaultOption & OptionSections) | (Record<string, any> & OptionSections)

Now I need to write some tests for it!

###### tags: `programmingjournal` `C+` `2020` `nominations` `beta` `internalappsharing` `testflight` `select`