Why the items in all the rows of row list are gett

I am trying to use rowlist which contain 3 rows. Each row will contain 11 items. But when it is getting displayed, after 11 items, again items are getting repeated in all the rows.

Below are the XML files.

BrowseScreen.xml

<?xml version="1.0" encoding="utf-8" ?>
<component name="BrowseScreen" extends="Group">
    <children>
        <!-- The main content -->
        <RowList id="BrowseRowList"
            itemComponentName="customItem"
            focusXOffset="[0]"
            itemSize="[1920,500]"
            numRows="3"
            drawFocusFeedback="false"
            rowFocusAnimationStyle="fixedFocusWrap"
            rowHeights="[500]"
            showRowLabel="[true]"
            rowLabelOffset="[[0,20]]"
            rowItemSpacing="[[0,40]]"
            showRowCounter="[false]"
            rowItemSize="[[250,273]]"
            variableWidthItems="[true]"
            translation="[70, 40]" />

    </children>

    <script type="text/brightscript" uri="pkg:/components/BrowseScreen/BrowseScreen.brs"/>
</component>

customItem.xml

<?xml version="1.0" encoding="utf-8" ?>

<component name="customItem" extends="Group">
    <children>
        <Group id="itemCard" translation="[10, 10]" scale="[0.90, 0.90]"
               scaleRotateCenter="[125.0, 183.0]">

            <Poster id="itemPoster" 
                width="250"
                height="375"
                failedBitmapUri="pkg:/images/placeholder/iptv_placeholder_2by3_dark.png"
                loadingBitmapUri="pkg:/images/placeholder/iptv_placeholder_2by3_dark.png"
                loadDisplayMode="scaleToZoom" />

            <Group id="itemMetaGroup" 
                visible="false" 
                translation="[0, 273]">

                <Rectangle id="itemMetaBG" 
                    width="364"
                    height="102"
                    color="0x333333" />

                <Label id="itemMetaLabel" 
                    width="320" 
                    height="55" 
                    color="0xebebeb" 
                    opacity="1.0"
                    translation="[20, 20]" 
                    horizAlign="left">
                    <Font role="font" uri="pkg:/fonts/Roboto-Bold.ttf" size="21" />
                </Label>

                <Label id="itemMetaData" 
                    width="320" 
                    height="55"
                    text="{MetaData}" 
                    color="0x959595" 
                    opacity="1.0"
                    translation="[20, 60]" 
                    horizAlign="left">
                    <Font role="font" uri="pkg:/fonts/Roboto-Regular.ttf" size="21" />
                </Label>            
            </Group>
        </Group>

    </children>

    <script type="text/brightscript" uri="pkg:/components/Item/customItem.brs" />
    <script type="text/brightscript" uri="pkg:/components/Utils/itemType.brs" />
</component>

If I have 11 posters in each row, it is getting displayed as below

1 2 3 4 5 6 7 8 9 10 11 1 2 3 4 5 6 7 8 9 10 11 1 2 ...

I am unable to understand why the items are getting repeated. Can anyone please let me know if there is any way to fix this.

Your RowList is behaving as such because its rowFocusAnimationStyle is set to "fixedFocusWrap". Changing it to rowFocusAnimationStyle="floatingFocus" should fix your problem.