Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

React Native Invalidate Native View

$
0
0

I am working on a Native UI Component. I'm trying to figure out how to invalidate the native view so that it re-renders to the screen. What I'm trying to achieve is something like an HTML canvas that would allow dynamically drawing different shapes and images as well as animating those shapes over time. To do this I thought I could just override the draw() methods on each platform, and it would render out whatever my heart imagined.

However, when I call View.invalidate() or UIView.setNeedsDisplay(), the draw method is not called. Moreover, even if I invoke the draw() method, nothing is re-rendered to the screen.

On Android I was finally able to find a workaround by invoking View.invalidateOutline(). For whatever reason, this method resulted in draw() being invoked and the screen being re-rendered. But I have not been able to find a similar workaround on iOS, though I've tried everything under the sun.

I even tried installing the ART objective-C library to see if it would do what I want, but saw the same problem (SurfaceView.invalidate()) would not invoke draw().

I am guessing React Native controls whether things are redrawn through some kind of internal messaging. My question is: is there some way to notify that a native view has changed and should be redrawn. Or else, is this a bug that UIView.setNeedsDisplay() does not re-render?

React Native version: 61.5

Steps To Reproduce

iOS (objective-c):

- (void)createShape:(int)x y:(int)y
{
    // add a new shape object to be drawn
    [shapes addObject:[NSNumber numberWithInt:x]];

    // drawRect() is not called
    [self setNeedsDisplay];

    // drawRect() is called, but the screen does not update/re-render with the new shape
    [[self layer] setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    RCTLog(@"drawRect()");
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect bounds = self.bounds;
    CGContextClearRect(context, bounds);

    CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
    // even when this method is called, the rectangle is not drawn
    CGContextFillRect(context, rectangle);
}

Android (kotlin):

  fun createShape(x: Float, y: Float) {
        shapes.add(Drop(x, y, 0F))

        draw(_canvas)

        // screen does not update
       invalidate()

       // updates screen
        invalidateOutline()
    }

Also link to the entire project as it currently stands (there's a lot of commented/scratch code as I'm trying all different methods): https://github.com/twalk4821/draw

Thanks.


Viewing all articles
Browse latest Browse all 16552

Trending Articles