Setup on Javascript side

On your App.tsx file

import React, { useState, useEffect } from 'react';
import { NativeModules, Button, Text, View, ScrollView, Image, StyleSheet, FlatList } from 'react-native';
import { imageone } from './images';
const { CardModule, FaceEnrollmentModule, FaceAuthModule, TouchlessModule } = NativeModules;

export const CardDetection = () => {
    const [cardResults, setcardResults] = useState(null);
    const handleCardDetection = async () => {
        CardModule.callCardDetection(
            (cardResults: any) => {
                setcardResults(JSON.parse(cardResults));
            }
        )
    };

    return (
        <View>
            <Text style={styles.container}>Card Detection yes id sample</Text>
            <Button title="Detect Card" onPress={handleCardDetection} style={styles.button} />
            {cardResults && <View style={styles.container}>
                <View style={styles.imageContainer}>
                    <Image style={styles.image} source={{ uri: `data:image/png;base64,${cardResults?.documentImage}` }} />
                </View>
                <View style={styles.imageContainer}>
                    <Image style={styles.image} source={{ uri: `data:image/png;base64,${cardResults?.documentCardImage}` }} />
                </View>
            </View>}
            {cardResults && Object.keys(cardResults?.documentAllTextData).map((key, index) => (
                <View key={index} style={styles.container}>
                    <Text>{key}: {cardResults?.documentAllTextData[key]}</Text>
                </View>
            ))}
        </View>
    );
}


export const FaceEnrollment = () => {
    const [faceEnrollmentResults, setFaceEnrollmentResults] = useState(null);

    const handleFaceEnrollment = async () => {
        FaceEnrollmentModule.callFaceEnrollment(
            (faceEnrollmentResults: any) => {
                const parsedResults = JSON.parse(faceEnrollmentResults);
                setFaceEnrollmentResults(parsedResults);
            }
        );
    };

    return (
        <View>
            <Text style={styles.container}>Face Enrollment yes id sample</Text>
            <Button title="Face Enrollment" onPress={handleFaceEnrollment} style={styles.button} />
            {faceEnrollmentResults && faceEnrollmentResults?.faceImages && faceEnrollmentResults?.faceImages.length > 0 && (
                <ScrollView horizontal>
                    <FlatList
                        data={faceEnrollmentResults?.faceImages}
                        keyExtractor={(item, index) => index.toString()}
                        horizontal
                        renderItem={({ item }) => (
                            <View style={styles.imageContainer}>
                                <Image style={[
                                    styles.Image,
                                    {
                                        width: 150,
                                        height: 150,
                                    },
                                ]} resizeMode="center" source={{ uri: `data:image/png;base64,${item}` }} />
                            </View>
                        )}
                    />
                </ScrollView>
            )}
        </View>
    );
};

export const FaceAuth = () => {
    const [faceAuthResults, setFaceAuthResults] = useState(null);
    const faceOneImageData = imageone;
    const faceTwoImageData = imageone;
    const handleFaceAuth = async () => {
        FaceAuthModule.callFaceAuth(faceOneImageData,faceTwoImageData,
            (faceAuthResults: any) => {
                setFaceAuthResults(JSON.parse(faceAuthResults));
            }
        )
    };

    return (
        <View>
            <Text style={styles.container}>Face Auth yes id sample</Text>
            <Button title="Face Auth" onPress={handleFaceAuth} style={styles.button} />
            {faceAuthResults && <View style={styles.container}>
                <View style={styles.imageContainer}>
                    <Image style={styles.image} source={{ uri: `data:image/png;base64,${imageone}` }} resizeMode="contain" />
                </View>
                <View style={styles.imageContainer}>
                    <Image style={styles.image} source={{ uri: `data:image/png;base64,${imageone}` }} resizeMode="contain" />
                </View>
            </View>}
            {faceAuthResults && <Text style={styles.container}>"Match Score Results: Similarity One:  {faceAuthResults?.similarity1} || Similarity One:  {faceAuthResults?.similarity2}"</Text>}
        </View>
    );
}

export const Touchless = () => {
    const [touchlessResults, setTouchlessResults] = useState(null);

    const handleTouchless = async () => {
        TouchlessModule.callTouchless(
            (touchlessResults) => {
                // Assuming touchlessResults is a JSON string
                const parsedResults = JSON.parse(touchlessResults);
                setTouchlessResults(parsedResults);
            }
        );
    };

    return (
        <View>
            <Text style={styles.container}>Touchless yes id sample</Text>
            <Button title="Touchless" onPress={handleTouchless} style={styles.button} />

            {touchlessResults && (
                <View style={styles.container}>
                    {touchlessResults?.fullFrameImage && (
                        <View style={styles.imageContainer}>
                            <Image
                                style={styles.image}
                                source={{ uri: `data:image/png;base64,${touchlessResults.fullFrameImage}` }}
                                resizeMode="contain"
                            />
                        </View>
                    )}
                    {touchlessResults?.processedFingerprintImages && (
                        <ScrollView horizontal>
                            {touchlessResults?.processedFingerprintImages.map((base64Image, index) => (
                                <View key={index} style={styles.imageContainer}>
                                    <Image
                                        style={[
                                            styles.Image,
                                            {
                                                width: 150,
                                                height: 150,
                                            },
                                        ]}
                                        source={{ uri: `data:image/png;base64,${base64Image}` }}
                                        resizeMode="center"
                                    />
                                </View>
                            ))}
                        </ScrollView>
                    )}
                </View>
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    button: {
        paddingHorizontal: 16,
    },
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        paddingVertical: 12,
    },
    imageContainer: {
        width: '45%',
        height: 120,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#ddd',
        backgroundColor: '#fff',
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.2,
        shadowRadius: 1.41,
        elevation: 2,
    },
    image: {
        width: '100%',
        height: '100%',
        borderRadius: 8,
    },
    Image: {
        shadowColor: "black",
        shadowOffset: {
            width: -10,
            height: 9,
        },
        shadowOpacity: 0.5,
        shadowRadius: 2,
        elevation: 5
    },
});

const App = () => {
    return (
        <ScrollView>
            <CardDetection />
            <FaceEnrollment />
            <FaceAuth />
            <Touchless />
        </ScrollView>
    );
};

export default App;