Can't run React Native official example

Question

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);

You may need to make changes as per flow syntax, btw what is your project root directory name — Jigar Shah, Sep 26 '17 at 13:16
Why do you run Flow if there are no Flow types to check? And why run a type checker on copied example code anyway? Just skip type checking the example. That is not in the instructions either. If you want to learn the very basics you should stick to the steps they actually ask you to do. — Mörre, Oct 01 '17 at 11:42

score 0 · Answer 1 · answered Sep 26 '17 at 13:13

0

I'm guessing that the react-native documentation was written without flow annotations for the purpose of making it easier to read for people not versed in flow.

answered Sep 26 '17 at 13:13

Kraylog

7,383
1
24
35

score 0 · Accepted Answer · answered Oct 14 '17 at 08:44

0

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.

answered Oct 14 '17 at 08:44

valk

9,363
12
59
79

Can't run React Native official example

2 Answers2