Design Input Field In React Native

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

const About = () => {
  const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');
  const [input3, setInput3] = useState('');

  const handleButtonPress = () => {
    console.log('Input 1:', input1);
    console.log('Input 2:', input2);
    console.log('Input 3:', input3);
    setInput1('');
    setInput2('');
    setInput3(''); // Clear the input fields after button press
  };

  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>About</Text>

      <View style={styles.inputContainer}>
        <Text style={styles.label}>First Input:</Text>
        <TextInput
          style={styles.inputField}
          placeholder="Enter first value"
          placeholderTextColor="#888"
          value={input1}
          onChangeText={(text) => setInput1(text)}
        />
      </View>

      <View style={styles.inputContainer}>
        <Text style={styles.label}>Second Input:</Text>
        <TextInput
          style={styles.inputField}
          placeholder="Enter second value"
          placeholderTextColor="#888"
          value={input2}
          onChangeText={(text) => setInput2(text)}
        />
      </View>

      <View style={styles.inputContainer}>
        <Text style={styles.label}>Third Input:</Text>
        <TextInput
          style={styles.inputField}
          placeholder="Enter third value"
          placeholderTextColor="#888"
          value={input3}
          onChangeText={(text) => setInput3(text)}
        />
      </View>

      <TouchableOpacity style={styles.button} onPress={handleButtonPress}>
        <Text style={styles.buttonText}>Submit</Text>
      </TouchableOpacity>
    </View>
  );
};

export default About;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  headerText: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  inputContainer: {
    width: '100%',
    marginBottom: 15,
  },
  label: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 5,
    color: '#555',
  },
  inputField: {
    width: '100%',
    height: 50,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 15,
    fontSize: 16,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 2,
  },
  button: {
    width: '100%',
    height: 50,
    backgroundColor: '#007BFF',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
    elevation: 3,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});