React-Native - Change style of a component programmatically (no click)

Question

Let's say there are 10 <Text></Text> components in a row. These components will be created by looping over an array like this:

...
const fontsize = 16
return (
  <View style={{flex: 1}}>
    {
      array.map((val, index, arr) => {
        return (
          <Text ref={'text' + index} style={{fontSize: fontsize}]}>{val}</Text>
        )
      })
    }
  </View>
)
...

Now I want to change the fontSize of the <Text> component with the refs of 'text5'

I know I can get/set the style of this component with this.refs.text5.props.style.fontSize but how I can update the virtual DOM?

Answer 1

Use state: https://facebook.github.io/react-native/docs/state.html

Calling this.setState will re-render the view with the updated state.

e.g.

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fontizes: [16, 127, 2, ...]
    };
  }

  setFontsize(size, index) {
    let current = this.state.fontsizes;
    current[index] = size;
    this.setState({ fontsizes: current });
  }

  render() {
    return (
      <View style={{flex: 1}}>
        {
          array.map((val, index, arr) => {
            return (
              <Text ref={'text' + index} style={{fontSize: this.state.fontsizes[index]}]}>{val}</Text>
            )
          })
        }
      </View>
    )
  }
}