Custom View Data (iOS)

[RyGuyM]

I have a custom view that accepts some data as a property and feeds that into a native iOS charting library. While passing the props through I noticed a significant drop in performance. If I use hard coded data within the chart render function it renders in 40ms, once I attempt to pass the data through my custom view it takes 2400ms. The data looks like this:

data = [ [0, 1], [1, 2], ..., [2, 2]];

If I convert this into an array of objects and pass the exact same data through the performance issue is gone. The new data format looks like this and the render time is back to 40ms:

data = [ {value1: 0, value2: 1}, {value1: 1, value2: 2}, ..., {value1: 2, value2: 2}];

If I try to use an array of objects with numerical keys the problem arises again. This is problematic data with equivalent performance to the array of arrays:

data = [ {'1': 0, '2': 1}, {'1': 1, '2': 2}, ..., {'1': 2, '2': 2}];

I'm not sure if this is an issue on the iOS side or the React Native side. Is this a known problem when passing data through the bridge? Ideally, I would not have to map my arrays into objects so I was hoping someone had some insight on this scenario. Also for this specific scenario the array is only 365 indices.

[ide]

Fascinating find... thanks for reporting with these details. Could you share some of your JS and Obj-C code that you use to export the custom view? I'm curious if there is an issue with the propDiffer on the JS side or something else.

[RyGuyM]

Of course! I'll try to capture the important parts here.

The chartData is the data I specified in the my first comment. An array of arrays.
<ChartView data={this.state.chartData} style={{flex: 1}} />

import React from 'react-native';

const {
    Component,
    PropTypes,
    requireNativeComponent,
    View
} = React;

const NativeMyCustomView = requireNativeComponent('ChartView', MyCustomView);

class MyCustomView extends Component {
    static displayName = 'ChartView';

    static propTypes = {
        data: PropTypes.array,
        options: PropTypes.object,
        style: View.propTypes.style
    };

    constructor (props) {
        super(props);
    }

    render () {
        return (
            <NativeMyCustomView
                data={this.props.data}
                options={this.props.options}
                style={this.props.style} />
        );
    }
}

module.exports = MyCustomView;

@implementation ChartViewManager

@synthesize chartView;

RCT_EXPORT_MODULE()

- (UIView *)view
{
  BarChart *contentView = [[BarChart alloc] init];
  self.chartView = contentView;

  return contentView;
}

RCT_EXPORT_VIEW_PROPERTY(data, NSArray);
RCT_EXPORT_VIEW_PROPERTY(options, NSDictionary);

@end

@property (nonatomic, copy) NSArray *data;

- (void) setData:(NSArray *)data
{
  _data = [data copy];
  [self setNeedsDisplay];
}

That is all of the spots where the data is used and passed around to.

[RyGuyM]

I can finally close this. Just revisited and the issue doesn't seem to be there anymore.