Add support for horizontal layout

[samzmann]

Description

This PR adds support for horizontal list layout, which is a common use of FlatList and ScrollView. This is achieved by modifying the flexDirection of the column and row views:

if horizontal is falsy (default behavior):

• the top level view will have flexDirection: "row", allowing to place columns from left to right
• the children views with have flexDirection: "column", allowing list items to be stacked from top to bottom

if horizontal is true:

• the top level view will have flexDirection: "column", allowing to stack rows from top to bottom.
• the children views with have flexDirection: "row", allowing to place list items from left to right

Layout direction	Before	After
default
horizontal

Related Issues

There are no related issues. I was going to create one but then thought coding the feature myself was probably not so complicated so I decided to submit this PR instead :)

Tests

I did not add any tests. The current tests are passing. I only had to update snapshots. I tested manually on both iOS and Android devices, by using the following dummy data. Works as expected.

// create some dummy data
const [data, setData] = useState<{letter: string, width: number, height: number}[]>([])
useEffect(() => {
  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
  const d = []

  for (let i = 0; i < 20; i += 1) {
    d.push({
      letter: letters[i],

      width: Math.floor((Math.random() * 100) + 20),
      height: 30,

      // uncomment to generate data that works for vertical layout
      // width: 100,
      // height: Math.floor((Math.random() * 100) + 20),
    })
  }
  setData(d)
}, [])

// render
<MasonryList
  contentContainerStyle={{ padding: 20 }}
  data={data}
  numColumns={3}
  horizontal
  showsHorizontalScrollIndicator={false}
  renderItem={({ item }) => (
    <View
      style={{
        backgroundColor: 'red', width: item.width, height: item.height, margin: 5,
      }}
    >
      <Text>{item.letter}</Text>
    </View>
  )}
/>

Checklist

Before you create this PR confirms that it meets all requirements listed below by checking the relevant checkboxes ([x]). This will ensure a smooth and quick review process.

• [x] I read the Contributor Guide and followed the process outlined there for submitting PRs.
• [x] Run yarn lint && yarn tsc
• [x] Run yarn test or yarn test -u if you need to update snapshot.
• [x] I am willing to follow-up on review comments in a timely manner.

[codecov[bot]]

Codecov Report

Merging #17 (795c980) into master (3f26841) will not change coverage. The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master       #17   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            1         1           
  Lines           34        35    +1     
  Branches        12        13    +1     
=========================================
+ Hits            34        35    +1     

Flag	Coverage Δ
unittests	100.00% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
index.tsx	100.00% <100.00%> (ø)

---

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 3f26841...795c980. Read the comment docs.

[samzmann]

Happy to help :) Thanks for merging!

[jduhking]

For some reason, my content container does cover all my items. Why?

[samzmann]

@jduhking I'm not working on this anymore. Feel free to experiment and submit a new PR. Happy hacking :)