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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Button } from ‘react-native’
|
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.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super();
this.state = {
TextHolder : “I am a React Native Developer.”
}
}
|
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.
|
1
2
3
4
5
6
7
8
9
|
ReplaceTextFunction=()=>{
var SampleText = this.state.TextHolder.toString();
var NewText = SampleText.replace(“Developer”, “App Builder”);
this.setState({ TextHolder : NewText});
}
|
4. Create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
5. Create A text component with TextHolder State and we would also make a Button.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={{fontSize: 20, textAlign: ‘center’, marginBottom: 20}}> { this.state.TextHolder } </Text>
<Button title=“Replace Developer to App Builder in Above Text” onPress={ this.ReplaceTextFunction } />
</View>
);
}
|
6. Create Style for Root View.
|
1
2
3
4
5
6
7
8
9
10
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
}
});
|
7. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Button } from ‘react-native’
export default class Mynewproject extends Component {
constructor(){
super();
this.state = {
TextHolder : “I am a React Native Developer.”
}
}
ReplaceTextFunction=()=>{
var SampleText = this.state.TextHolder.toString();
var NewText = SampleText.replace(“Developer”, “App Builder”);
this.setState({ TextHolder : NewText});
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={{fontSize: 20, textAlign: ‘center’, marginBottom: 20}}> { this.state.TextHolder } </Text>
<Button title=“Replace Developer to App Builder in Above Text” onPress={ this.ReplaceTextFunction } />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Get Object Value From Array and Show on Screen one by one
React Native Refresh Previous Screen on Go Back React Navigation Example
React Native Sort Array into Ascending Descending Order iOS Android
React Native Add onLongPress on Button using TouchableOpacity
React Native Show SuperScript SubScript Text in Android iOS Example
