Make `refMap` more customizable

[alexpchin]

• [ ] It would be good to be able to pass a custom Component or custom Text to TabBarItem label
• [ ] The keys may be sorted alphabetically by prettier if you use: sort-keys-fix/sort-keys-fix or sort-keys plugins
• [ ] Unusual (I know) but an empty object would error in the current structure. We should perhaps handle this?

Currently, the refMap uses the keys to create the labels.

Line 150 in src/MaterialTabBar/TabBar.tsx

getLabelText = (name) => name.toUpperCase()

.
.
.

{Object.keys(refMap).map((name, i) => {
        return (
          <TabItemComponent
            key={name}
            index={i}
            name={name}
            label={getLabelText(name)}
            onPress={onTabPress}
            onLayout={scrollEnabled ? onTabItemLayout : undefined}
            scrollEnabled={scrollEnabled}
            indexDecimal={indexDecimal}
            {...tabItemProps}
          />
        )
      })}

However, if we changed the structure of refMap, it could take a label or component/icon to might allow for more customisation.

Something like:

const [refMap] = React.useState({
  screen1: { ref: ref, label: () => <FontAwesomeIcon icon={'images'} size={22} /> },
  screen2: { ref: ref, label: () => <Text>With Space</Text> }
})

[PedroBern]

It would be good to be able to pass a custom Component or custom Text to TabBarItem label

We can achieve this with something like this (not documented yet):

const MyCustomTabItem = ({ name }) => { return <Icon ... />}
...
<Tabs.Container 
   ...
   TabBarComponent={props => <MaterialTabBar  {...props} TabItemComponent={MyCustomTabItem} />}
/>

Also, we probably will add something in #58 or later, in the screen options.

The keys may be sorted alphabetically by prettier if you use: sort-keys-fix/sort-keys-fix or sort-keys plugins

It's a problem, maybe changing refMap to be an array (?) We would need to review all the code. Right now everything depends on this order. Maybe we can just add some info in the docs saying it.

Unusual (I know) but an empty object would error in the current structure. We should perhaps handle this?

What would be the use case with an empty refMap? There would be no tabs/screens

[PedroBern]

closed by #93