Before you continue
Before submitting a bug report, please review our troubleshooting documentation at Troubleshoot Issues | Vega Troubleshooting
If you still want to file a bug report, please make sure to fill in all the details below and provide the necessary information.
NOTE: PLEASE ONLY REPORT A SINGLE BUG USING THIS TEMPLATE.
If you’re experiencing multiple issues, please file a separate report for each.
Bug Description
1. Summary
There’s a horizontal clipping issue when using a vertical scaling animation. I attached a screenshot, please note the thin persistent vertical bar at the left edge of the animated component. Can’t attach video here but can share with Amazon contact. It’s a simple audio wave animation used to indicate currently playing content.
App Name: Fubo
App Link on Amazon Appstore (found through Developer Console → Actions column in App List → View on Amazon.com): Fubo: Watch Live TV & Sports, Shows, Movies & News - App on Amazon Appstore
Bug Severity
Select one that applies
- Impacts operation of app
- Blocks current development
- Improvement suggestion
- Issue with documentation (If selected, please share the doc link and describe the issue)
- Other
2. Steps to Reproduce
Example code is provided
Create an animation using { transform: [{ scaleY }]}
3. Observed Behavior
Explain what actually happened, noting any discrepancies or malfunctions.
There's a persistent thin vertical line observed on the left edge of the animated component
4. Expected Behavior
Describe what you expected the SDK to do under normal operation.
Expected that all pixels of the animated component are accounted for correctly
4.a Possible Root Cause & Temporary Workaround
Fill out anything you have tried. If you don’t know, N/A is acceptable
NA
5. Logs or crash report
(Please make sure to provide relevant logs as attachment)
For crash issues, please refer this guide for faster troubleshooting: Detect Where the App Crash Originates | Design and Develop Vega Apps
-
For issues with Vega Studio Extension, please share log files from below folders:
For v0.22+:~/.vscode/extensions/amazon.vega-extension-<version>/ExtensionLogs ~/.vscode/extensions/amazon.vega-ui-extension-<version>/ExtensionLogsFor v0.21 and earlier:
~/.vscode/extensions/amazon.kepler-extension-<version>/ExtensionLogs ~/.vscode/extensions/amazon.kepler-ui-extension-<version>/ExtensionLogs
6. Environment
Please fill out the fields related to your bug below:
-
SDK Version: Run
vega --version(v0.22+) orkepler --version(v0.21 and earlier) and paste output -
Active SDK Version: 0.22.6150 Vega CLI Version: 1.2.18 -
App State:
Foreground -
OS Information: Please ssh into the device via
vega exec vda shell(orkepler exec vda shellfor v0.21 and earlier) and copy the output fromcat /etc/os-releaseinto the answer section below. Note, if you don’t have a simulator running or device attached, the command will respond withvda: no devices/emulators foundsh(com.amazon.dev.shell):/$ cat /etc/os-release NAME="OS" OE_VERSION="4.0.0" OS_MAJOR_VERSION="1" OS_MINOR_VERSION="1" RELEASE_ID="14" OS_VERSION="1.1" BRANCH_CODE="TV Ship day60" BUILD_DESC="OS 1.1 (TV Ship day60/101)" BUILD_FINGERPRINT="4.0.249302.0(3072cab629675a74)/101N:user/release-keys" BUILD_VARIANT="user" BUILD_TAGS="release-keys" BUILD_DATE="Sat Mar 14 22:24:12 UTC 2026" BUILD_TIMESTAMP="1773527052" VERSION_NUMBER="1401010010120"
7. Example Code Snippet / Screenshots / Screengrabs
Include any relevant code or component setup in React Native that can help reproduce the bug.
import { memo, useEffect, useMemo } from 'react'
import { Animated, Easing, StyleSheet, View } from 'react-native'
const MIN_HEIGHT = 16
const MAX_HEIGHT = 64
// Using scale animation instead of height animation for native driver compatibility.
const MIN_SCALE = MIN_HEIGHT / MAX_HEIGHT
const MAX_SCALE = 1
// Time for bar to go from min to max or vice versa. Half a full cycle.
const DURATION = 500
export const CurrentlyWatchingScrim = memo(() => {
/*
* 0 - outer bars at min, inner bar at max
* 1 - outer bars at max, inner bar at min
*/
const progress = useMemo(() => new Animated.Value(0), [])
const outerScale = progress.interpolate({
inputRange: [0, 1],
outputRange: [MIN_SCALE, MAX_SCALE],
})
const innerScale = progress.interpolate({
inputRange: [0, 1],
outputRange: [MAX_SCALE, MIN_SCALE],
})
useEffect(() => {
const loop = Animated.loop(
Animated.sequence([
Animated.timing(progress, {
toValue: 1,
duration: DURATION,
easing: Easing.inOut(Easing.sin),
useNativeDriver: true,
isInteraction: false,
}),
Animated.timing(progress, {
toValue: 0,
duration: DURATION,
easing: Easing.inOut(Easing.sin),
useNativeDriver: true,
isInteraction: false,
}),
]),
)
loop.start()
return () => loop.stop()
}, [progress])
const outerBarStyle = useMemo(
() => [styles.bar, { transform: [{ scaleY: outerScale }] }],
[outerScale],
)
const innerBarStyle = useMemo(
() => [styles.bar, { transform: [{ scaleY: innerScale }] }],
[innerScale],
)
return (
<View style={StyleSheet.absoluteFillObject} pointerEvents="none">
<View style={styles.scrim} />
<View
style={styles.barContainer}
>
<Animated.View style={outerBarStyle} />
<Animated.View style={innerBarStyle} />
<Animated.View style={outerBarStyle} />
</View>
</View>
)
})
const styles = StyleSheet.create({
scrim: {
backgroundColor: '#00000099',
...StyleSheet.absoluteFillObject,
},
barContainer: {
height: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
gap: 12
},
bar: {
width: 8,
height: 64,
borderRadius: 500,
backgroundColor: '#FAFBFF',
},
})
function CurrentlyWatchingStory() {
return (
<View style={{ width: 250, height: 150 }}>
<CurrentlyWatchingScrim />
</View>
)
}
Additional Context
Any Additional Context you would like to provide?
Add any other relevant information, such as recent updates to the SDK, dependencies, or device OS that may affect the bug.
<!-- Answer here if applicable -->
