harisbaig100

React Native Developer Assessment

📌 Objective

Build a React Native mobile application with the following key features:

1. Authentication (Login/Logout):
   • Implement a simple authentication flow using JWT-based login (username/password).
   • Store tokens securely (e.g., using SecureStore or AsyncStorage).
   • Include logout functionality.

harisbaig100

// recorderUtils.js
import AudioRecorderPlayer from 'react-native-audio-recorder-player';
import {Platform} from 'react-native';

const audioRecorder = new AudioRecorderPlayer();
let recordPath = '';

export const startRecording = async () => {
  const ext = Platform.OS === 'android' ? 'mp4' : 'm4a';
  recordPath = `recording.${ext}`;

harisbaig100

// VoiceMessagePlayer.js
import React, {useState, useEffect, useRef} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ActivityIndicator,
  Platform,
  Alert,

harisbaig100

// MicButton.js
import React, {useState, useRef} from 'react';
import {TouchableOpacity, Text, StyleSheet, View} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const MicButton = ({startRecording, stopRecording, cancelRecording}) => {
  const [isRecording, setIsRecording] = useState(false);
  const [recordTime, setRecordTime] = useState('00:00');
  const intervalRef = useRef(null);
  const recordMsRef = useRef(0);

harisbaig100

import React from 'react';
import {Button, View, Alert} from 'react-native';
import useApplePay, {Country, Currency} from '../hooks/useApplePay';

const ApplePayButton = () => {
  const {onApplePay} = useApplePay({
    handlePayment: async (values, paymentResponse) => {
      try {
        // code for API call to backend for payment processing go here
        console.log('Processing payment with values:', values, paymentResponse);

harisbaig100

import {Alert, NativeModules, Platform} from 'react-native';

export enum Country {
  AE = 'AE', // United Arab Emirates
  BH = 'BH', // Bahrain
  KW = 'KW', // Kuwait
  OM = 'OM', // Oman
  QA = 'QA', // Qatar
  SA = 'SA', // Saudi Arabia
  US = 'US', // United States

harisbaig100

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(ApplePayModule, NSObject)

RCT_EXTERN_METHOD(canMakePayments:(RCTPromiseResolveBlock)resolver rejecter:(RCTPromiseRejectBlock)rejecter)
RCT_EXTERN_METHOD(requestPayment:(NSDictionary *)paramsJSON resolver:(RCTPromiseResolveBlock)resolver rejecter:(RCTPromiseRejectBlock)rejecter)
RCT_EXTERN_METHOD(completePayment:(BOOL)success)

@end

harisbaig100

import Foundation
import PassKit
import React

struct PaymentRequestParams: Codable {
  let merchantIdentifier: String
  let supportedNetworks: [String]
  let countryCode: String
  let currencyCode: String
  let label: String

harisbaig100

import { useState, useEffect } from 'react';
import NetInfo from '@react-native-community/netinfo';

const useFetch = (url) => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {

harisbaig100

import React, { useState } from 'react';
import { ScrollView, Text, View, StyleSheet, Platform } from 'react-native';
import Animated, { useAnimatedRef } from 'react-native-reanimated';

export const ParallaxExample = () => {
  const scrollRef = useAnimatedRef<Animated.ScrollView>();
  const [isChildReachToBottom, setIsChildReachToBottom] = useState(false);
  const [isChildScrollable, setIsChildScrollable] = useState(false);
  const [showHeader, setShowHeader] = useState(true);