Original Google sign in
This module exposes

Google Sign-In for Android (legacy). The underlying SDK is deprecated but functional.
Google Sign-In SDK for iOS and macOS (macOS support is only available to sponsors).
imports example
import {
  GoogleSignin,
  GoogleSigninButton,
  statusCodes,
} from '@react-native-google-signin/google-signin';

configure
signature: (options: ConfigureParams) => void

It is mandatory to call this method before attempting to call signIn() and signInSilently(). This method is synchronous, meaning you can call signIn / signInSilently right after it. Typically, you would call configure only once, soon after your app starts. All parameters are optional.

Example usage with default options: you'll get user email and basic profile info.

import { GoogleSignin } from '@react-native-google-signin/google-signin';

GoogleSignin.configure();

An example with all options enumerated:

GoogleSignin.configure({
  webClientId: '<FROM DEVELOPER CONSOLE>', // client ID of type WEB for your server. Required to get the `idToken` on the user object, and for offline access.
  scopes: ['https://www.googleapis.com/auth/drive.readonly'], // what API you want to access on behalf of the user, default is email and profile
  offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER
  hostedDomain: '', // specifies a hosted domain restriction
  forceCodeForRefreshToken: true, // [Android] related to `serverAuthCode`, read the docs link below *.
  accountName: '', // [Android] specifies an account name on the device that should be used
  iosClientId: '<FROM DEVELOPER CONSOLE>', // [iOS] if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist)
  googleServicePlistPath: '', // [iOS] if you renamed your GoogleService-Info file, new name here, e.g. "GoogleService-Info-Staging"
  openIdRealm: '', // [iOS] The OpenID2 realm of the home web server. This allows Google to include the user's OpenID Identifier in the OpenID Connect ID token.
  profileImageSize: 120, // [iOS] The desired height (and width) of the profile image. Defaults to 120px
});


* forceCodeForRefreshToken docs

signIn
signature: (options: SignInParams) => Promise<SignInResponse>

Prompts a modal to let the user sign in into your application. Resolved promise returns an SignInResponse object. Rejects with an error otherwise.

signIn example
// import statusCodes along with GoogleSignin
import {
  GoogleSignin,
  statusCodes,
} from '@react-native-google-signin/google-signin';

// Somewhere in your code
const signIn = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const response = await GoogleSignin.signIn();
    if (isSuccessResponse(response)) {
      setState({ userInfo: response.data });
    } else {
      // sign in was cancelled by user
    }
  } catch (error) {
    if (isErrorWithCode(error)) {
      switch (error.code) {
        case statusCodes.IN_PROGRESS:
          // operation (eg. sign in) already in progress
          break;
        case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
          // Android only, play services not available or outdated
          break;
        default:
        // some other error happened
      }
    } else {
      // an error that's not related to google sign in occurred
    }
  }
};

Utility Functions
tip
There are 4 helper functions available:

isErrorWithCode for processing errors
isSuccessResponse for checking if a response represents a successful operation. Same as checking response.type === 'success'.
isNoSavedCredentialFoundResponse for checking if a response represents no saved credentials case. Same as checking response.type === 'noSavedCredentialFound'.
isCancelledResponse for checking if a response represents user cancellation case. Same as checking response.type === 'cancelled'.
addScopes
signature: (options: AddScopesParams) => Promise<SignInResponse | null>

This method resolves with SignInResponse object or with null if no user is currently logged in.

You may not need this call: you can supply required scopes to the configure call. However, if you want to gain access to more scopes later, use this call.

Example:

const response = await GoogleSignin.addScopes({
  scopes: ['https://www.googleapis.com/auth/user.gender.read'],
});

signInSilently
signature: () => Promise<SignInSilentlyResponse>

May be called e.g. after of your main component mounts. This method returns a Promise that resolves with the SignInSilentlyResponse object and rejects with an error otherwise.

To see how to handle errors read signIn() method

const getCurrentUser = async () => {
  try {
    const response = await GoogleSignin.signInSilently();
    if (isSuccessResponse(response)) {
      setState({ userInfo: response.data });
    } else if (isNoSavedCredentialFoundResponse(response)) {
      // user has not signed in yet
    }
  } catch (error) {
    // handle errror
  }
};

hasPreviousSignIn
signature: () => boolean

This synchronous method may be used to find out whether some user previously signed in.

Note that hasPreviousSignIn() can return true but getCurrentUser() can return null, in which case you can call signInSilently() to recover the user. However, it may happen that calling signInSilently() rejects with an error (e.g. due to a network issue).

const hasPreviousSignIn = async () => {
  const hasPreviousSignIn = GoogleSignin.hasPreviousSignIn();
  setState({ hasPreviousSignIn });
};

getCurrentUser
signature: () => User | null

This is a synchronous method that returns null or User object of the currently signed-in user.

const getCurrentUser = async () => {
  const currentUser = GoogleSignin.getCurrentUser();
  setState({ currentUser });
};

clearCachedAccessToken
signature: (accessTokenString: string) => Promise<null>

This method only has an effect on Android. You may run into a 401 Unauthorized error when a token is invalid. Call this method to remove the token from local cache and then call getTokens() to get fresh tokens. Calling this method on iOS does nothing and always resolves. This is because on iOS, getTokens() always returns valid tokens, refreshing them first if they have expired or are about to expire (see docs).

getTokens
signature: () => Promise<GetTokensResponse>

Resolves with an object containing { idToken: string, accessToken: string, } or rejects with an error. Note that using accessToken for identity assertion on your backend server is discouraged.

signOut
signature: () => Promise<null>

Signs out the current user.

const signOut = async () => {
  try {
    await GoogleSignin.signOut();
    setState({ user: null }); // Remember to remove the user from your app's state as well
  } catch (error) {
    console.error(error);
  }
};


revokeAccess
signature: () => Promise<null>

Removes your application from the user authorized applications. Read more about it here and here.

const revokeAccess = async () => {
  try {
    await GoogleSignin.revokeAccess();
    // Google Account disconnected from your app.
    // Perform clean-up actions, such as deleting data associated with the disconnected account.
  } catch (error) {
    console.error(error);
  }
};


hasPlayServices
signature: (options: HasPlayServicesParams) => Promise<boolean>

Checks if device has Google Play Services installed. Always resolves to true on iOS.

Presence of up-to-date Google Play Services is required to show the sign in modal, but it is not required to perform calls to configure and signInSilently. Therefore, we recommend to call hasPlayServices directly before signIn.

try {
  await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
  // google services are available
} catch (err) {
  console.error('play services are not available');
}

hasPlayServices accepts one parameter, an object which contains a single key: showPlayServicesUpdateDialog (defaults to true). When showPlayServicesUpdateDialog is set to true the library will prompt the user to take action to solve the issue, as seen in the figure below.

You may also use this call at any time to find out if Google Play Services are available and react to the result as necessary. bu dökümantasyonu kullanarak web üzeriden giriş yapacağız. 

GoogleSignIn.js adında bir dosya oluştur ve gereken fonksiyonları oraya yaz. 

// app.config.js

export default ({ config }) => ({
  ...config,
  scheme: "myapp", // Uygulamanıza özgü benzersiz bir şema ismi seçin
  android: {
    ...config.android,
    googleServicesFile: "./google-services.json", // Android için Firebase yapılandırma dosyasının yolu
  },
  extra: {
    ...config.extra,
    apiKeyGoogle: process.env.API_KEY_GOOGLE,
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    apiKeyVoiceRSS: process.env.apiKeyVoiceRSS,
    type: process.env.FIREBASE_TYPE,
    private_key_id: process.env.FIREBASE_PRIVATE_KEY_ID,
    private_key: process.env.FIREBASE_PRIVATE_KEY,
    client_email: process.env.FIREBASE_CLIENT_EMAIL,
    client_id: process.env.FIREBASE_CLIENT_ID,
    auth_uri: process.env.FIREBASE_AUTH_URI,
    token_uri: process.env.FIREBASE_TOKEN_URI,
    auth_provider_x509_cert_url: process.env.FIREBASE_AUTH_PROVIDER_X509_CERT_URL,
    client_x509_cert_url: process.env.FIREBASE_CLIENT_X509_CERT_URL,
    universe_domain: process.env.FIREBASE_UNIVERSE_DOMAIN,
    WEB_CLIENT_ID: process.env.WEB_CLIENT_ID,
    scheme: "myapp", // scheme bilgisini extra alana da ekleyin
  },
});
 BURADAKİ WEB_CLİENT_ID YAZAN YERDE CLIENT ID MIZ YAZIYOR. OLUŞTURDUĞUN BUTONU BURADAKİ LOGİN VE REGİSTERİN YANINA GOOGLE İLE GİRİŞ YAP BUTONU OLARAK EKLE:
// screens/ProfileScreen.js

import React, { useEffect, useState, useCallback } from 'react';
import { Image, View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView } from 'react-native';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import PropTypes from 'prop-types';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import { auth, db } from '../utils/firebase';
import { doc, getDoc } from 'firebase/firestore';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useVocabulary } from './VocabularyContext';
import { Ionicons } from '@expo/vector-icons';
// import useGoogleSignIn from '../utils/useGoogleSignIn'; // Google Sign-In import'u kaldırıldı

const ProfileScreen = ({ route }) => {
  const { theme, t, locale } = useThemeAndLanguage();
  const navigation = useNavigation();
  const { logout } = useVocabulary();
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState(null);
  const [displayName1, setDisplayName1] = useState('');
  const [catImageUrl, setCatImageUrl] = useState('https://cataas.com/cat?width=300&height=300');
  const [coverImageUrl, setCoverImageUrl] = useState('https://picsum.photos/800/300');

  // const { signInWithGoogle } = useGoogleSignIn(); // signInWithGoogle kullanımı kaldırıldı

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(fetchUserData);
    return () => unsubscribe();
  }, []);

  useFocusEffect(
    useCallback(() => {
      const currentUser = auth.currentUser;
      if (currentUser) {
        fetchUserData(currentUser);
      } else if (route.params?.refresh) {
        fetchUserData();
      }
    }, [route.params?.refresh])
  );

  const fetchUserData = async (currentUser) => {
    if (currentUser) {
      setIsLoggedIn(true);
      setUser(currentUser);

      const userDoc = doc(db, 'users', currentUser.uid);
      const docSnap = await getDoc(userDoc);

      if (docSnap.exists()) {
        setDisplayName1(docSnap.data().displayName1 || '');
        await AsyncStorage.setItem('displayName1', docSnap.data().displayName1 || '');
      } else {
        console.log('No such document!');
      }
    } else {
      setIsLoggedIn(false);
      setUser(null);
      setDisplayName1('');
      await AsyncStorage.removeItem('displayName1');
    }
  };

  const handleLogout = async () => {
    try {
      await auth.signOut();
      await AsyncStorage.clear();
      await logout();
    } catch (error) {
      Alert.alert('Error', error.message);
    }
  };

  const refreshImages = () => {
    const newCatImageUrl = `https://cataas.com/cat?width=300&height=300&timestamp=${new Date().getTime()}`;
    const newCoverImageUrl = `https://picsum.photos/800/300?timestamp=${new Date().getTime()}`;
    setCatImageUrl(newCatImageUrl);
    setCoverImageUrl(newCoverImageUrl);
  };

  return (
    <ScrollView style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
      {isLoggedIn && user ? (
        <View>
          <View style={styles.coverImageContainer}>
            <Image
              source={{ uri: coverImageUrl }}
              style={styles.coverImage}
              resizeMode="cover"
            />
          </View>
          <View style={styles.profileInfo}>
            <Image
              source={{ uri: catImageUrl }}
              style={styles.profileImage}
              resizeMode="cover"
            />
            <Text style={[styles.username, { color: theme.textColor }]}>
              {displayName1 || 'Anonymous User'}
            </Text>
            <Text style={[styles.email, { color: theme.secondaryColor }]}>
              {user.email}
            </Text>
          </View>

          <View style={styles.buttonContainer}>
            <View style={styles.row}>
              <TouchableOpacity
                style={[
                  styles.button,
                  { backgroundColor: theme.primaryColor },
                ]}
                onPress={refreshImages}
              >
                <Ionicons name="refresh" size={20} color={theme.textColor2} style={styles.buttonIcon} />
                <Text style={[styles.buttonTextLoggedIn, { color: theme.textColor2 }]}>
                  {t('refreshImages')}
                </Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={[
                  styles.button,
                  { backgroundColor: theme.primaryColor },
                ]}
                onPress={() => navigation.navigate('Settings')}
              >
                <Ionicons name="settings-outline" size={20} color={theme.textColor2} style={styles.buttonIcon} />
                <Text style={[styles.buttonTextLoggedIn, { color: theme.textColor2 }]}>
                  {t('settings')}
                </Text>
              </TouchableOpacity>
            </View>

            <View style={styles.row}>
              <TouchableOpacity
                style={[
                  styles.button,
                  { backgroundColor: theme.primaryColor },
                ]}
                onPress={() => navigation.navigate('EditProfile')}
              >
                <Ionicons name="create-outline" size={20} color={theme.textColor2} style={styles.buttonIcon} />
                <Text style={[styles.buttonTextLoggedIn, { color: theme.textColor2 }]}>
                  {t('editProfile')}
                </Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={[
                  styles.button,
                  { backgroundColor: theme.primaryColor },
                ]}
                onPress={handleLogout}
              >
                <Ionicons name="log-out-outline" size={20} color={theme.textColor2} style={styles.buttonIcon} />
                <Text style={[styles.buttonTextLoggedIn, { color: theme.textColor2 }]}>
                  {t('logout')}
                </Text>
              </TouchableOpacity>
            </View>
          </View>

          {/* HeartedStories Component */}
          <HeartedStories />
        </View>
      ) : (
        <View style={styles.authContainer}>
          <Image
            source={require('../../assets/kabe.jpg')}
            style={styles.image}
            resizeMode="cover"
          />
          <Text style={[styles.title, { color: theme.textColor }]}>
            {t('loginToYourAccount')}
          </Text>

          <TouchableOpacity
            style={[
              styles.authButton,
              { backgroundColor: theme.primaryColor },
            ]}
            onPress={() => navigation.navigate('Login')}
          >
            <Ionicons name="log-in-outline" size={20} color="white" style={styles.buttonIcon} />
            <Text style={styles.authButtonText}>{t('login')}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[
              styles.authButton,
              { backgroundColor: theme.primaryColor },
            ]}
            onPress={() => navigation.navigate('Register')}
          >
            <Ionicons name="person-add-outline" size={20} color="white" style={styles.buttonIcon} />
            <Text style={styles.authButtonText}>{t('register')}</Text>
          </TouchableOpacity>

          {/* Google Sign-In Button Removed */}
        </View>
      )}
    </ScrollView>
  );
};

ProfileScreen.propTypes = {
  route: PropTypes.object.isRequired,
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  coverImageContainer: {
    width: '100%',
    height: 200,
  },
  coverImage: {
    width: '100%',
    height: '100%',
  },
  profileInfo: {
    alignItems: 'center',
    marginTop: -75,
    paddingVertical: 10,
  },
  profileImage: {
    width: 150,
    height: 150,
    borderRadius: 75,
    borderWidth: 3,
    borderColor: '#fff',
  },
  username: {
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: 5,
  },
  email: {
    fontSize: 14,
    color: '#888',
    marginTop: 5,
  },
  buttonContainer: {
    paddingHorizontal: 16,
    paddingVertical: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  // Styles for Logged-In Buttons
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderRadius: 8,
    flex: 1,
    marginHorizontal: 5,
    height: 50,
    fontWeight: 'bold',
  },
  buttonIcon: {
    marginRight: 8,
  },
  buttonTextLoggedIn: {
    fontSize: 16,
  },
  // Styles for Auth (Pre-Login) Buttons
  authContainer: {
    paddingHorizontal: 16,
    paddingVertical: 20,
    marginTop: '30%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  authButton: {
    width: '85%',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
    marginTop: 15,
    elevation: 2,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  authButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
    marginLeft: 8, // Space between icon and text
  },
  image: {
    width: '85%',
    height: 200,
    borderRadius: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginVertical: 10,
  },
  googleButton: { // Bu stilleri kaldırabilirsiniz ya da gelecek kullanımlar için tutabilirsiniz
    backgroundColor: '#4285F4', // Google Blue
  },
  googleIcon: { // Bu stilleri kaldırabilirsiniz ya da gelecek kullanımlar için tutabilirsiniz
    width: 24,
    height: 24,
  },
});

export default ProfileScreen;

bu şekilde scopeleri kullan: 2 adet şimdilik yeterli:
https://www.googleapis.com/auth/userinfo.mail ve https://www.googleapis.com/auth/userinfo.profile  giriş yapan kullanıcıdan alacağımız bilgileri bu şekilde veritabanına kaydedeceksin login olduğunda user. import React, { useState, useCallback } from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity, Alert, SafeAreaView, BackHandler, Linking } from 'react-native';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
import { auth, db } from '../utils/firebase';
import { doc, setDoc } from 'firebase/firestore';
import ProgressBar from './ProgressBar';
import * as Device from 'expo-device';
import { useFocusEffect } from '@react-navigation/native';
import { Checkbox } from 'expo-checkbox';

const RegisterScreen = ({ navigation }) => {
  const { theme, t, locale } = useThemeAndLanguage();
  const [step, setStep] = useState(1);
  const [gender, setGender] = useState('');
  const [age, setAge] = useState('');
  const [arabicLevel, setArabicLevel] = useState('');
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [inputFocused, setInputFocused] = useState(false);
  const [emailFocused, setEmailFocused] = useState(false);
  const [passwordFocused, setPasswordFocused] = useState(false);
  const [acceptedTerms, setAcceptedTerms] = useState(false); // Checkbox state

  const totalSteps = 5;

  const fetchPublicIp = async () => {
    try {
      const response = await fetch('https://api.ipify.org?format=json');
      const data = await response.json();
      return data.ip;
    } catch (error) {
      console.error('Error fetching public IP:', error);
      return null;
    }
  };

  const fetchIpInfo = async (ip) => {
    try {
      const response = await fetch(`https://ipinfo.io/${ip}/json`);
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('Error fetching IP info:', error);
      return null;
    }
  };

  const handleOptionSelect = (value, nextStep) => {
    switch (step) {
      case 1:
        setGender(value);
        break;
      case 2:
        setAge(value);
        break;
      case 3:
        setArabicLevel(value);
        break;
    }
    setStep(nextStep);
  };

  const handleNext = async () => {
    if (step === 4) {
      if (username.trim() === '') {
        Alert.alert(t('error'), t('nameRequired'));
        return;
      }
      setStep(5);
    } else if (step === 5) {
      if (email.trim() === '' || password.trim() === '') {
        Alert.alert(t('error'), t('emailAndPasswordRequired'));
        return;
      }
      // Check if terms are accepted
      if (!acceptedTerms) {
        Alert.alert(t('error'), t('termsRequired'));
        return;
      }
      try {
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        await updateProfile(userCredential.user, { displayName1: username });

        const ip = await fetchPublicIp();
        if (ip) {
          const ipInfoData = await fetchIpInfo(ip);

          const deviceInfo = {
            model: Device.modelName,
            brand: Device.brand,
            osName: Device.osName,
            osVersion: Device.osVersion,
            deviceName: Device.deviceName,
          };

          const userId = userCredential.user.uid;
          const userInfo = {
            username,
            email,
            registerDate: new Date().toISOString(),
            location: {
              ip: ipInfoData.ip,
              city: ipInfoData.city,
              region: ipInfoData.region,
              country: ipInfoData.country,
              loc: ipInfoData.loc,
              org: ipInfoData.org,
              postal: ipInfoData.postal,
              timezone: ipInfoData.timezone,
            },
            device: deviceInfo,
          };

          const primaryUserInfo = {
            displayName1: username,
            email,
            age,
            arabicLevel,
            gender,
            region: ipInfoData.region,
            deviceModel: deviceInfo.model,
          };

          await setDoc(doc(db, 'users', userId), primaryUserInfo, { merge: true });
          await setDoc(doc(db, 'users', userId, 'userinfo', 'details'), userInfo);

          navigation.navigate('Profile');
        } else {
          Alert.alert(t('error'), t('ipFetchError'));
        }
      } catch (error) {
        let errorMessage;
        switch (error.code) {
          case 'auth/email-already-in-use':
            errorMessage = t('emailAlreadyInUse');
            break;
          case 'auth/invalid-email':
            errorMessage = t('invalidEmail');
            break;
          case 'auth/weak-password':
            errorMessage = t('weakPassword');
            break;
          case 'auth/network-request-failed':
            errorMessage = t('networkError');
            break;
          case 'auth/too-many-requests':
            errorMessage = t('tooManyRequests');
            break;
          case 'auth/operation-not-allowed':
            errorMessage = t('operationNotAllowed');
            break;
          default:
            errorMessage = t('unknownError');
            break;
        }
        Alert.alert(t('error'), errorMessage);
      }
    }
  };

  const handleBack = () => {
    if (step > 1) {
      setStep(step - 1);
      return true;
    }
    return false;
  };

  useFocusEffect(
    useCallback(() => {
      const onBackPress = () => {
        return handleBack();
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, [step])
  );

  const renderBackButton = () => {
    if (step > 1) {
      return (
        <TouchableOpacity
          style={[styles.backButton, { backgroundColor: theme.secondaryColor }]}
          onPress={handleBack}
        >
          <Text style={styles.backButtonText}>{t('back')}</Text>
        </TouchableOpacity>
      );
    }
    return null;
  };

  const renderStep = () => {
    switch (step) {
      case 1:
        return (
          <View style={styles.optionsContainer}>
            <Text style={[styles.question, { color: theme.textColor }]}>👤 {t('selectGender')}</Text>
            <TouchableOpacity style={[styles.option, { backgroundColor: theme.lighterCardBackgroundColor, borderColor: theme.primaryColor }]} onPress={() => handleOptionSelect('male', 2)}>
              <Text style={{ color: theme.textColor }}>👳🏻 {t('male')}</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.option, { backgroundColor: theme.lighterCardBackgroundColor, borderColor: theme.primaryColor }]} onPress={() => handleOptionSelect('female', 2)}>
              <Text style={{ color: theme.textColor }}>🧕🏻 {t('female')}</Text>
            </TouchableOpacity>
            {renderBackButton()}
          </View>
        );
      case 2:
        return (
          <View style={styles.optionsContainer}>
            <Text style={[styles.question, { color: theme.textColor }]}>📆 {t('selectAge')}</Text>
            {['under20', '20to30', '30to40', '40to50', '50to60', '60to70', 'over70'].map((ageRange) => (
              <TouchableOpacity key={ageRange} style={[styles.option, { backgroundColor: theme.lighterCardBackgroundColor, borderColor: theme.primaryColor }]} onPress={() => handleOptionSelect(ageRange, 3)}>
                <Text style={{ color: theme.textColor }}>{t(ageRange)}</Text>
              </TouchableOpacity>
            ))}
            {renderBackButton()}
          </View>
        );
      case 3:
        return (
          <View style={styles.optionsContainer}>
            <Text style={[styles.question, { color: theme.textColor }]}>📚 {t('selectArabicLevel')}</Text>
            {[
              { emoji: '🌱', level: 'A1', description: t('beginner') },
              { emoji: '🌿', level: 'A2', description: t('elementary') },
              { emoji: '🌼', level: 'B1', description: t('intermediate') },
              { emoji: '🌷', level: 'B2', description: t('upperIntermediate') },
              { emoji: '🌹', level: 'C1', description: t('advanced') },
              { emoji: '🌟', level: 'C2', description: t('expert') }
            ].map(({ emoji, level, description }) => (
              <TouchableOpacity key={level} style={[styles.option, { backgroundColor: theme.lighterCardBackgroundColor, borderColor: theme.primaryColor }]} onPress={() => handleOptionSelect(level, 4)}>
                <Text style={{ color: theme.textColor }}>
                  {emoji} <Text style={{ fontWeight: 'bold' }}>{level}</Text> - {description}
                </Text>
              </TouchableOpacity>
            ))}
            {renderBackButton()}
          </View>
        );
      case 4:
        return (
          <View style={styles.optionsContainer}>
            <Text style={[styles.question, { color: theme.textColor }]}>📝 {t('enterName')}</Text>
            <TextInput
              style={[
                styles.input, 
                { 
                  backgroundColor: theme.lighterCardBackgroundColor, 
                  color: theme.textColor,
                  borderColor: inputFocused ? theme.primaryColor : theme.secondaryColor,
                  borderWidth: 1,
                }
              ]}
              placeholder={t('displayName1')}
              placeholderTextColor={theme.secondaryColor}
              value={username}
              onChangeText={setUsername}
              onFocus={() => setInputFocused(true)}
              onBlur={() => setInputFocused(false)}
            />
            <TouchableOpacity
              style={[styles.button, { backgroundColor: theme.primaryColor }]}
              onPress={handleNext}
            >
              <Text style={styles.buttonText}>{t('next')}</Text>
            </TouchableOpacity>
            {renderBackButton()}
          </View>
        );
      case 5:
        return (
          <View style={styles.optionsContainer}>
            <Text style={[styles.question, { color: theme.textColor }]}>📧🔐 {t('enterEmailPassword')}</Text>
            <TextInput
              style={[
                styles.input, 
                { 
                  backgroundColor: theme.lighterCardBackgroundColor, 
                  color: theme.textColor,
                  borderColor: emailFocused ? theme.primaryColor : theme.secondaryColor,
                  borderWidth: 1,
                }
              ]}
              placeholder={t('email')}
              placeholderTextColor={theme.secondaryColor}
              value={email}
              onChangeText={setEmail}
              keyboardType="email-address"
              autoCapitalize="none"
              onFocus={() => setEmailFocused(true)}
              onBlur={() => setEmailFocused(false)}
            />
            <TextInput
              style={[
                styles.input, 
                { 
                  backgroundColor: theme.lighterCardBackgroundColor, 
                  color: theme.textColor,
                  borderColor: passwordFocused ? theme.primaryColor : theme.secondaryColor,
                  borderWidth: 1,
                }
              ]}
              placeholder={t('password')}
              placeholderTextColor={theme.secondaryColor}
              value={password}
              onChangeText={setPassword}
              secureTextEntry
              onFocus={() => setPasswordFocused(true)}
              onBlur={() => setPasswordFocused(false)}
            />
            <View style={styles.checkboxContainer}>
              <Checkbox
                value={acceptedTerms}
                onValueChange={setAcceptedTerms}
                style={styles.checkbox}
              />
              <Text style={{ color: theme.textColor }}>
                {t('acceptTerms')} 
                <Text 
                  style={{ color: theme.primaryColor }} 
                  onPress={() => Linking.openURL(locale === 'tr' ? 'https://pinnate-sleet-58e.notion.site/Gizlilik-Politikas-a3d584460ec3448a92c8aae157b6ec7e?pvs=73' : 'https://pinnate-sleet-58e.notion.site/Privacy-Policy-3bf7be1f877a495a9514bb72c13e0cd4?pvs=73')}
                >
                  {t('privacyPolicy')}
                </Text> 
                {t('and')}
                <Text 
                  style={{ color: theme.primaryColor }} 
                  onPress={() => Linking.openURL(locale === 'tr' ? 'https://pinnate-sleet-58e.notion.site/Kullan-c-Anla-mas-cd0d1f8b858f4edeb2a23fd5969d9b8c?pvs=73' : 'https://pinnate-sleet-58e.notion.site/Terms-of-Service-fbfde3af7068479ea877b89a51d66213?pvs=73')}
                >
                  {t('termsOfService')}
                </Text>
              </Text>
            </View>
            <TouchableOpacity
              style={[styles.button, { backgroundColor: theme.primaryColor }]}
              onPress={handleNext}
            >
              <Text style={styles.buttonText}>{t('register')}</Text>
            </TouchableOpacity>
            {renderBackButton()}
          </View>
        );
      default:
        return null;
    }
  };

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
      <View style={styles.progressBarContainer}>
        <ProgressBar step={step} totalSteps={totalSteps} />
      </View>
      <View style={styles.contentContainer}>
        {renderStep()}
        {step === 1 && (
          <TouchableOpacity onPress={() => navigation.navigate('Login')}>
            <Text style={[styles.linkText, { color: theme.primaryColor }]}>{t('alreadyHaveAccount')}</Text>
          </TouchableOpacity>
        )}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  progressBarContainer: {
    paddingTop: 10,
    paddingHorizontal: 20,
            elevation:2,

  },
  contentContainer: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  optionsContainer: {
    width: '100%',
    alignItems: 'center',
  },
  question: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  option: {
    width: '85%',
    padding: 15,
    marginBottom: 10,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#81C784',
    alignItems: 'left',
    backgroundColor: 'white',
    elevation:2,

  },
  input: {
    width: '85%',
    padding: 15,
    marginBottom: 15,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#81C784',
    elevation:2,

  },
  button: {
    width: '85%',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
    marginTop: 15,
    elevation:2,

  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  linkText: {
    marginTop: 15,
    fontSize: 16,
  },
  backButton: {
    width: '85%',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
    marginTop: 15,
            elevation:2,

  },
  backButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
    checkboxContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10,

  },
  checkbox: {
    marginRight: 10,
  },
});

export default RegisterScreen; sadece mail ve isim alman ilk etapta yeterli.