Before you continue
Before submitting a bug report, please review our troubleshooting documentation at
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
- Summary
The Slider component inside SeekBar from @amazon-devices/kepler-ui-components renders a bare number (0) inside a <View>, causing the React Native warning: “Text strings must be rendered within a <Text> component.” This is due to the short-circuit pattern {barWidth && (<MotionView>...</MotionView>)} used in three places within Slider.js. When barWidth is 0 (its initial useState value), the expression evaluates to the number 0 rather than false, and React Native attempts to render it as text content inside a <View>.
App Name: Keplervideoapp
App Link on Amazon Appstore (found through Developer Console → Actions column in App List → View on Amazon.com): N/A
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
-
Steps to Reproduce
-
Use the
SeekBarcomponent from@amazon-devices/kepler-ui-components(~2.4.0) in any screen. -
Launch the app and navigate to the screen containing the
SeekBar. -
Observe the warning in the console/logs on initial render.
The specific component triggering the issue is:
<SeekBar
ref={seekBarRef}
currentValue={progress}
totalValue={totalValue}
// ... other props
/>
- Observed Behavior
On every initial render of the SeekBar, the following warning is emitted:
Warning: Text strings must be rendered within a <Text> component.
in RCTView (created by View)
in View (created by Slider)
in Slider
in RCTView (created by View)
in View (created by Pressable)
in Pressable (created by Pressable)
in RCTView (created by View)
in View (created by TVFocusGuideView)
in TVFocusGuideView (created by PressableWrapper)
in PressableWrapper
in Unknown (created by Seekbar)
in RCTView (created by View)
in View (created by TVFocusGuideView)
in TVFocusGuideView (created by Seekbar)
in RCTView (created by View)
This occurs because barWidth is initialized to 0 via useState(0) in Slider.js, and the JSX expression {barWidth && (<MotionView>...</MotionView>)} evaluates to the number 0 (not false), which React Native tries to render as a text node inside a <View>.
- Expected Behavior
The SeekBar should render without warnings. Conditional rendering guards should evaluate to false (not 0) when barWidth has not yet been set.
4.a Possible Root Cause & Temporary Workaround
Root Cause:
In @amazon-devices/kepler-ui-components/dist/src/components/SeekBar/Slider/Slider.js, there are three instances of the pattern {barWidth && ...}:
- Line 368:
{barWidth && (<MotionView style={[centeredNodeStyle, getPositionStyle()]}>... - Line 388:
{barWidth && (<MotionView style={[centeredNodeStyle, thumbContainerStyle, getPositionStyle()]}>... - Line 392:
{displayBelowThumb && barWidth && (<MotionView style={[centeredNodeStyle, getPositionStyle()]}>...
barWidth is initialized as const [barWidth, setBarWidth] = useState(0). In JavaScript, 0 && <Component/> evaluates to 0 (a falsy number), not false. React Native then attempts to render the number 0 as a text string inside a <View>, triggering the warning.
Fix:
Change barWidth && to barWidth > 0 && in all three locations. This ensures the expression evaluates to the boolean false (not the number 0) when barWidth hasn’t been set.
Temporary Workaround:
Manually patch node_modules/@amazon-devices/kepler-ui-components/dist/src/components/SeekBar/Slider/Slider.js by replacing barWidth && with barWidth > 0 && in the three locations listed above.
- Logs or crash report
N/A — this is a rendering warning, not a crash. The full warning text is provided in section 3.
- Environment
SDK Version: kepler-ui-components ~2.4.0
App State: Foreground
OS Information: N/A
- Example Code Snippet / Screenshots / Screengrabs
The problematic pattern in Slider.js (line 368):
// BEFORE (buggy) — evaluates to 0 when barWidth is 0
{barWidth && (<MotionView style={[centeredNodeStyle, getPositionStyle()]}>
...
</MotionView>)}
// AFTER (fixed) — evaluates to false when barWidth is 0
{barWidth > 0 && (<MotionView style={[centeredNodeStyle, getPositionStyle()]}>
...
</MotionView>)}
Consumer code that triggers the issue:
import { SeekBar as KUICSeekbar } from '@amazon-devices/kepler-ui-components';
<KUICSeekbar
ref={seekBarRef}
currentValue={progress}
totalValue={totalValue}
disabledWhenNotFocused={true}
disableThumbnail={disableThumbnail}
step={10}
trapFocus
thumbIcon={getThumbIcon}
thumbnailLabel={getThumbnailLabel}
currentValueIndicatorColor={getIndicatorColor}
thumbnailImageSource={getThumbnailImageSource}
onValueChange={onChangeValueHandler}
onSlidingStart={handleOnSlidingStart}
onSlidingEnd={handleOnSlidingEnd}
onFastForwardPress={onFastForwardPressHandler}
onRewindPress={onRewindPressHandler}
onPress={onPressSelectButtonHandler}
onPlayPause={onPressPlayPauseButtonHandler}
/>
Playback Issues
N/A — this is not a playback issue.
Additional Context
This is a well-known React / React Native gotcha. In React Native, rendering a number outside a <Text> component is an error, unlike React for web where it silently renders as text. The pattern {number && <Component/>} should always use an explicit boolean comparison (number > 0 && or !!number &&) when the number can be 0.