How to Find and Replace String in Text Component in React Native

The JavaScript’s string function .replace() is used to automatically find and replace any Text string in Var string variable in react native. Using this function we can change the already present Text string word to a given new word. So in this tutorial we would going to create a react native app to automatically Find and Replace String in Text Component in React Native variable using .replace() string function and set the replace text into State in Android iOS application.

Contents in this project Find and Replace String in Text Component in React Native App:

1. Import StyleSheet, View, Text and Button component in your project.

2. Create constructor() in your class and create a State named as TextHolder and set some default text inside it. This State is used to Show some text in Text component.

3. Create a function named as ReplaceTextFunction() in your class. Inside this function first we would store the TextHolder state value in SampleText var. Now we would replace the existing “Developer” word to “App Builder” in current string using .replace() function. After successfully replacing we would set the replaced text inside TextHolder state again. We would call this function on Button onPress event.

4. Create a Root View in render’s return block.

5. Create A text component with TextHolder State and we would also make a Button.

6. Create Style for Root View.

7. Complete source code for App.js File :

Screenshot in Android device :

Replace String

Screenshot in iOS device :

4 Comments

  1. If I have many Developer did it change all of Developer too ?
    Ex : Me as Developer, then my friend as Developer and my brother as Developer

    did it work ?

Leave a Reply

Your email address will not be published.