import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Image } from 'react-native'; import { Check, ArrowLeft, Eye, EyeOff } from 'lucide-react-native'; const countryCodes = [ { code: '+1', country: 'United States', flag: '🇺🇸' }, { code: '+44', country: 'United Kingdom', flag: '🇬🇧' }, { code: '+33', country: 'France', flag: '🇫🇷' }, { code: '+49', country: 'Germany', flag: '🇩🇪' }, { code: '+81', country: 'Japan', flag: '🇯🇵' }, { code: '+86', country: 'China', flag: '🇨🇳' }, { code: '+91', country: 'India', flag: '🇮🇳' }, { code: '+55', country: 'Brazil', flag: '🇧🇷' }, { code: '+61', country: 'Australia', flag: '🇦🇺' }, { code: '+39', country: 'Italy', flag: '🇮🇹' }, ]; export default function SignUp() { const [email, setEmail] = useState(''); const [birthday, setBirthday] = useState(''); const [phoneNumber, setPhoneNumber] = useState(''); const [selectedCountry, setSelectedCountry] = useState(countryCodes[0]); const [showCountryDropdown, setShowCountryDropdown] = useState(false); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [consentSMS, setConsentSMS] = useState(false); const [consentPrivacy, setConsentPrivacy] = useState(false); const toggleCountryDropdown = () => { setShowCountryDropdown(!showCountryDropdown); }; const selectCountry = (country: any) => { setSelectedCountry(country); setShowCountryDropdown(false); }; const handleSignUp = () => { // Sign up logic would go here console.log('Signing up with:', { email, birthday, phoneNumber: selectedCountry.code + phoneNumber, password, consentSMS, consentPrivacy, }); }; return ( console.log('Navigate to login')}> Sign Up Create Your Account Join us today to get started Email Birthday Phone Number {selectedCountry.flag} {selectedCountry.code} {showCountryDropdown && ( {countryCodes.map((country, index) => ( selectCountry(country)} > {country.flag} {country.country} {country.code} ))} )} Password setShowPassword(!showPassword)} > {showPassword ? ( ) : ( )} Confirm Password setShowConfirmPassword(!showConfirmPassword)} > {showConfirmPassword ? ( ) : ( )} setConsentSMS(!consentSMS)} > {consentSMS && } I consent to receive messages via SMS setConsentPrivacy(!consentPrivacy)} > {consentPrivacy && } I confirm that I read and agree to STEDI's {' '} Privacy Policy Sign Up Already have an account? console.log('Navigate to login')}> Log In ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, header: { flexDirection: 'row', alignItems: 'center', padding: 20, paddingTop: 50, }, headerTitle: { fontSize: 20, fontWeight: '600', marginLeft: 20, }, content: { padding: 20, }, title: { fontSize: 28, fontWeight: '700', marginBottom: 8, color: '#000', }, subtitle: { fontSize: 16, color: '#666', marginBottom: 30, }, formGroup: { marginBottom: 20, }, label: { fontSize: 16, fontWeight: '500', marginBottom: 8, color: '#000', }, input: { borderWidth: 1, borderColor: '#ddd', borderRadius: 12, padding: 15, fontSize: 16, backgroundColor: '#fafafa', }, phoneContainer: { flexDirection: 'row', alignItems: 'center', }, countrySelector: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: '#ddd', borderRadius: 12, padding: 15, backgroundColor: '#fafafa', marginRight: 10, }, flag: { fontSize: 20, marginRight: 5, }, countryCode: { fontSize: 16, fontWeight: '500', }, dropdown: { position: 'absolute', top: 60, left: 0, right: 0, backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 12, zIndex: 100, maxHeight: 200, }, dropdownItem: { flexDirection: 'row', alignItems: 'center', padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee', }, countryName: { flex: 1, fontSize: 16, }, countryCodeDropdown: { fontSize: 16, fontWeight: '500', }, phoneInput: { flex: 1, borderWidth: 1, borderColor: '#ddd', borderRadius: 12, padding: 15, fontSize: 16, backgroundColor: '#fafafa', }, passwordContainer: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: '#ddd', borderRadius: 12, backgroundColor: '#fafafa', }, passwordInput: { flex: 1, padding: 15, fontSize: 16, }, eyeIcon: { padding: 15, }, checkboxContainer: { flexDirection: 'row', alignItems: 'flex-start', marginBottom: 15, }, checkbox: { width: 20, height: 20, borderRadius: 4, borderWidth: 2, borderColor: '#ddd', justifyContent: 'center', alignItems: 'center', marginRight: 10, marginTop: 2, }, checked: { backgroundColor: '#007AFF', borderColor: '#007AFF', }, checkboxLabel: { flex: 1, fontSize: 15, lineHeight: 22, }, link: { color: '#007AFF', textDecorationLine: 'underline', }, signUpButton: { backgroundColor: '#007AFF', borderRadius: 12, padding: 18, alignItems: 'center', marginTop: 20, marginBottom: 30, }, signUpButtonText: { color: '#fff', fontSize: 18, fontWeight: '600', }, loginContainer: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, loginText: { fontSize: 16, color: '#666', marginRight: 5, }, loginLink: { fontSize: 16, color: '#007AFF', fontWeight: '600', }, });

React Native BrightHub App Preview

Project Screens for BrightHub App