React Native - Change Component Style By Key

I know that in html and javascript are able to change it own css style by id and class , in react native, how to set / change the component style. I have map a list of component, a

Solution 1:

You can use Direct Manipulation but it's not a good practice, for more please read

Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component ...

in the link. Otherwise, you should you set state in component and change state to update the style

e.g.

first set ref to the component :

<SpecialItem 
    key={i}
    ref={(thisItem) => this[`item-${i}`] = thisItem}
/>

then setNativeProps :

_ChangeStyle() {
    this['item-2'].setNativeProps({style: {/* your style here */}});
}

full example

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        speciallist: ['aaa', 'bbb', 'ccc']
    }
  }

  componentDidMount() {
    this['text-0'].setNativeProps({style: {fontSize: "10"}});
    this['text-1'].setNativeProps({style: {fontSize: "20"}});
    this['text-2'].setNativeProps({style: {fontSize: "30"}});
  }

  render() {

    return (
      <View style={styles.container}>
        {
          this.state.speciallist.map((item, i)=>(
            <Text
              key={`text-${i}`}
              ref={(thisItem) => this[`text-${i}`] = thisItem}
            >
              {item}
            </Text>
          ))
        }
      </View>
    );
  }
}