Call react method in react native

[cstpraveen]

Hi here is my component.

class MyComponent extends React.Component {

      constructor(props) {
        super(props);
        this.state = {
          isLoading:false,
          dataSourceBlockedUrl:[],
          token: this.props.authToken,
          date: false
        };
        this.getSingleData = this.getSingleData.bind(this);
      }

      getSingleData(x, y) {
        console.log(x, y)
      }

    render() {
        var Highcharts='Highcharts';
        const configData = {
          chart: {
              type: 'areaspline',
              marginTop:80
          },
          title: {
              text: ''
          },
          tooltip: {
              backgroundColor: '#000000',
              headerFormat:'',
              pointFormat: '{point.y}',
              formatter: function () {
                  return "<b>" + this.point.name + "</b> " + this.y;
              },
              style: {
                  color: 'white'
              },
              borderRadius:5,
          },
          xAxis: {
            categories: [
                'S',
                'M',
                'T',
                'W',
                'T',
                'F',
                'S'
            ],
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0
        },
        yAxis: {
            visible:false
        },
        credits: {
            enabled: false
        },
          exporting: {
            enabled: false
          },
          plotOptions: {
            series: {
                fillColor: {
                    allowPointSelect: true,
                    linearGradient: [0, 0, 0, 150],
                    stops: [
                        [0, 'rgb(43, 128, 189)'],
                        [1, 'rgb(0, 208, 208)']
                    ]
                },
                lineColor: 'rgba(255, 255, 255, 0.50)',
                marker: {
                    fillColor: '#FFFFFF',
                    lineWidth: 1,
                    lineColor: 'gray'
                },
                point: {
                    cursor: 'pointer',
                    events: {
                        click: () => {
                            this.getSingleData(this.x, this.y);
                        }
                    }
                }
            }
        },
        series: [{
            showInLegend: false,
            name: "Total",
            data: []
        }]
      }
      return (
        <ScrollView>
            <View>
            <ChartView style={{height:300}} config={configData}></ChartView>
                <View>
                    <View style={{backgroundColor:'#c8ebff', height:60}}>
                        <Text style={styles.textCategory}>
                        Category
                        </Text>
                        <Text style={styles.texts}>
                        Count
                        </Text>
                    </View>
                    {this.state.dataSourceBlockedUrl.map(this.viewSpamURL, this)}
                </View>
            </View>
        </ScrollView>
      );
      }
}

When I try to call getSingleData the method is not calling.

[OverVlad]

@cstpraveen You can't use methods in this module like you do. You need to use window.postMessage() in highchart config, when you need fire action and onMessage={this.onMessage} in module props.

<ChartView
          style={{ height: 200, opacity }}
          config={config}
          options={options}
          onMessage={this.onMessage}
        />

events: {
   click: () => {
     window.postMessage(JSON.stringify({ type: 'click', x: this.x }));
  }
}

onMessage()

 onMessage = (event: NativeEventType) => {
    const data = JSON.parse(event.nativeEvent.data);

    if (data.type === 'click') {
      this.setState({ value: data.x });
    }
}

It's not a better way, but enough for you situation

[cstpraveen]

@OverVlad It works like a charm.

It seems window.postMessage is the only solution. As because they are used webview. And also onemore thing here is that it won't post message if the path is "/web" we need to change the webview path as http://localhost.

[OverVlad]

@cstpraveen for me it's work with /web path too

[cstpraveen]

For me it is not working if I use /web as path.