F - ReferenceLiteralComponent.tsx

// Bad Example

export class ReferenceLiteralComponent extends React.Component {
  doSomething() {}

  render() {
    return (
      <View style={{ backgroundColor: 'red' }}>{
        [1, 2, 3].map(
          num => <Text onPress={() => this.doSomething()}>{num}: {new Date()}</Text>
        )
      }</View>
    );
  }
}

Good - NoReferenceLiteralComponent.ts

// Good Example

const styles = StyleSheet.create({
  view: { backgroundColor: 'red' },
});

export class NoReferenceLiteralComponent extends React.Component {
  // Instance-bound function allows us to still use `this`
  // without an additional binding which would create a new function
  doSomething = () => {}

  numbers = [1, 2, 3];
  
  date = new Date();

  render() {
    return (
      <View style={styles.view}>{
        this.numbers.map(
          num => <Text onPress={this.doSomething}>{num}: {this.date}</Text>
        )
      }</View>
    );
  }
}