Реагировать на функционал родной карты

Question

Может кто-нибудь помочь мне с функцией карты в реакции Native:

Следующий фрагмент кода должен отображать: "До" "количество элементов в l oop: inside" и "After":

<Block>
    <Text>Before.... </Text>
</Block>
{bigPosts.map((item, index) => {
    console.log(item.title);
    <TouchableWithoutFeedback
        key={item.title}
        onPress={() =>
            navigation.navigate('Product', { product: item })
        }
    >
        <Block>
            <Text>INSIDE...... </Text>
        </Block>
    </TouchableWithoutFeedback>;
})}
<Block>
    <Text>After.... </Text>
</Block>

для меня это рендеринг просто "До" и "После", хотя "console.log (item.title);" регистрирует несколько предметов.

Понятия не имею, как это сделать ..

Спасибо за помощь!

Вот полный рендер:

return (
    <Block flex>
        <ScrollView
            scrollEventThrottle={16}
            showsVerticalScrollIndicator={false}
        >
            <Block flex={3}>
                <ScrollView
                    horizontal={true}
                    pagingEnabled={true}
                    decelerationRate={0}
                    scrollEventThrottle={16}
                    snapToAlignment="center"
                    showsHorizontalScrollIndicator={false}
                    snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
                    contentContainerStyle={{ paddingRight: theme.SIZES.BASE }}
                >
                    <Block>
                        <Text>Before.... </Text>
                    </Block>
                    {bigPosts.map((item, index) => {
                        console.log(item.title);
                        <TouchableWithoutFeedback
                            key={item.title}
                            onPress={() =>
                                navigation.navigate('Product', { product: item })
                            }
                        >
                            <Block>
                                <Text>INSIDE...... </Text>
                            </Block>
                        </TouchableWithoutFeedback>;
                    })}
                    <Block>
                        <Text>After.... </Text>
                    </Block>
                </ScrollView>
            </Block>
            <Block flex row style={{ marginHorizontal: theme.SIZES.BASE }}>
                <Text>Here comes help, students... etc</Text>
            </Block>
        </ScrollView>
    </Block>
);

Answer 1

Вы пропускаете возврат внутри функции карты после console.log

<Block>
   <Text>Before.... </Text>
</Block>
{bigPosts.map((item, index) => {
   console.log(item.title);
   return(
   <TouchableWithoutFeedback
      key={item.title}
      onPress={() =>
        navigation.navigate('Product', { product: item })
      }
   >
    <Block>
        <Text>INSIDE...... </Text>
    </Block>
   </TouchableWithoutFeedback>
   );
 })}
<Block>
 <Text>After.... </Text>
</Block>