Binary XML file line #9 in com.client:layout/stripe_card_form_view

Question

I have been following this guide for Stripe API:

https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#4-change-your-app-theme-to-inherit-from-a-material-components-theme

I am trying to implement Stripe in react native and I would like to use the CardForm from this library but there is additional setup for this case which is included from above.

But for some reason, I am getting this error:

android/app/build.gradle:

dependencies {
   implementation 'androidx.appcompat:appcompat:1.4.1'
   implementation 'com.google.android.material:material:1.6.0'
}

package.json

"dependencies": {
    "@stripe/stripe-react-native": "^0.22.0"
}

Component:

import { StyleSheet, Text, View, Modal } from 'react-native';
import React from 'react';
import {
  StripeProvider,
  usePaymentSheet,
  CardField,
  CardForm,
  useStripe,
} from '@stripe/stripe-react-native';

const PaymentModal = () => {

  function PaymentScreen() {
    return (
      <View>
        <CardForm
          postalCodeEnabled={true}
          cardStyle={{
            backgroundColor: '#FFFFFF',
            textColor: '#000000',
            borderWidth: 1,
          }}
          style={{
            width: '100%',
            height: 50,
            marginVertical: 30,
          }}
          onCardChange={cardDetails => {
            setCard(cardDetails);
          }}
          onFocus={focusedField => {
            console.log('focusField', focusedField);
          }}
        />
      </View>
    );
  }

  return (
    <Modal
      visible={true}
      transparent={true}
      animationType="slide"
      onRequestClose={() => null}>
      <View
        style={{
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          flex: 1,
          alignItems: "center",
          justifyContent: "flex-end"
        }}>
        <View style={{
          width: "100%",
          height: "60%",
          backgroundColor: "white"
        }}>
          <StripeProvider publishableKey="pk_test_51MBYAwFjaRQnIgRgw0j5Qo40oXqM5UijDDo5L6ynKB68VZJ3KLJN0b90b9HNpJ90c4CJqe7BHR2kvKSQOW45Z2yb00A0I2UpnH">
            <PaymentScreen />
            {/* <Button title='Buy' onPress={buy} /> */}
          </StripeProvider>
        </View>
      </View>
    </Modal>
  );
}

export default PaymentModal

const styles = StyleSheet.create({})