This tutorial is very important for beginners, who just start developing apps in react native. In this tutorial we would going to solve the most common String Conversion Error “TypeError: expected dynamic type string but had type int64”. This error is usually comes when react native developer print Integer value without converting it into Alert message box. So here is the complete step by step tutorial for Convert Integer Variable to String in React Native Android iOS Example using VariableName.toString() method.
The Error should look like below screenshot :
Contents in this project Convert Integer Variable to String in React Native App :
1. Import StyleSheet, View, Button and Alert component in your class.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, Alert} from ‘react-native’;
|
2. Create a function named as ConvertFunction() in your App class. As you can see in below function we have declare a Var named as ValueHolder and set its value to 10 . Now its a Int64 type value and the Alert dose not support Integer. So we would change the Var value using .toString() method in Alert. This function would convert the Int64 value into pure string.
|
1
2
3
4
5
6
7
|
ConvertFunction(){
var ValueHolder = 10 ;
Alert.alert( ValueHolder.toString() ) ;
}
|
3. Create a Button in render’s return block and call the ConvertFunction() function on Button onPress event.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View style={styles.container}>
<Button title = “Convert Integer Value To String” onPress = { this.ConvertFunction.bind(this) } />
</View>
);
}
|
4. Create CSS for View component.
|
1
2
3
4
5
6
7
8
9
|
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
}
});
|
5. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, Alert} from ‘react-native’;
export default class App extends Component<{}> {
ConvertFunction(){
var ValueHolder = 10 ;
Alert.alert( ValueHolder.toString() ) ;
}
render() {
return (
<View style={styles.container}>
<Button title = “Convert Integer Value To String” onPress = { this.ConvertFunction.bind(this) } />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
}
});
|
Screenshot :
Also Read :
React Native Share API example to Share TextInput message from App
React Native Final Tree View in Android iOS Example
Set onPress onClick to Image in React Native using TouchableOpacity
How to Create Custom Trapezoid Shape View in React Native
React Navigation 5.x Send Data From One Screen To Another React Native Example Tutorial
