Dynamic React Native Image Loading From Array

App.js

const DATA = [
  {
    text: "man",
    image: require('./assets/images/photo1.jpg')
  },
  {
    text: "woman",
    image: require('./assets/images/photo2.jpg')
  }
]

const App: () => React$Node = () => {
  const [imageVar, setImageVar] = useState(0);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Image style={{height: 50, width: 50}} source={DATA[imageVar].image}/>
        <Text> {imageVar}: {DATA[imageVar].text} </Text>
        <Button onPress={()=> {
          imageVar == (DATA.length - 1) ? setImageVar(0) : setImageVar(imageVar + 1);
          console.log(DATA[imageVar].image);
        }}
          title="Change Pic" />
      </SafeAreaView>
    </>
  );
};