Configuring Property Capture

Freshpaint comes configured with an initial set of prop-capture configurations for commonly used components. If you would like to capture a non-default property, this can be achieved by adding a small piece of configuration code to the app.

Freshpaint will check for a freshpaintOptions property that contains a set of properties to include or exclude. See below for the structure of the property:

freshpaintOptions = {
    eventProps: {
    include: [ '<inc_prop_1>', '<inc_prop_2>', ..., '<inc_prop_n>' ],
    exclude: [ '<exc_prop_1>', '<exc_prop_2>', ..., '<exc_prop_n>' ],
    }
}

The properties listed in the include list will be included in the event. The properties in the exclude list will be excluded from the event if they would have otherwise been included by either the include list or as a built-in property.

Stateless, Functional Component Example:

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

const ProductItem = ({title, description, onPress}) => {
  return (
      <TouchableOpacity onPress={onPress}>
        <View>
          <Text>{title}</Text>
          <Text>{description}</Text>
        </View>
      </TouchableOpacity>
  );
}

ProductItem.freshpaintOptions = {
  eventProps : { include: [ 'title', 'description' ] }
};

export { ProductItem };

Stateful Component Example:

import React, { Component } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

export default class ProductItem extends Component {
  freshpaintOptions = {
    eventProps : { include: [ 'title', 'description' ] }
  };    

  render() {
    return (
      <TouchableOpacity onPress={onPress}>
        <View>
          <Text>{title}</Text>
          <Text>{description}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

The use of a custom prop configuration will result in additional properties being captured in the Hierarchy event property. You can check these out in live view as seen in the screenshot below: