Search code examples
react-native

setNativeProps Change Value for Text Component React Native Direct Manipulation

I want to directly update the value of a component due to performance reasons.

render(){

<View>

<Text style={styles.welcome} ref={component => this._text = component}>
  Some Text
</Text>

<TouchableHighlight underlayColor='#88D4F5'
              style={styles.button}>
          <View>    
            <Text style={styles.buttonText}
                 onPress={this.useNativePropsToUpdate.bind(this)}>
              Iam the Child
            </Text>
          </View>  
</TouchableHighlight>

</View>
}

This is the method I use to update the text component. I dont know if I am setting the right attribute/ how to figure out which attribute to set:

  useNativePropsToUpdate(){
    this._text.setNativeProps({text: 'Updated using native props'});
  }

Essentially trying to follow the same approach from this example: https://rnplay.org/plays/pOI9bA

Edit: When I attempt to explicitly assign the updated value: 

this._text.props.children = "updated";

( I know this this the proper way of doing things in RN ). I get the error "Cannot assign to read only property 'children' of object'#'"

So maybe this is why it cant be updated in RN for some reason ?

Solution

  • Instead of attempting to change the content of <Text> component. I just replaced with <TextInput editable={false} defaultValue={this.state.initValue} /> and kept the rest of the code the same. If anyone know how you can change the value of <Text> using setNativeProps OR other method of direct manipulations. Post the answer and ill review and accept.