Text input with react native

I'm trying to create a text input box with react native.

The template (which works), is something like:

const App: () => React$Node = () => {

  return (
    <>
      <Text>Hello world</Text>
    </>
  );
};

export default App;

I've attempted the following text input scheme:

const App: () => React$Node = () => {

  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

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

I get the following error:

Error: TransformError SyntaxError: [Path]\App.js: Unexpected token, expected ";"

Usually, the format (which also works), is something like this:

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})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split('').map((word) => word && '🍕').join('')}
        </Text>
      </View>
    );
  }
}

But I figure, there should be a way to just add a text input to the template with arrow functions. Is there something obvious I'm missing?