"CardField" was not found in the UIManager. When trying to use the Stripe with React Native

Question

I am trying to use the stripe SDK with React Native and I am only working with Android. I am getting this error here.

Invariant Violation: requireNativeComponent: "CardField" was not found in the UIManager.

I am not too sure if it's an error with the publishable_key since I see examples where you pass the key in the StripeProvider directly or if you have to fetch it from localhost like I am doing below.

Or is it the version of "@stripe/stripe-react-native": "^0.4.0".

Any help would be appreciated!

Here is where I initialize stripe into my app and wrap in a provider.

import React, { useState, useEffect } from 'react';
import { Provider } from 'react-redux';
import store from './src/services/redux/store';
import { ThemeProvider } from 'react-native-elements';
import { theme } from './src/utils/theme';
import StackNavigator from './src/navigation/StackNavigator';
import { StripeProvider } from '@stripe/stripe-react-native';

export const API_URL = 'http://10.0.2.2:4242';

async function fetchPublishableKey() {
  try {
    const response = await fetch(`${API_URL}/config`);
    const { publishableKey } = await response.json();
    return publishableKey;
  } catch (e) {
    console.log('no stripe ', e);
  }
}

const App = () => {
  const [publishableKey, setPublishableKey] = useState('');

  useEffect(() => {
    async function init() {
      const publishableKey = await fetchPublishableKey();
      if (publishableKey) {
        console.log(
          ' **************************  publishablekey ************************** ',
          publishableKey
        );
        setPublishableKey(publishableKey);
      }
    }
    init();
  });

  return (
    <StripeProvider publishableKey={publishableKey}>
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <StackNavigator />
        </ThemeProvider>
      </Provider>
    </StripeProvider>
  );
};

export default App;

Here is where I am using the CardField component where the error is coming from.

import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';
import { CardField, CardFieldInput, useStripe } from '@stripe/stripe-react-native';

const PaymentInfo = () => {
  const [card, setCard] = useState('');
  return (
    <View>
      <Text>PaymentInfo</Text>
      <TextInput placeholder="stripe" style={{ backgroundColor: 'white' }} />

      <CardField
        postalCodeEnabled={true}
        placeholder={{
          number: '4242 4242 4242 4242',
        }}
        cardStyle={{
          backgroundColor: '#FFFFFF',
          textColor: '#000000',
        }}
        style={{
          width: '100%',
          height: 50,
          marginVertical: 30,
        }}
        onCardChange={(cardDetails) => {
          setCard(cardDetails as any);
        }}
        onFocus={(focusedField) => {
          console.log('focusField', focusedField);
        }}
      />
    </View>
  );
};

export default PaymentInfo;

Answer 1

I solved this error by upgrading my api level to 31. I was on 30 before and that is why it couldnt find the CardField.

build.gradle

buildscript {
    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31
        ndkVersion = "21.4.7075529"
        googlePlayServicesVersion = "17.0.0"
        androidMapsUtilsVersion = "2.2.0"

       
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:4.2.2")
        classpath("com.google.gms:google-services:4.3.10")

      
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

Answer 2

Have you run pod install in the ios folder? Unlike Android project where gradle can automatically download the dependencies for you. In iOS project you need to manually execute this command to get the dependencies.