True caller popup never opens

[najmulansari]

Hi Ajit,
Thank you for providing the plugin to integrate truecaller API in react-native. I used the same code you have described on the page, but somehow the truecaller popup is not opening. The response is always null. Please help me fix this. Thank you.

I am using below packages.

"react": "18.3.1",
"react-native": "0.76.2",
"@ajitpatel28/react-native-truecaller": "^0.8.0",

const handleTruecallerLogin = async () => {
try {
const response = await openTruecallerForVerification();
console.log('Truecaller response', response);
// The userProfile will be updated automatically if verification is successful
} catch (err) {
console.error('Truecaller login error:', err);
// Handle error
}
};

[najmulansari]

Any update? Please help.

[ajitpatel28]

did you called initializeTruecallerSDK() before calling openTruecallerForVerification(), make sure truecaller is initialized before you call openTruecallerForVerification(), also share if there is any error

[najmulansari]

did you called initializeTruecallerSDK() before calling openTruecallerForVerification(), make sure truecaller is initialized before you call openTruecallerForVerification(), also share if there is any error

Yes, I called initializeTruecallerSDK() before calling openTruecallerForVerification. The response is coming null.
useEffect(() => {
// Initialize the Truecaller SDK when the component mounts
initializeTruecallerSDK();
}, []);

const handleTruecallerLogin = async () => {
try {
const response = await openTruecallerForVerification();
console.log('Truecaller response', response);
// The userProfile will be updated automatically if verification is successful
} catch (err) {
console.error('Truecaller login error:', err);
// Handle error
}
};

useEffect(() => {
if (userProfile) {
console.log('Truecaller profile:', userProfile);
// Handle successful login, e.g., navigate to a new screen or update app state
}
}, [userProfile]);

useEffect(() => {
if (error) {
console.error('Truecaller error:', error);
// Handle error, e.g., show an error message to the user
}
}, [error]);

OUT PUT

Truecaller response undefined

[ajitpatel28]

Are you checking on android ?
if yes, did you configured your android client id correctly, is your app verified by truecaller to use?

[najmulansari]

Yes, I am checking on Android. I have configured the client ID correctly. Please see the screenshots below. Also, the app is still in test. Should I submit it for "Production" use in the True Caller developer account? Please let me know. Thank you.

[ajitpatel28]

can you share your actives scopes in truecaller dashboard

[najmulansari]

Below are the scopes from my dashboard.

[ajitpatel28]

make sure

• the app package name is same in truecaller and in you application,
• the SHA1 fingerprint is properly configured

try making profile, email, address also mandatory ?

Also try this -

const {
       isTruecallerInitialized,
       initializeTruecallerSDK,
       openTruecallerForVerification,
       userProfile,
       error:trueCallerError,
       androidAuthorizationData
     } = useTruecaller(truecallerButtonConfig);
     
     const handleTruecallerLogin = async () => {
        if(!isTruecallerInitialized) return;
       try {
         await openTruecallerForVerification();
       } catch (err) {
         console.error('Truecaller login error:', err);
       }
     };
     
  useEffect(()=>{
           if(androidAuthorizationData){
               console.log("android auth data",androidAuthorizationData)
           }
       },[androidAuthorizationData])
       
     

check that are you getting androidAuthorizationData or not

[najmulansari]

I verified my android SHA1 is configured correctly on truecaller. Also package name is same at both places.

I implemented new code as per your sugession, and I am getting null auth data.

OUTPUT

android auth data {"authorizationCode": null, "codeVerifier": null}

[ajitpatel28]

can you share the whole component code where you are initializing the sdk and then opening the truecaller modal

[najmulansari]

Here is the comolete code.....

`import React, { useContext, useEffect, useState } from 'react';
import ParsedText from 'react-native-parsed-text';
import { View, TouchableOpacity, Text, Image, Alert } from 'react-native';
import { text } from '@text/index';
import { theme } from '@constants/theme';
import { components } from '@components/index';
import { useAppDispatch, useAppNavigation, useAppSelector } from '@hooks/index';
import { AuthContext } from '@context/AuthContext';

import { useFormik } from 'formik';
import * as Yup from 'yup';
import LoadingScreen from '@components/modal/LoadingScreen';
import AsyncStorage from '@react-native-async-storage/async-storage';

import { rH, rW } from '@styles/responsive';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import AppImages from '@constants/appimages';
import { FONT_BOLD, FONT_NORMAL, FONTSIZE, VERTICAL_SPACING } from '@constants/sizes';
import { useAlert } from '@context/AlertContext';
import * as Application from 'expo-application';

import { useTruecaller } from '@ajitpatel28/react-native-truecaller/src';
import { ThemedView } from '@components/ThemedView';
import { ThemedText } from '@components/ThemedText';

const TrueCallerSignIn: React.FC = () => {

const [appVersion, setAppVersion] = useState<string>('');
const navigation = useAppNavigation();

const [rememberMe, setRememberMe] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [errorMessage, setErrorMessage] = useState(' ');

const { showAlert, showSnackBar } = useAlert();

const {
    isTruecallerInitialized,
    initializeTruecallerSDK,
    openTruecallerForVerification,
    userProfile,
    error: trueCallerError,
    androidAuthorizationData
} = useTruecaller({
    androidClientId: 'sybsaxenskjqmf3sq_jn9rrk3l000000000000000000' // changed
});

useEffect(() => {
    // Initialize the Truecaller SDK when the component mounts
    initializeTruecallerSDK();
}, []);


useEffect(() => {
    const appVersion = Application.nativeApplicationVersion || 'NA';
    setAppVersion(appVersion);
    console.log('App Version:', appVersion);
}, []);


const LoginSchema = Yup.object().shape({
    email: Yup.string().email('Invalid email').required('Required'),
    password: Yup.string()
        .min(2, 'Invalid password!')
        .max(20, 'Invalid password!')
        .required('Required')
});


const validation: any = useFormik({
    enableReinitialize: true,
    validationSchema: LoginSchema,
    initialValues: { email: '', password: '' },
    onSubmit: values => handleTruecallerLogin(values)
});


const handleTruecallerLogin = async (values: any) => {
    try {
        const response = await openTruecallerForVerification();
        console.log('Truecaller response', response);
        // The userProfile will be updated automatically if verification is successful
    } catch (err) {
        console.error('Truecaller login error:', err);
        // Handle error
    }
};

useEffect(() => {
    if (androidAuthorizationData) {
        console.log("android auth data", androidAuthorizationData)
    }
}, [androidAuthorizationData])


useEffect(() => {
    if (userProfile) {
        console.log('Truecaller profile:', userProfile);
        // Handle successful login, e.g., navigate to a new screen or update app state
    }
}, [userProfile]);

useEffect(() => {
    if (trueCallerError) {
        console.error('Truecaller error:', trueCallerError);
        // Handle error, e.g., show an error message to the user
    }
}, [trueCallerError]);


useEffect(() => {
    setLoginData();
}, []);

const setLoginData = async () => {
    getRememberMe();

    if (__DEV__) {
        console.log('Development');
    }
}


const handleLogin = async (formValues: any) => {


    setIsLoading(true)
    saveRememberMe(formValues.email);
    try {
        // const response: any = await authenticateUser(formValues.email, formValues.password);
        // console.log('login response', JSON.stringify(response.message), response?.message?.message);
        // if (response?.status) {
        //     delayInSecond(1);
        //     navigation.replace('SplashScreen');
        // } else if (response?.message?.message?.includes('Network')) {
        //     showAlert('Network Error', 'Our server is currently down. Please try again later.');
        // }
        // else {
        //     showAlert('Wrong Credentials', 'Invalid username or password.');
        // }
    } catch (error: any) {
        console.log(error);
        //showAlert('Wrong Credentials', error);

        showAlert('Wrong Credentials', 'Invalid username or password.');
    }
    finally {
        setIsLoading(false)
    }
};

const saveRememberMe = async (userName: string) => {
    if (rememberMe) {
        await AsyncStorage.setItem('rememberMe', '1');
        await AsyncStorage.setItem('userName', userName);
    } else {
        await AsyncStorage.removeItem('rememberMe');
        await AsyncStorage.removeItem('userName');
    }
}


const getRememberMe = async () => {
    if (await AsyncStorage.getItem('rememberMe') == '1') {
        setRememberMe(true);
        validation.setFieldValue('email', await AsyncStorage.getItem('userName') || '');
    }
}


const handleRegisterPress = () => {
    navigation.navigate('SignUp'); // Assuming 'Register' is the name of your route
};
const renderContent = () => {
    return (

        <KeyboardAwareScrollView
            contentContainerStyle={{
                flexGrow: 1,
                padding: rW(20),
                justifyContent: 'flex-start',
                alignItems: 'center',
                paddingBottom: VERTICAL_SPACING.space_10
            }}
            enableOnAndroid={true}
        >
            <ThemedView style={{ alignItems: 'center', justifyContent: 'center' }}>
                <Image source={AppImages.loadingImage} style={{ marginBottom: rH(0) }} >
                </Image>

                <ThemedText style={{ marginBottom: VERTICAL_SPACING.space_20, fontSize: FONTSIZE.size_16, top: -10, fontWeight: 'bold' }}>
                    Garmenzo
                </ThemedText>
            </ThemedView>

            <text.H2 style={{ marginBottom: VERTICAL_SPACING.space_20, textAlign: 'center' }}>Welcome Back!!</text.H2>
            <components.InputField
                label='Email'
                placeholder='sample@email.com'
                containerStyle={{ marginBottom: VERTICAL_SPACING.space_20, marginTop: VERTICAL_SPACING.space_20 }}
                onBlur={validation.handleBlur('email')}
                error={validation.errors.email}
                touched={validation.touched.email}
                onChangeText={validation.handleChange('email')}
                checkIcon={false}
                value={validation.values.email || ""}

            />
            <components.InputField
                label='Password'
                placeholder='••••••••'
                containerStyle={{ marginBottom: VERTICAL_SPACING.space_20 }}
                onBlur={validation.handleBlur('password')}
                error={validation.errors.password}
                touched={validation.touched.password}
                onChangeText={validation.handleChange('password')}
                secureTextEntry={true}
                eyeOffIcon={true}
            />
            <ThemedView
                style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginBottom: rH(0),
                    justifyContent: 'space-between',
                    width: '100%',
                }}
            >
                <TouchableOpacity
                    style={{ flexDirection: 'row', alignItems: 'center' }}
                    onPress={() => setRememberMe((rememberMeState) => !rememberMeState)}
                >
                    <components.Checkbox active={rememberMe} />
                    <text.T14 style={{ marginLeft: rW(10) }}>Remember me</text.T14>
                </TouchableOpacity>
                <TouchableOpacity
                    style={{ marginLeft: 'auto' }}
                    onPress={() => navigation.navigate('ForgotPassword')}
                >
                    <text.T14>Forgot password?</text.T14>
                </TouchableOpacity>
            </ThemedView>
            {
                errorMessage &&
                <ParsedText
                    style={{ ...theme.fonts.textStyle_16, color: '#FF5A5F' }} >
                    {errorMessage}
                </ParsedText>
            }
            <components.Button
                title='Login'
                disabled={isLoading}
                containerStyle={{ marginBottom: rH(5) }}
                onPress={() => {
                    validation.handleSubmit()
                }}
            />

            <ThemedView style={{ flexDirection: 'row', alignItems: 'center', width: '100%', marginTop: 10 }}>
                <ThemedText style={{ ...theme.fonts.textStyle_16 }}>Don't have an account? </ThemedText>
                <TouchableOpacity onPress={(handleRegisterPress)}>
                    <ThemedText style={{ textDecorationLine: 'underline', ...theme.fonts.textStyle_16, }}>Register</ThemedText>
                </TouchableOpacity>
            </ThemedView>
            <ThemedView style={{
                position: 'absolute', bottom: 0, left: 0, right: 0, padding: rH(10),
                alignItems: 'center'
            }}>
                <ThemedText style={{ ...FONT_NORMAL.size_10, color: '#999' }}>
                    {`By using this app, you agree to our terms and conditions.`}
                </ThemedText>
                <ThemedText style={{ ...FONT_NORMAL.size_10, color: '#999' }}>
                    {`App Version: ${appVersion}`}
                </ThemedText>
            </ThemedView>


        </KeyboardAwareScrollView >
    );
};


const renderLoading = () => {
    return (<LoadingScreen isLoading={isLoading} loadingText='Loading, please wait...' />
    )
}

return (
    <components.SafeAreaView>
        {renderContent()}
        <LoadingScreen isLoading={isLoading} loadingText='Loading, please wait...' />
    </components.SafeAreaView>
);

};

export default TrueCallerSignIn;
`