کند شدن نمایش لیست

سلام

من به تازگی با ریکت نیتیو آشنا شدم و اولین پروژه رو شروع کردم.
مشکلی که اخیرا برخورد کردم کند شدن نمایش اطلاعاتی هست که بصورت لیست نمایش می دهم. کدی که برای نمایش استفاده می کنم:

<ScrollView showsVerticalScrollIndicator={false} style={appStyle.mainScrollView} onScroll={this.scrollPosition} onContentSizeChange={(w, h) => { this.scrollHeight = h }}>
    {
        this.state.productsList.map((item, key) =>
        {
            return(
                <TouchableHighlight activeOpacity={0.85} underlayColor={'#ffffff00'} key={key} onPress={() => { this.gotoProduct(item.id, item.title_fa) }}>
                    <View style={appStyle.pageCategoryProductPanel}>
                        <Image source={{uri: item.image}} style={appStyle.pageCategoryProductImage} resizeMode={'cover'} />
                        <View style={appStyle.pageCategoryProductTitlePriceBuy}>
                            <Text style={appStyle.pageCategoryProductTitle}>{item.title_fa}</Text>
                            <View style={appStyle.pageCategoryProductPriceBuy}>
                                <View style={appStyle.pageCategoryProductPrice}>
                                    <Text style={appStyle.pageCategoryProductPriceOld}>{item.price}</Text>
                                    <Text style={appStyle.pageCategoryProductPriceFinal}>{item.price_final}</Text>
                                    <Text style={appStyle.pageCategoryProductNoExist}>{item.no_exist}</Text>
                                </View>
                                <View style={appStyle.pageCategoryProductBuy}>
                                    <Button onPress={() => { this.btnBuy(item.id, item.no_exist, item.price_final, item.coin, 'minus') }} title='' buttonStyle={appStyle.pageCategoryProductBuyBtn} iconContainerStyle={appStyle.pageCategoryProductBuyBtnIcon} icon={{type: 'feather', name: 'minus', color: '#000000', size: 18}} />
                                    <TextInput ref={'product-buy-number-' + item.id} value='0' editable={false} style={appStyle.pageCategoryProductBuyNumber} />
                                    <Button onPress={() => { this.btnBuy(item.id, item.no_exist, item.price_final, item.coin, 'add') }} title='' buttonStyle={appStyle.pageCategoryProductBuyBtn} iconContainerStyle={appStyle.pageCategoryProductBuyBtnIcon} icon={{type: 'feather', name: 'plus', color: '#000000', size: 18}} />
                                </View>
                            </View>
                        </View>
                    </View>
                </TouchableHighlight>
            );
        })
    }
    { this.state.loading ? <ActivityIndicator style={{padding: 20}}  size="large" color="#f12a2d" /> : null }
</ScrollView>

وقتی از حداقل کد استفاده می کنم مشکلی نیست، مانند؛

<ScrollView showsVerticalScrollIndicator={false} style={appStyle.mainScrollView} onScroll={this.scrollPosition} onContentSizeChange={(w, h) => { this.scrollHeight = h }}>
    {
        this.state.productsList.map((item, key) =>
        {
            return(
                            <Text style={appStyle.pageCategoryProductTitle}>{item.title_fa}</Text>
            );
        })
    }
    { this.state.loading ? <ActivityIndicator style={{padding: 20}}  size="large" color="#f12a2d" /> : null }
</ScrollView>

لطفن راهنمایی کنید.
سپاس

@Arshavir @ali.bayat @RaymondDragon @Alimotreb @programmersharp1379 @hesammousavi @mohsenbostan @gharibe.ashna2012 @drcode.ir @juza666