Shopify / Shopify/react-native-skia
[iOS] Canvas is cut off from the bottom
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8.6k
- Forks
- 647
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 35
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;
Snack, Code Example, Screenshot, or Link to Repository
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the supplied App reproduction and the linked SkiaCutOff repository, comparing the iOS canvas layout when a Button is present with the behavior when it is replaced by Text or View. Confirm the fix by reproducing the example on iOS and verifying that the canvas renders its full bottom edge with the Button above it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100