How to change Text component value dynamically with React Native?

Sometimes, we want to change Text component value dynamically with React Native.

In this article, we’ll look at how to change Text component value dynamically with React Native.

How to change Text component value dynamically with React Native?

To change Text component value dynamically with React Native, we can use a state.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const [myText, setMyText] = React.useState('Original Text');
  return (
    <View>
      <Text onPress={() => setMyText('Changed Text')}>{myText}</Text>
    </View>
  );
}

to define the myText state with useState with initial value set to 'Original Text'.

Then we call setMyText to change the text value when we press the Text component.

As a result, when we press on Text, the text inside changes to 'Changed Text'.

Conclusion

To change Text component value dynamically with React Native, we can use a state.