Just leaving this here for when I have a little bit more time to make it a little nicer.

Using react-native-drawer to render the drawer.

The whole code of the two components I am using is below or in this gist.

Let’s start with a basic <Drawer> with a <ScrollView> with a <ListView> inside. Since we don’t know the width of the drawer (because of devices with different resolutions) we can’t just set a fixed width to the images (or whatever) inside the grid. Also with flexbox, I didn’t manage to get the desired result, because I needed squares.

So, to create a grid that has let’s say images that have a 50% width, you have to hack a bit.

The <ScrollView /> component (in our case the one inside the drawer) has a nice prop called onLayout to which you pass a function that will do some magic. What you have to do is use this prop to call a method that will update the state with the correct width of the drawer.

The problem when using a ListView and passing props like this:

renderRow={rowData => <SomeComponent drawerWidth={this.state.drawerWidth} />}

is that if you pass the width from the state via a prop when rendering the item, what can happen is that the items are rendered before the state gets set, as setState is async, and you get a value you don’t really like. What you have to do in this case is trigger a re-render of the ListView when you receive a value you like in the state. There are a couple of issues opened on GH and SO about this (links below). Some say it’s a bug, some say it’s lack of documentation, I say it took me too much time to figure out 🙁

This is my component in the end:

What happens above is that re-setting the state with a new data source (cloneWithRows) will trigger a <ListView> re-render which will cause the rows to be rendered with the correct data from the state.

Happy times.