[iOS] Canvas is cut off from the bottom

Open itsramiel opened this issue 6 months ago • 1 comments

Description

Hi,

I am having a weird issue where the canvas does not render the last ~ 1 point if I render a button above the canvas. I know the issue sounds weird but it happens. I tried to replace the button with a Text or a View but it does not occur. Only with a button and only on iOS.

Screenshots

iOS	Android

If I remove the button it works fine:

iOS	Android

React Native Skia Version

2.1.0

React Native Version

0.80.1

Using New Architecture

[x] Enabled

Steps to Reproduce

Use the repo or render the following app:

Example Code

import { Button, StyleSheet, View } from 'react-native';

import { Canvas, Rect, SkSize } from '@shopify/react-native-skia';
import { useDerivedValue, useSharedValue } from 'react-native-reanimated';

const STROKE_WIDTH = 1;

function App() {
  const size = useSharedValue<SkSize>({ width: 0, height: 0 });

  const rect = useDerivedValue(() => {
    const { width: canvasWidth, height: canvasHeight } = size.get();

    return {
      x: STROKE_WIDTH / 2,
      y: STROKE_WIDTH / 2,
      width: canvasWidth - STROKE_WIDTH,
      height: canvasHeight - STROKE_WIDTH,
    };
  }, []);

  return (
    <View style={styles.screen}>
      <Button title="Play" />
      <Canvas onSize={size} style={styles.canvas}>
        <Rect
          style={'stroke'}
          strokeWidth={STROKE_WIDTH}
          color={'rgba(0, 0, 0, 0.5)'}
          rect={rect}
        />
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  canvas: {
    width: '100%',
    aspectRatio: 2,
  },
});

export default App;

Snack, Code Example, Screenshot, or Link to Repository

Repo Link

Jul 01 '25 15:07 itsramiel

@wcandillon Please let me know if you need any more info or if you can't reproduce

Jul 02 '25 14:07 itsramiel