react-native-reportable v0.3.0

react-native-reportable

Easy to use declarative report for React Native

Installation

$ npm install --save react-native-reportable

Usage

To report things you must use the createReportableComponent or Reportable.create composer. The common components View (includes Container & Visible), ScrollView, FlatList, SectionList, Text and Touchables are precomposed and exposed under the Reportable namespace. If you have your own component that you wish to report, simply wrap it with a Reportable.View or compose it with:

import Reportable from 'react-native-reportable';
MyCustomComponent = Reportable.create(MyCustomComponent);

Declarative Usage

Report Visible

<Reportable.View.Visible style={{height: 100}} report-foo="bar" />

Report Press

<Reportable.Button title="press me" report-foo="bar" />

Properties

Note: Other properties will be passed down to underlying component.

Imperative Usage

Refreshable FlatList

import Reportable from 'react-native-animatable';

const RefreshableFlatList = Reportable.create(FlatList, {
  isListable: true,
  useHooks(node, props) {
    const onRefresh = props.onRefresh
    props.onRefresh = React.useCallback(() => {
      node.refresh()
      return onRefresh && onRefresh()
    }, [onRefresh])
    return props
  },
}),