I have a ScrollView built out to swipe through images and render data points on each image. I'm running into a challenge with rendering ButtonRow on each image. Currently it's only rendering on 1 image, not each individual image.

So far I've attempted the following:

• Calling component within the function, see below. This only renders ButtonRow on 1 image, not on each image
• Inserting the ButtonRow as a data point within the array. This doesn't work at all, perhaps because my syntax was incorrect

Image:

    export default function DetailsScreen() {

  const [ property, setProperty ] = useState([
    { caption: 'blah', username: 'jane doe', photo: require('../assets/1.jpg'), key: 1 },
    { caption: 'caption', username: 'john doe', photo: require('../assets/2.png'), key: 2 },
  ])

  return (
    <View>
      {property.map((item) => {
        return (
          <>
            <View style={{ height: 812 }} key={item.key}>
              <View style={{ flexDirection: 'row', bottom: 220 }}>
                <ButtonRow />
              </View>
              <Image style={{ justifyContent: 'center', alignSelf: 'center', resizeMode: 'contain' }} source={item.photo} />
              <Text style={{ color: 'white', position: 'absolute', bottom: 150 }}>{item.username}</Text>
              <View style={{ flexDirection: 'row', position: 'absolute', bottom: 120 }}>
                <Caption
                  style={{ color: 'white', position: 'absolute', bottom: 120 }}
                  address={item.caption} />
              </View>
            </View>
          </>
        )
      })}
    </View>
  );
}

App.js

export default function App() {
  return (
    <View style={{ flex: 1, backgroundColor: 'pink' }}>
      <ScrollView
        snapToInterval='800px'
        decelerationRate="fast"
      >
        <DetailsScreen />
      </ScrollView>
    </View>
  )
}