CODEWITHSUNDEEP
performancereactjsreact-nativeflexbox
VonD
VonD

Reputation: 5155

Can this grid layout be achieved more efficiently in React-Native?

I'm seeing very long render times on a component and was wondering if the same could be achieved more efficiently or if it was merely two many elements / too much computation for React Native.

The layout looks like this :

<View style={{flex: 1, flexDirection: 'row', alignItems: 'stretch'}}>
    <View style={{width: 250}} />
    <View style={{flex: 1}}>
        <View style={{height: 50}} />
        <View style={{flex: 1}}>
            <Grid columns={15} rows={40} />
        </View>
    </View>
</View>

Where the Grid component simply renders a grid of columns columns containing each rows rows of equal width/height using flex. Here is a link to a full example.

Both on the emulator and a brand new device, with the dev flag off, i'm seeing render times between 1.5 and 3.5 seconds, which seems a lot. If I add a button to toggle the left panel, the layout also takes this time to update.

I've tried not using flex and precomputing all the values for both states using Dimensions.get('window') but the results are similar.

The systrace(available here) shows that all the work is done in the UI and Render threads, and it also displays some warnings : Long View#draw().

Am I correct in thinking that at this point it is just too many elements or too complex a layout for React Native ? If so are there any alternative techniques, maybe something similar to the browser's Canvas, to draw all these elements ? If not am I doing something wrong ?

Many thanks for your help.

Upvotes: 2

Views: 763

Answers (1)

VonD
VonD

Reputation: 5155

If you don't need to print anything in the cells, but just need the grid to display, you can render the columns and, then render absolutely-positioned rows over them.

Which means that for an x * y grid, you'd have x + y Views instead of x * y : much more efficient!

The performance of a Component's render method seems to depend directly on the number of native Views involved, which is why the collapsable prop exists on Android: it allows to reduce the number of native Views, by not rendering the ones that are layout-only.

If you do need to render all those Views, then there is probably not much to do to speed up the process in react-native as of today, but i would love to be proved wrong!

Upvotes: 1

Related Questions