First time setup prevents Expo dev-client from loading "Unable to resolve prop-types"

[MatD1]

I'm just setting up React Native Firebase auth, and as Apple is required if any third-party auth is being used I thought I would get this done first however upon installing, rebuilding, and then setting up I am just getting an error that is preventing the dev client from loading the app " iOS Bundling failed 852ms Unable to resolve "prop-types" from "node_modules/@invertase/react-native-apple-authentication/lib/AppleButton.ios.js".

Notes

• I will note this project is a typescript, managed Expo project with a dev client so I can use React Native Firebase. Everything has been working fine up til now.
• Yes I am using an iPhone and only running ios at the moment
• Anonymous auth was setup and working as well.

Reproduction

Generate an Expo project add dev-client, set up dev-client + app install RNFirebase, and set up Apple auth with this project.

Login.tsx

import { Box, Button, Divider, HStack, Heading } from "native-base";
import React from "react";
import { KeyboardAvoidingView, StyleSheet, NativeModules } from "react-native";
import auth from "@react-native-firebase/auth";
import { appleAuth, AppleButton } from '@invertase/react-native-apple-authentication';

export const Login = ({ navigation }: any) => {
  React.useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged((user) => {
      if (user) {
        navigation.replace("EFT Tools");
      }
    });

    return unsubscribe;
  }, []);

  const handleLoginAnon = () => {
    auth()
      .signInAnonymously()
      .then(() => {
        console.log("User signed in anonymously");
      })
      .catch((error) => {
        if (error.code === "auth/operation-not-allowed") {
          console.log("Enable anonymous in your firebase console.");
        }

        console.error(error);
      });
  };

  async function onAppleButtonPress() {
    // 1). start a apple sign-in request
    const appleAuthRequestResponse = await appleAuth.performRequest({
      requestedOperation: appleAuth.Operation.LOGIN,
      requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
    });

    // 2). if the request was successful, extract the token and nonce
    const { identityToken, nonce } = appleAuthRequestResponse;

    // can be null in some scenarios
    if (identityToken) {
      // 3). create a Firebase `AppleAuthProvider` credential
      const appleCredential = auth.AppleAuthProvider.credential(identityToken, nonce);

      // 4). use the created `AppleAuthProvider` credential to start a Firebase auth request,
      //     in this example `signInWithCredential` is used, but you could also call `linkWithCredential`
      //     to link the account to an existing user
      const userCredential = await auth().signInWithCredential(appleCredential);

      // user is now signed in, any Firebase `onAuthStateChanged` listeners you have will trigger
      console.warn(`Firebase authenticated via Apple, UID: ${userCredential.user.uid}`);
    } else {
      // handle this - retry?
    }
  }

  return (
    <KeyboardAvoidingView behavior="padding" style={styles.container}>
      <Heading>Welcome Login</Heading>
      <Divider m={5} />
      <HStack space={2}>
        <Box>
          <Button onPress={handleLoginAnon}>Login Anonymously</Button>
        </Box>
          <Box>
           {appleAuth.isSupported && (
              <AppleButton
                cornerRadius={5}
                style={{ width: 200, height: 60 }}
                buttonStyle={AppleButton.Style.WHITE}
                buttonType={AppleButton.Type.SIGN_IN}
                onPress={() => onAppleButtonPress()}
              />
            )}
        </Box>
      </HStack>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

[nicolelopezfeliz]

Did you manage to solve this? @MatD1 because I am having the same issue.

[mikehardy]

I think you want this https://www.npmjs.com/package/deprecated-react-native-prop-types