water-sys/app/screens/Recipient/Address.tsx

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

export const AddRess = () => {
  return (
    <ScrollView contentContainerStyle={styles.scrollContainer}>
      <View style={styles.recipientFormContainer3}>
        <View style={styles.recipientFormContainer}>
          <View style={styles.recipientFormContainer1}>
            {/* <Image 
              source={require('./assets/image_48dbfd3a.png')} 
              style={styles.backgroundImage}
              resizeMode="cover"
            /> */}
            <View style={styles.recipientFormContainer2}>
              <Text style={styles.titleHeading}>新增收件人</Text>
              <View style={styles.recipientInfoForm}>
                <Text style={styles.recipientInfoHeading}>请输入收件人信息</Text>
                <View style={styles.contactFormContainer}>
                  {/* First Name Field */}
                  <View style={styles.formFieldContainer}>
                    <View style={styles.flexRowCentered}>
                      <Text style={styles.elegantTextSnippet}>First Name</Text>
                      <Text style={styles.redTextHeading}>*</Text>
                    </View>
                    <Text style={styles.pingFangText}>请输入名</Text>
                  </View>
                  
                  {/* Last Name Field */}
                  <View style={styles.lastNameInputContainer}>
                    <View style={styles.flexRowCentered}>
                      <Text style={styles.elegantTextSnippet}>Last Name</Text>
                      <Text style={styles.redAsteriskTextStyle}>*</Text>
                    </View>
                    <Text style={styles.pingFangText}>请输入姓</Text>
                  </View>
                  
                  {/* Phone Number Section */}
                  <View style={styles.formContainer}>
                    {/* Placeholder for Select Component */}
                    <View style={styles.optionListDropdown}>
                      {/* Select component would go here */}
                    </View>
                    
                    <View style={styles.verticalCenteredColumn}>
                      <View style={styles.phoneNumberContainer}>
                        <Text style={styles.mobilePhoneNumberLabel}>Mobile phone number</Text>
                        <Text style={styles.redAsteriskTextStyle}>*</Text>
                      </View>
                      <View style={styles.phoneNumberPromptContainer}>
                        <Text style={styles.mobilePhoneNumberLabel}>Please enter your phone number again</Text>
                        <Text style={styles.redAsteriskTextStyle}>*</Text>
                      </View>
                    </View>
                  </View>
                  
                  {/* WhatsApp Field */}
                  <View style={styles.lastNameInputContainer}>
                    <View style={styles.flexRowCentered}>
                      <Text style={styles.elegantTextSnippet}>WhatsApp</Text>
                      <Text style={styles.redTextHeading}>*</Text>
                    </View>
                    <Text style={styles.pingFangText}>请输入WhatsApp号码</Text>
                  </View>
                  
                  {/* Default Setting Section */}
                  <View style={styles.defaultSettingSection}>
                    <Text style={styles.defaultTextDisplayStyle}>Set as default</Text>
                    <View style={styles.defaultSettingContainer}>
                      {/* <Image 
                        source={require('./assets/image_8bb98c86.png')} 
                        style={styles.imageContainer}
                      /> */}
                    </View>
                  </View>
                </View>
              </View>
              
              {/* Submit Button */}
              <View style={styles.submitButtonContainer}>
                <TouchableOpacity style={styles.primaryButtonStyle}>
                  <Text style={styles.buttonText}>Submit</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollContainer: {
    flexGrow: 1,
    justifyContent: 'center',
  },
  recipientFormContainer3: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    minWidth: 430,
    backgroundColor: '#f0f0f0',
  },
  recipientFormContainer: {
    flex: 0,
    backgroundColor: 'rgba(53, 53, 53, 0.8)',
  },
  recipientFormContainer1: {
    width: '100%',
    padding: 32,
    paddingBottom: 262,
    position: 'relative',
  },
  backgroundImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  recipientFormContainer2: {
    width: '100%',
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
  },
  titleHeading: {
    alignSelf: 'center',
    padding: 0,
    margin: 0,
    fontWeight: '600',
    fontSize: 20,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
    color: 'black',
  },
  recipientInfoForm: {
    flex: 0,
    marginTop: 35,
  },
  recipientInfoHeading: {
    padding: 0,
    margin: 0,
    fontWeight: '500',
    fontSize: 18,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
    color: 'black',
  },
  contactFormContainer: {
    width: '100%',
    marginTop: 9,
  },
  formFieldContainer: {
    width: '100%',
    padding: 6,
    paddingLeft: 8,
    paddingBottom: 10,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#dbdce0',
    borderRadius: 5,
  },
  flexRowCentered: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  elegantTextSnippet: {
    flex: 0,
    padding: 0,
    margin: 0,
    fontWeight: '500',
    fontSize: 12,
    fontFamily: 'PingFang SC',
    color: '#646472',
  },
  redTextHeading: {
    flex: 0,
    padding: 0,
    margin: 0,
    marginLeft: 1,
    fontWeight: '500',
    fontSize: 18,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
    color: '#fe1e00',
  },
  pingFangText: {
    padding: 0,
    margin: 0,
    marginTop: -2,
    fontWeight: '400',
    fontSize: 16,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
    color: '#807e7e',
  },
  lastNameInputContainer: {
    width: '100%',
    padding: 6,
    paddingLeft: 8,
    paddingBottom: 10,
    marginTop: 12,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#dbdce0',
    borderRadius: 5,
  },
  redAsteriskTextStyle: {
    flex: 0,
    padding: 0,
    margin: 0,
    marginLeft: 1,
    fontWeight: '500',
    fontSize: 18,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
    color: '#fe1e00',
  },
  formContainer: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    width: '100%',
    marginTop: 12,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#dbdce0',
  },
  optionListDropdown: {
    flex: 0,
  },
  verticalCenteredColumn: {
    flex: 0,
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    marginTop: -1,
  },
  phoneNumberContainer: {
    flex: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    height: 60,
    paddingRight: 8,
    paddingLeft: 8,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#dbdce0',
  },
  mobilePhoneNumberLabel: {
    flex: 0,
    padding: 0,
    margin: 0,
    fontWeight: '500',
    fontSize: 14,
    fontFamily: 'PingFang SC',
    color: '#807e7e',
  },
  phoneNumberPromptContainer: {
    flex: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    height: 60,
    paddingRight: 8,
    paddingLeft: 8,
    marginTop: -1,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#dbdce0',
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
  },
  defaultSettingSection: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    marginTop: 15.5,
    gap: 8,
  },
  defaultTextDisplayStyle: {
    flex: 0,
    padding: 0,
    margin: 0,
    fontWeight: '500',
    fontSize: 16,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
    color: 'black',
  },
  defaultSettingContainer: {
    flex: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    width: 51,
    height: 31,
    gap: 12,
  },
  imageContainer: {
    flex: 0,
    width: 51,
    height: 31,
  },
  submitButtonContainer: {
    paddingRight: 11,
    paddingLeft: 11,
    marginTop: 60,
  },
  primaryButtonStyle: {
    width: 350,
    minWidth: 350,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    fontWeight: '600',
    fontSize: 16,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
    color: 'white',
    backgroundColor: '#002fa7',
    borderWidth: 0,
    borderRadius: 25,
  },
  buttonText: {
    color: 'white',
    fontWeight: '600',
    fontSize: 16,
    lineHeight: 22,
    fontFamily: 'PingFang SC',
  },
});