[iOS] Canvas is cut off from the bottom #3220
Description
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
- 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;