Untitled

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
const MyInput = ({title1, title2, myValue, onChangeText}) => {
  return (
    <View>
      <Text>{title1} {title2}</Text>
      <TextInput 
        style={styles.input} 
        value={myValue} 
        onChangeText={onChangeText}
      />
    </View>
  )
};

const MyButton = ({title, onPress}) => {
  return (
    <View style={{width:150}}>
      <Button title={title} onPress={onPress}/>
    </View>
  )
};

export default function App() {
  const [username, onChangeUsername] = React.useState('');
  const [password, onChangePassword] = React.useState('');
  const [firstName, onChangeFirstName] = React.useState('');
  const [middleName, onChangeMiddleName] = React.useState('');
  const [lastName, onChangeLastName] = React.useState('');

  const DisplayInputs = () => {
    console.log("DisplayInputs");
    console.log("Username: ", username);
    console.log("password: ", password);
    console.log("firstName: ", firstName);
    console.log("middleName: ", middleName);
    console.log("lastName: ", lastName);
  };

  return (
    <View style={styles.container}>
      <MyInput title1={"Enter"} title2={"Username:"} myValue={username} onChangeText={(text) => onChangeUsername(text)}/>
      <MyInput title1={"Enter"} title2={"Password:"} myValue={password} onChangeText={(text) => onChangePassword(text)}/>
      <MyInput title1={"Enter"} title2={"First Name:"} myValue={firstName} onChangeText={(text) => onChangeFirstName(text)}/>
      <MyInput title1={"Enter"} title2={"Middle Name:"} myValue={middleName} onChangeText={(text) => onChangeMiddleName(text)}/>
      <MyInput title1={"Enter"} title2={"Last Name:"} myValue={lastName} onChangeText={(text) => onChangeLastName(text)}/>

      <View style={{flexDirection:"row"}}>
        <MyButton title="Save" onPress={DisplayInputs}/>
        <MyButton title="Clear" onPress={() => console.log("CLEAR!")}/>
      </View>
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#61dafb',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title:{
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: '#20232a',
    borderRadius: 6,
    backgroundColor: '#61dafb',
    color: '#20232a',
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
  },
  input: {
    width: 300,
    height: 50,
    borderWidth: 1,
  }
});