Add an option to define the width in which SlidingDot operates

[luixo]

Currently SlidingDot operates on the screen width, though I'm using it on a card with images being narrower than a window width.

On image scroll I have to replace

onProgressChange={(offsetProgress) => scrollX.setValue(-offsetProgress)}

with

onProgressChange={(offsetProgress) =>
  scrollX.setValue(
    -offsetProgress * (windowWidth / imageWidth)
    + (windowWidth - imageWidth) * (MARGIN_SIZE / windowWidth)
  )
}
// ...
<SlidingDot marginHorizontal={MARGIN_SIZE} {...otherProps} />

Giving an ability to change the inputRange to [-imageWidth, 0, imageWidth] I'll be able to skip this sophisticated scaling.

[priami93]

Excellent observation.
for the ExpandingDot component I added the property

itemWidth?: number;

and modified

const inputRange = [
    (index - 1) * width,
    index * width,
    (index + 1) * width,
];

in

const inputRange = [
    (index - 1) * (itemWidth || width),
    index * (itemWidth || width),
    (index + 1) * (itemWidth || width),
];

Now I use

<ExpandingDot
   data={items}
    ...
   itemWidth={myItemWidth}
/>

[luixo]

@weahforsage
What do you think on that problem?
Can you approve the idea so the PR may be opened?