fix ItemSeparatorComponent position in horizontal and inverted mode

[VahidBo]

Motivation

There's a positioning bug in VirtualizedList when ItemSeparatorComponent is defined for a list in horizontal or inverted mode. And also we face this bug in FlatList, because it is using VirtualizedList to render lists.
This commit will fix the #15777.

Before fix:

<FlatList
...
horizontal={true}
inverted={true}
...
/>

<FlatList
...
horizontal={true}
inverted={false}
...
/>

Test Plan

I ran this code with all possible values of horizontal and inverted props in FlatList and VirtualizedList and the results of each run was as below:
After fix bug:

<FlatList
...
horizontal={true}
inverted={false}
...
/>

<FlatList
...
horizontal={true}
inverted={true}
...
/>

[hramos]

Thanks for the pull request! This is a great first PR.

[facebook-github-bot]

@hramos has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[VahidBo]

@hramos Thank you very much.

[chiranjeevisaride]

I'm still facing this Issue, I'm not getting Space between Images

<FlatList horizontal={true}
inverted={false}
data={characters}
ItemSeparatorComponent={ () => <View style={ { width: 10} } /> }
renderItem={({item}) => this._renderItem(item)} /> 

Live Demo

[VahidBo]

@chiranjeevisaride It's not released yet.

[gautan]

When are you planning to release?

[gautan]

@VahidBo When are you planning to release?

[djhr]

@hramos when is it expected to have a release with this fix?

[hramos]

You can find which release any commit has shipped to by looking at the list of tags. In this case, this commit is already part of the 0.50 Release Candidate.

[andrefrts]

Maravilhoso!@ pegou bonitinho!

[stokesbga]

It looks like this doesnt work on sectionlist, v57.8