# Carousel does not re-render when data changes

**URL:** <https://community.amazondeveloper.com/t/carousel-does-not-re-render-when-data-changes/14196>\
**Category:** Bug Reports\
**Created:** [August 5, 2025, 11:27pm UTC](https://community.amazondeveloper.com/t/carousel-does-not-re-render-when-data-changes/14196 "2025-08-05T23:27:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cspadanuta](https://dhm3gbtzu79o6.cloudfront.net/user_avatar/community.amazondeveloper.com/cspadanuta/32/752_2.png) [@cspadanuta](https://community.amazondeveloper.com/u/cspadanuta)\
**Post date:** [August 5, 2025, 11:27pm UTC](https://community.amazondeveloper.com/t/carousel-does-not-re-render-when-data-changes/14196/1 "2025-08-05T23:27:51Z")

</div>

# ⚠ Before you continue

* * *

_Before submitting a bug report, please review our troubleshooting documentation at [https://developer.amazon.com/docs/kepler-tv/troubleshoot-overview.html.](https://developer.amazon.com/docs/kepler-tv/troubleshoot-overview.html.)_

_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

Native Carousel component does not update when data changes.

**App Name** :  
**App Link on Amazon Appstore** (found through Developer Console → Actions column in App List → View on [Amazon.com](http://Amazon.com)):

**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

1. Fill native Carousel with data (list)
2. Modify the data but keep using the same id for each item

## 3. Observed Behavior

_Explain what actually happened, noting any discrepancies or malfunctions._

```auto
Carousel does not render new data

```

## 4. Expected Behavior

_Describe what you expected the SDK to do under normal operation._

```auto
Carousel should render new data

```

### 4.a Possible Root Cause & Temporary Workaround

_Fill out anything you have tried. If you don’t know, N/A is acceptable_

```auto
Workaround is to define a custom keyProvider, but in order to do this, all pieces of data that changed must be included in the key for each carousel item.

```

## 5. Logs or crash report

_**`(Please make sure to provide relevant logs as attachment and share VPKG file with your Amazon contact)`**_

For crash issues, please refer this guide for faster troubleshooting: [https://developer.amazon.com/docs/kepler-tv/detect-crash.html](https://developer.amazon.com/docs/kepler-tv/detect-crash.html).

- [App/Device Logs](https://developer.amazon.com/docs/kepler-tv/ks-logs.html)
- [Crash Logs](https://developer.amazon.com/docs/kepler-tv/loggingctl.html)
- [Crash Report](https://developer.amazon.com/docs/kepler-tv/ks-crash-report.html)
- For issues with Kepler Studio Extension, please share log files from below folders:

```auto
 ~/.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:** 0.20.2975
- **App State:** Foreground
- **OS Information**  
Please ssh into the device via `kepler exec vda shell`and copy the output from `cat /etc/os-release`into the answer section below. _Note, if you don’t have a simulator running or device attached `kepler exec vda shell` will respond with `vda: no devices/emulators found`_

```auto
NAME="OS"
OE_VERSION="4.0.0"
OS_MAJOR_VERSION="1"
OS_MINOR_VERSION="1"
RELEASE_ID="2"
OS_VERSION="1.1"
BRANCH_CODE="VegaMainlineTvIntegration"
BUILD_DESC="OS 1.1 (VegaMainlineTvIntegration/4398)"
BUILD_FINGERPRINT="4.0.138086.0(3072cab629675a74)/4398N:user-external/release-keys"
BUILD_VARIANT="user-external"
BUILD_TAGS="release-keys"
BUILD_DATE="Fri Jul 25 09:06:08 UTC 2025"
BUILD_TIMESTAMP="1753434368"
VERSION_NUMBER="201010439850"

```

## 7. Example Code Snippet / Screenshots / Screengrabs

_Include any relevant code or component setup in React Native that can help reproduce the bug._

```auto
import { useCallback, useMemo, useState } from 'react'
import {
  Pressable,
  StyleSheet,
  Text,
  View,
  type ListRenderItemInfo,
} from 'react-native'
import { Button, Carousel } from '@amzn/kepler-ui-components'

type CardProps = {
  title: string
  description: string
  isFavorite: boolean
}

type CardData = CardProps & {
  id: number
}

const INITIAL_DATA: CardData[] = [
  {
    id: 10001,
    title: 'Title 1',
    description: 'A description of the content',
    isFavorite: true,
  },
  {
    id: 10002,
    title: 'Title 2',
    description: 'ocer aliquam vergo',
    isFavorite: false,
  },
  {
    id: 10003,
    title: 'Title 3',
    description: 'textus abeo dicta',
    isFavorite: false,
  },
  {
    id: 10004,
    title: 'Title 4',
    description: 'admiratio calculus curtus',
    isFavorite: false,
  },
  {
    id: 10005,
    title: 'Title 5',
    description: 'tondeo sto commemoro',
    isFavorite: false,
  },
]

const extractKey = <T extends CardData>(item: T, index: number) =>
  `${item.id}-${index}`

const Card = (props: CardProps) => {
  const { title, description, isFavorite } = props
  const [isFocused, setFocus] = useState<boolean>(false)
  return (
    <Pressable
      style={[styles.card, isFocused ? styles.focusedCard : null]}
      onBlur={() => setFocus(false)}
      onFocus={() => setFocus(true)}
    >
      <View style={styles.metadata}>
        <Text style={styles.text}>{title}</Text>
        <Text style={styles.text}>{description}</Text>
      </View>
      {isFavorite ? <Text style={styles.text}>💗</Text> : null}
    </Pressable>
  )
}

const ViewComp = () => undefined

const renderItem = ({ item }: ListRenderItemInfo<CardData>) => (
  <Card
    key={item.id}
    title={item.title}
    description={item.description}
    isFavorite={item.isFavorite}
  />
)

const CarouselStory = () => {
  const [data, setData] = useState(INITIAL_DATA)
  const [favoriteIndex, setFavoriteIndex] = useState(0)

  const updateFavorite = useCallback(
    (newFavoriteIndex: number) => {
      if (newFavoriteIndex >= 0 && newFavoriteIndex < data.length) {
        setData(
          data.map((d, i) => ({
            ...d,
            isFavorite: i === newFavoriteIndex,
          })),
        )
        setFavoriteIndex(newFavoriteIndex)
      }
    },
    [data],
  )

  const itemDimensions = useMemo(
    () => [
      {
        view: ViewComp,
        dimension: { width: CARD_WIDTH, height: CARD_HEIGHT },
      },
    ],
    [],
  )

  const getItemForIndex = useMemo(() => (_idx: number) => ViewComp, [])

  return (
    <View style={styles.container}>
      <View style={styles.settings}>
        <Button
          label="<"
          onPress={() => updateFavorite(favoriteIndex - 1)}
          variant="primary"
        />
        <Text style={styles.text}>{favoriteIndex}</Text>
        <Button
          label=">"
          onPress={() => updateFavorite(favoriteIndex + 1)}
          variant="primary"
        />
      </View>
      {/* Do they have extraData like FlatList has? */}
      <Carousel
        orientation="horizontal"
        data={data}
        itemDimensions={itemDimensions}
        keyProvider={extractKey}
        renderItem={renderItem as any}
        getItemForIndex={getItemForIndex}
      />
    </View>
  )
}

const CARD_WIDTH = 300
const CARD_HEIGHT = 200

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'black',
    flexDirection: 'column',
    gap: 16,
  },
  settings: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16,
  },
  card: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#333333',
    borderRadius: 8,
    borderWidth: 2,
    width: CARD_WIDTH,
    height: CARD_HEIGHT,
    padding: 10,
  },
  focusedCard: {
    borderStyle: 'solid',
    borderWidth: 2,
    borderColor: '#cccccc',
  },
  metadata: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  text: {
    color: 'white',
    fontSize: 30,
  },
})

export default CarouselStory

```

* * *

## 👉 Playback Issues

* * *

_If this is a playback issue, please provide your VPKG and/or content URL, any pre-conditions (like geo-location) **[Share privately with your Amazon contact]** , and let us know if it’s x86 or arm7._

```auto

<!-- Describe your playback issue if applicable -->

```

Please share the following details in addition:\_

- **Player SDK:** `[Bitmovin, Shaka, ...]`
- **Player SDK Version:** `[e.g. 1.23]`
  - **Audio Codecs:** `[AAC, ...]`
  - **Video Codecs:** `[h.264, mp4]`
  - **Manifest Types:** `[m3u8, dash, etc ..]`

**Q: Would you like to be contacted to share your latest VPKG compiled with latest SDK:**

```auto
N

```

**Q: VPN or Login needed to verify functionality in VPKG?**

```auto
N

```

**Q: If applicable, please provide your media/content url**  
_If this is created dynamically, tokenized, etc please provide a way for us to access it_

```auto
N/A

```

**Q: Are there any special headers required to reproduce the issue you are facing?**

```auto
N/A

```

**Additionally please provide the following if possible**  
_Provide Screenshots / Screengrabs / Logs. Please include as much information as you can that will help debug._

```auto
<!-- Answer here if applicable --> 

```

* * *

## 👉 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._

```auto
This is a simplified example. We have other fields that also can get updated in the data (list) that do not cause new ids to be generated. Another way to force Carousel to re-render items would be helpful, such as how FlatList has the extraData prop.

```

---

<div class="post-metadata">

**Author:** ![Justin](https://dhm3gbtzu79o6.cloudfront.net/user_avatar/community.amazondeveloper.com/justin/32/585_2.png) [@Justin](https://community.amazondeveloper.com/u/Justin)\
**Post date:** [August 6, 2025, 1:47am UTC](https://community.amazondeveloper.com/t/carousel-does-not-re-render-when-data-changes/14196/3 "2025-08-06T01:47:14Z")

</div>

Hi @cspadanuta,

Thanks for reaching out! Our team will investigate and get back.

---

<div class="post-metadata">

**Author:** ![Amz\_Rsk](https://dhm3gbtzu79o6.cloudfront.net/user_avatar/community.amazondeveloper.com/amz_rsk/32/499_2.png) [@Amz\_Rsk](https://community.amazondeveloper.com/u/Amz_Rsk)\
**Post date:** [October 30, 2025, 2:19pm UTC](https://community.amazondeveloper.com/t/carousel-does-not-re-render-when-data-changes/14196/4 "2025-10-30T14:19:34Z")

</div>

Hello,

Thank you for your patience.

Our team has noted this issue and will be working to implement a fix in near future.  
You will be notified about the implementation via tech docs or blog post.

Thanks,  
Rohit

---

<div class="post-metadata">

**Author:** ![system](https://dhm3gbtzu79o6.cloudfront.net/user_avatar/community.amazondeveloper.com/system/32/5065_2.png) [@system](https://community.amazondeveloper.com/u/system)\
**Post date:** [November 13, 2025, 2:19pm UTC](https://community.amazondeveloper.com/t/carousel-does-not-re-render-when-data-changes/14196/5 "2025-11-13T14:19:50Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.