I understand how I am able to create component classes, and then render to react native. But how am I able to do the same with functions? Here is my code is app.tsx which does not compile:

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');



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

const PizzaTranslator = () => {
    const [text, setText] = useState('');
    return (
        <View style={{ padding: 10 }}>
            <TextInput
                style={{ height: 40 }}
                placeholder="Type here to translate!"
                onChangeText={newText => setText(newText)}
                defaultValue={text}
            />
            <Text style={{ padding: 10, fontSize: 42 }}>
                {text.split(' ').map((word) => word && '🍕').join(' ')}
            </Text>
        </View>
    );
}

export default PizzaTranslator;
ReactDOM.render(<PizzaTranslator></PizzaTranslator >, document.getElementById('root'));