React Native: how to change the dynamic value of <Text>

Question

I want to dynamically change a value in some event

Event:

BackgroundGeolocation.on('location', (location) => { currentDistance = distance(previousLatitude,previousLongitude,latitude,longitude); this.setState({ text: currentDistance }); }); <Text> Moving : {this.state.text} </Text> 

Does anyone know how to change text or any other method to achieve?

Answer 1

The following is an example of using states to dynamically change a text value when you click on it. You can set any event you want.

 import React, { Component } from 'react' import { Text, View } from 'react-native' export default class reactApp extends Component { constructor() { super() this.state = { myText: 'My Original Text' } } updateText = () => { this.setState({myText: 'My Changed Text'}) } render() { return ( <View> <Text onPress = {this.updateText}> {this.state.myText} </Text> </View> ); } } 

Answer 2

Using:

 <TextInput editable={false} ref={component=> this._MyComponent=component}/> 

instead:

 <Text></Text> 

Then you can change the text as follows:

 onPress= {()=> { this._MyComponent.setNativeProps({text:'my new text'}); }