Slider flexbox layout

[armenbadalyan]

Slider component is relying on transform: [{ rotate: '90deg' }] style to implement vertical orientation. This seems to cause issues similar to the ones described in #1281. This PR refactors the Slider component to use flexbox layout thus making Slider size and position more predictable in both vertical and horizontal orientations.

[iRoachie]

Can you resolve the conflicts?

[codecov]

Codecov Report

Merging #1698 into next will increase coverage by 7.16%.
The diff coverage is 95%.

@@            Coverage Diff             @@
##             next    #1698      +/-   ##
==========================================
+ Coverage   87.74%   94.91%   +7.16%     
==========================================
  Files          33       33              
  Lines         555      570      +15     
  Branches       68       73       +5     
==========================================
+ Hits          487      541      +54     
+ Misses         57       25      -32     
+ Partials       11        4       -7

Impacted Files	Coverage Δ
src/slider/Slider.js	88.13% <95%> (+39.59%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 940c407...1c33879. Read the comment docs.

[Monte9]

@armenbadalyan changes make sense to me. Thanks for taking the time to fix it and submit a PR! 💯

I see you wrote additional tests for it as well. Great job!

Although have you tested the vertical orientation of the slider. Usually it helps to include a screenshot of the change/component so we can visualize what it looks like.

I tried your code locally and I wasn't able to get the vertical slider to work. Here's what I did:

Horizontal slider:

<Slider orientation="horizontal"
  minimumValue={0}
  maximumValue={100}
  minimumTrackTintColor="blue"
  maximumTrackTintColor="black"
  trackStyle={{ height: 7, borderRadius: 5 }}
  thumbStyle={{ backgroundColor: 'green', width: 30, height: 30, borderRadius: 15 }}
  value={this.state.value}
  onValueChange={(value) => this.setState({ value })}
  style={{ marginHorizontal: 20 }}
  step={10}
/>

Then I changed the orientation prop to "vertical" to the above code snippet and got this:

Let me know if I might have missed something or did something wrong. Also it would help if you can include a code snippet that shows horizontal/vertical so anyone can just c/p it and try it out.

[armenbadalyan]

@Monte9 , thank you for taking the time to review my PR. In horizontal orientation, since the width in your example was not specified explicitly, according to react-native layout rules it takes 100% of the parent container width. In vertical orientation one should specify the height either explicitly or using flexbox layout. In other words it behaves just like a regular View.
Here's an example of vertically oriented slider:

<Slider
        orientation="vertical"
        minimumValue={0}
        maximumValue={100}
        minimumTrackTintColor="blue"
        maximumTrackTintColor="black"
        trackStyle={{ height: 7, borderRadius: 5 }}
        thumbStyle={{
          backgroundColor: "green",
          width: 30,
          height: 30,
          borderRadius: 15
        }}
        value={this.state.value}
        onValueChange={value => this.setState({ value })}
        style={{ height: 200 }}
        step={10}
      />

[Monte9]

Ah that makes sense. Thanks for the detailed explanation.

Looks good on my end. Lets just make sure we add a note on the docs mentioning that when in "vertical" orientation, height is also required.

[Monte9]

lgtm

[Monte9]

Also appreciate you submitting the PR! We use OpenCollective to give back to contributors like yourself so I'd be happy to send $20 your way for your efforts. Let me know if this sounds good to you and I can tell you how to submit your expense.

[iRoachie]

Are we waiting on the change to the docs ?

[iRoachie]

Thanks again @armenbadalyan 💯

[armenbadalyan]

Thank you guys, it was my pleasure :)