AddEventListener will not trigger in Android about react-native-canvas

[iddan]

We're having some issues on Android in the current version. Will dig into it when I'll have a chance as this might affect my projects as well.

[Mactub07]

yes, sure , fighting with one :)))

[iddan]

Please try to img.addEventListener to be before img.src =

[lsping8]

@iddan nope i had updated the latest version and switch addEventListner before img.src still no luck

[iddan]

Can you make it work on the web in a codepen? https://codepen.io/pen/?editors=1010

[lsping8]

@iddan I had try to draw canvas using webview and apparently the onload/load event still not trigger in android. This bug had been mention in react-native quite some time but not sure had they manage to fixed it.

https://github.com/facebook/react-native/issues/4704
https://github.com/facebook/react-native/issues/13763

Can i know what version is your react-native ? Did onLoad get callback when you testing for android ?

[iddan]

Can you please try the latest version?

[lsping8]

still no luck, works on IOS but android still not calling event callback. I am using react-native : 0.48.4

[iddan]

Can you please provide your Android OS version and device specs you were testing on?

[lsping8]

@iddan
I am using this device for testing:
http://www.gsmarena.com/asus_zenfone_2_ze551ml-6917.php (4gb ram)
Android version : 6.0.1

[iddan]

Can you reproduce the issue on an emulator?

[lsping8]

import React, { Component } from 'react'
import {Dimensions, Text, WebView,NativeModules} from 'react-native'
import Canvas, {Image as CanvasImage} from 'react-native-canvas'
import Paint from '../../component/Test'
import { Col, Row, Grid } from 'react-native-easy-grid'
import { Container } from 'native-base'
import RNCanvas from 'react-native-canvas';

const ToastExample = NativeModules.ToastExample;

class Puzzle extends Component {
  constructor () {
    super()
    this.splitImage = this.splitImage.bind(this)
    this.state = {
      chunkImage: [],
      test: 'something',
      mount: ''
    }
    this.chunkRow = []
  }

  splitImage (canvas, x, y, rows, cols) {
    const {height, width} = Dimensions.get('screen')
    this.setState({ test: 'enter' })
    const CanvasXSize = width / cols - 2
    const CanvasYSize = (height / 2) / rows
    canvas.width = CanvasXSize
    console.log('CanvasXSize',CanvasXSize);
    canvas.height = CanvasYSize
    const ctx = canvas.getContext('2d')
    const img = new CanvasImage(canvas)

    img.addEventListener('load', () => {
      this.setState({ test: 'load' })
      const imgW = img.width
      console.log('imgW', imgW)
      const imgH = img.height
      const chunkWidth = imgW / cols
      console.log('chunkWidth', chunkWidth)
      const chunkHeight = imgH / rows
      ctx.drawImage(
        img,
        x * chunkWidth,
        y * chunkHeight,
        chunkWidth,
        chunkHeight,
        0,
        0,
        CanvasXSize,
        CanvasYSize
      )
    })
    img.src = 'https://scontent-sin6-2.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21820297_280457069027480_5332287299113713664_n.jpg'
  }

  componentWillMount () {
    this.setState({ mount: 'mount' })
    const rows = 3
    const cols = 3
    const tempChunkImage = this.state.chunkImage
    for (let y = 0; y < rows; y++) {
      const tempChunkCol = []
      for (let x = 0; x < cols; x++) {
        tempChunkCol.push(
          <Col key={y + x} style={{overflow: 'hidden'}}>
            <Canvas
              ref={(canvas) => this.splitImage(canvas, x, y, rows, cols)}
              style={{ padding: 2, borderRadius: 10, overflow: 'hidden' }} />
          </Col>
        )
      }
      tempChunkImage.push(
        <Row key={y} style={{overflow: 'hidden'}}>
          {tempChunkCol}
        </Row>
      )
    }
    this.setState({chunkImage: tempChunkImage})
  }

  render () {
    return (
      <Container>
        <Row size={50}>
          <Text style={{marginTop: 20}}>{this.state.test}</Text>
        </Row>
        <Row size={50}>
           <Grid style={{overflow: 'hidden'}}>
            {this.state.chunkImage}
          </Grid>
        </Row>
      </Container>
    )
  }
}

export default Puzzle

This is my full code, i had try to run in android emulator and still the same problem.

[Mactub07]

have the same issue, any progress with this ? seems it happens only on Android with 4.4... version

[iddan]

Can you provide some example code?

[Mactub07]

nothing special , I've just use your example code http://prntscr.com/hmh6n2

[iddan]

Is there an error event emitted?

[Mactub07]

no error, try to use emulator with Android 4.4...
http://prntscr.com/hmhcp2

[iddan]

I'll try to find the time to test it. If you discover something please let us know! 😄

[Mactub07]

seems old devices with Android 4.4.. don't support canvas at all ;
http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview
https://caniuse.com/#search=canvas

that's the main problem , because it doesn't support even simply canvas.fill(), canvas.fillrect()

[iddan]

[iddan]

How can I see that?

[Mactub07]

@alphasp I had the same issue so I added to the baseUrl: '' to the WebView source and it worked.
I created a fork which is working for me on Android.

https://github.com/mauriciomassaia/react-native-canvas/

@iddan i didnt make a PR because i couldnt make it build properly. I was having issues with the object spread on build-html.js so I re-wrote it to copy the object properties.

Cheers

seems it helps . at least I can use canvas.fillRect() with this in old devices

[iddan]

Okay, cool.