Render if prop changes in React Native Function

Question

is it possible, in a React Native Function, to render the "return" at changes? What I try:

I have a Function - this Function gets an specific array out of another Function - on Button Press I generate a new Index - now what I want is to re-render the View to display the array element with the new Index:

const generateNewIndex = function (item) {
  return Math.floor(Math.random() * item.length);
};
const PositionItem = ({ arr, position, navigation }) => {
  let { name, beschreibung, arten, rooms, isStarred } = position;
  let testArray = arr;

  let i = 0;

  return (
    <View style={styles.posContainer}>
      <View style={styles.titles}>
        <Text style={styles.title}>{name}</Text>
        <Text style={styles.subtitle}>{beschreibung}</Text>
        <Text style={styles.title}>{testArray[i].name}</Text>
      </View>

      <View style={styles.buttonsContainer}>
        <StyledButton
          type="primary"
          content={"Next Random Position"}
          onPress={() => {
            console.warn("Pressed");
            i = generateNewIndex(testArray);
          }}
        />
      </View>
    </View>
  );
};

export default PositionItem;

Thanks in advance!

Answer 1

I have found a way which is Working. If anyone wonders in the Future what I did:

add a Use State component:

const [count, setCount] = useState(0);

onPress on Button increase the Count:

onPress={() => {
            i = generateNewIndex(array);
            setCount((prevCount) => prevCount + 1);
          }}