Search code examples
react-nativeflowtypecreate-react-native-app

Can't run React Native official example


Here's the code I copied from React's Native website that should render a text input with some formatting features:

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

I'm using create-react-native-app.

If I run

npm run flow

It displays lots of errors:

My question is - am I doing something wrong here, or the code from React's website is already outdated?

App.js:7
  7:   constructor(props) {
                   ^^^^^ parameter `props`. Missing annotation

App.js:9
  9:     this.state = {text: ''};
                      ^^^^^^^^^^ object literal. This type is incompatible with
  6: export default class PizzaTranslator extends Component {
                                                  ^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?

App.js:18
 18:           onChangeText={(text) => this.setState({text})}
                                       ^^^^^^^^^^^^^^^^^^^^^ call of method `setState`
 18:           onChangeText={(text) => this.setState({text})}
                                                     ^^^^^^ property `text` of object literal. Property cannot be assigned on possibly undefined value
  6: export default class PizzaTranslator extends Component {
                                                  ^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?

App.js:21
 21:           {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
                           ^^^^ property `text`. Property cannot be accessed on possibly undefined value
 21:           {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
                ^^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?


Found 4 errors


import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

Solution

  • It seems that super(props) is incorrect in this context. So I changed the

    export default class PizzaTranslator extends Component 
    

    to

    class PizzaTranslator extends Component 
    

    then called it from export default class Main and it's working.