Add indices and selection order

[hypnocapybara]

Thank you for this package. I pushed a little enhancement...

The main idea is to keep an order of selected items. Plus, add an ability to display item numbers (see test screenshot below). The output data is still the same, but the result will now respect the selection order. Tried to follow the code style in the project. And also, not used arr.includes, because in tsconfig: "target": "es5", so stick to old-fashioned arr.indexOf. Maybe, could use { List } from 'immutable', but usually I just prefer to control it manually and use only immutable functions with state variables

[natysoz]

Hi , i checkout to your branch and i saw that it do works , but , you cant deselect any images after u hit the limit

i guess that we should look on the onClickUseCallback function and see , maybe you return the function when we have maxSelections ?

ill check it later when ill be infront of the computer

Btw , the numbers is good idea , you want to add them as addition to the icon ? we can add the number to the bottom left corner

[hypnocapybara]

Oh, nice catch, I fixed the logic inside onClickUseCallBack. My idea was - just pass the numbers to the Component:

<Component
  name={iconName}
  size={size}
  color={color}
  index={selectedIndex}
/>

And in case of Ionicons, it will be just ignored and work as it was before. For my example from the screenshot, I just created a super simple component, that outputs the number:

type SelectedIconProps = {
  iconName: string
  color: string
  bg: string
  size: number
  index: number;
}

function SelectedIcon(props: SelectedIconProps) {
  return <Text>{props.index + 1}</Text>
}

It may allow users to define, what they want. Maybe somebody wants numbers, maybe somebody needs just an icon, etc.

So it's usage in the component:

            selectedIcon: {
                Component: SelectedIcon,
                iconName: 'ios-checkmark-circle-outline',
                color: '#000000',
                bg: '#ffffff90',
                size: 15,
              },