React Native (Enter Name App)

import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, Alert, TextInput } from 'react-native';

const MyComponent = () => {

  const [name, setName] = useState("");
  const [isSubmitted, setSubmitted] = useState(false);

  return(
    <>

      <TextInput
        style = {{
          backgroundColor: "lightblue",
          padding: 10,
        }}
        placeholder = "Your name"
        onChangeText = {newText => setName(newText)}
        defaultValue = {name}
        enablesReturnKeyAutomatically = {true}
        onSubmitEditing = {() => setSubmitted(true)}
        returnKeyType = "done"
      >
      </TextInput>

      <Text>{isSubmitted ? "Hello " + name : ""}</Text>

    </>
  )
}

export default function App() {
  return (
    <View style = {styles.container}>

      <MyComponent></MyComponent>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});