By using a react native Modal, I open a PanGestureHandler that is present within the UserInfoContainer component for animation. The panhandler opens up when but the initial height covers almost the full screen. How can I reduce the height of the entire handler? This code is also used on another screen but the length /height is automatically different. How can I fix this?

export const UserInfoContainer: React.FC<PanGestureProps> = ({ firstName}) => {  const dragY = useRef(new Animated.Value(0));  const onGestureEvent = Animated.event(    [{ nativeEvent: { translationY: dragY.current } }],    {      useNativeDriver: true,    },  );  const onHandleStateChange = (event: any) => {    if (event.nativeEvent.oldState === State.ACTIVE) {      dragY.current.extractOffset();    }  };  const animateInterpolation = dragY.current.interpolate({    inputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 4 + SCREEN_HEIGHT / 10, 0],    outputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 4 + SCREEN_HEIGHT / 10, 0],    extrapolate: 'clamp',  });  const animatedStyles = {    transform: [      {        translateY: animateInterpolation,      },    ],  };  const whitelistBarMarginInterpolation = dragY.current.interpolate({    inputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 3, 0],    outputRange: [0, moderateScale(150)],    extrapolate: 'clamp',  });  const whitelistBarStyles = {    transform: [      {        translateY: whitelistBarMarginInterpolation,      },    ],  };  return (<PanGestureHandler      onGestureEvent={onGestureEvent}      onHandlerStateChange={onHandleStateChange}><Animated.View        style={[          styles.container,          animatedStyles,        ]}><SwipeBar /><View><Text>            {firstName}</Text><Animated.View style={[styles.whitelistBar, whitelistBarStyles]}></Animated.View></Animated.View></PanGestureHandler>  );};

I am doing this to make a verticle line in between two numbers:

<View style={styles.ridesFriends}><Text style={styles.numbers}>132</Text><View style={styles.verticleLine}></View><Text style={styles.numbers}>2</Text></View>  ridesFriends: {    paddingTop: 60,    alignItems: 'center',    flexDirection: 'row',    justifyContent: 'space-evenly',    // marginLeft: 2,    // marginRight: 3,    width: '100%',  },  numbers: {    fontSize: 30,    color: '#31C283',    fontWeight: 'bold',  },  verticleLine: {    height: '100%',    width: 1,    backgroundColor: '#909090',  }

However, the line doesn't appear in the exact middle. This is because 132 is longer than the number 2. If I change 132 to just 3, then the line appears in the center. Is there any way to fix the line in the middle?

Updated:

<View style={styles.ridesFriends}>          {/* <View style={styles.numbersContainer}> */}<Text style={styles.numbers}>132</Text><View style={styles.verticleLine}></View><Text style={styles.numbers}>{numberOfFriends}</Text>          {/* </View> */}</View>  ridesFriends: {    paddingTop: 60,    alignItems: 'center',    flexDirection: 'row',    justifyContent: 'space-evenly',    // marginLeft: 2,    // marginRight: 3,    width: '100%',  },  numbersContainer: {    alignItems: 'center',    justifyContent: 'center',    flex: 1,  },  num1: {    fontSize: 30,    color: '#31C283',    fontWeight: 'bold',    borderRightWidth: 1,    borderColor: '#909090',  },  numbers: {    fontSize: 30,    color: '#31C283',    fontWeight: '900',    textShadowColor: '#000000',    textShadowRadius: 0.5,  },  verticleLine: {    height: '100%',    width: 1,    backgroundColor: '#E0E0E0',    //position: 'fixed',  },

In my component ContactList, I map a few items like this:

  return (<View style={styles.users}>      {data.users.nodes[0].userRelations.map(        (item: { relatedUser: RelatedUser; id: number }) => {          const userName = item.relatedUser.firstName          const numberOfFriends = item.relatedUser.userRelations.length;          return (<View style={styles.item} key={item.id}><TouchableOpacity onPress={() => setIsUserVisible(true)}><Thumbnail                  source={{                    uri:'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',                  }}></Thumbnail></TouchableOpacity><View style={styles.nameNumber}><Text style={styles.userName}>{userName}</Text></View><UserDetails                firstName={item.relatedUser.firstName}                rating={item.relatedUser.rating}                numberOfFriends={numberOfFriends}                onDeleteContact={onDeleteContact}                isUserVisible={isUserVisible}                setIsUserVisible={setIsUserVisible}></UserDetails></View>          );        },      )}</View>  );};

They appear somewhat like this.

Now I want that when I click on each the thumbnail of each item, a new modal should appear along with the details of that particular user. However, what happens is that when I exit my modal and click on some other user's thumbnail, I still get info about the user I previously clicked on. From my modal, I am calling another component.

This is how my modal component looks like:

export const UserDetails: React.FunctionComponent<UserProps> = ({  firstName,  rating,  numberOfFriends,  onDeleteContact,  isUserVisible,  setIsUserVisible,}) => {  console.log(isUserVisible);  return (<Modal visible={isUserVisible}><View style={styles.container}>        {/* <View> */}<View><TouchableOpacity            style={styles.cross}            onPress={() => setIsUserVisible(false)}><Thumbnail              source={{                uri:'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',              }}></Thumbnail></TouchableOpacity>          {/* <Text>HELLOO</Text> */}</View><View style={styles.searchLocationContainer}><UserInfoContainer            firstName={firstName}            rating={rating}            numberOfFriends={numberOfFriends}></UserInfoContainer></View></View></Modal>  );};

The first name, rating etc don't update. How can I fix this?

I have a native module and I would like to type it.

Here is an example of my module's interface

export interface BBAudioPlayer {  playSound: (sound: 'click' | 'tada') => Promise<void>;  pause: () => Promise<void>;}

and that is how I use it:

NativeModules.BBAudioPlayer.playSound('tada');

How can extend NativeModules to add the types of my new module?

Depending on the data returned by a graphql query, I want to create an object like this:

const DATA = [    {        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',        imageUrl: defaultUrl,        name: 'Johann',    },    {        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',        imageUrl: defaultUrl,        name: 'Lars',    },    {        id: '58694a0f-3da1-471f-bd96-145571e29d72',        imageUrl: defaultUrl,        name: 'Sarah',    },];

However, I don't understand how I can iterate through the data and create an object out of it. For instance, by doing this, I can extract all fristnames into an array:

var friendNames = new Array();if (data !== null && data !== undefined) {    data.users.nodes[0].userRelations.forEach((relation: UserRelation) => {        friendNames.push(relation.relatedUser.firstName);    });}

However, apart from the first names, I also want to add the ids and a hardcoded link (which will be same for all items for now). But how can I get my data in a shape similar to const DATA

after running a graphql query, I extract some values from the result into an object and use it in my flat list.

const DATA = data.users.nodes[0].userRelations.map(      (item: { relatedUser: { firstName: string; id: number } }) => ({        id: item.relatedUser.id,        imageUrl: defaultUrl,        name: item.relatedUser.firstName,      }),    );

This works. However, when I change it to something like this:

  const { error, data, refetch } = useUsersQuery({    variables: {      where: { id: 1 },    },  });  if (data) {    const DATA = data.users.nodes[0].userRelations.map(      (item: { relatedUser: { firstName: string; id: number } }) => ({        id: item.relatedUser.id,        imageUrl: defaultUrl,        name: item.relatedUser.firstName,      }),    );  } else {    const DATA = [      {        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',        imageUrl: defaultUrl,        name: 'Johann',      },      {        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',        imageUrl: defaultUrl,        name: 'Lars',      },      {        id: '58694a0f-3da1-471f-bd96-145571e29d72',        imageUrl: defaultUrl,        name: 'Sarah',      },    ];  }...<FlatList          data={DATA}          horizontal={true}          scrollEnabled          renderItem={({ item }) => (<WhitelistItem title={item.name} face={item.imageUrl} />          )}          keyExtractor={(item) => item.id}        />

I start getting an error here data={DATA} that Cannot find name 'DATA'. Did you mean 'data'?. Why is this so? Even if the query fails, I am still creating a DATA variable in the else statement. So why is not being detected here? How can I fix this?

In my component ContactList, I map a few items like this:

  return (<View style={styles.users}>      {data.users.nodes[0].userRelations.map(        (item: { relatedUser: RelatedUser; id: number }) => {          const userName = item.relatedUser.firstName          const numberOfFriends = item.relatedUser.userRelations.length;          return (<View style={styles.item} key={item.id}><TouchableOpacity onPress={() => setIsUserVisible(true)}><Thumbnail                  source={{                    uri:'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',                  }}></Thumbnail></TouchableOpacity><View style={styles.nameNumber}><Text style={styles.userName}>{userName}</Text></View><UserDetails                firstName={item.relatedUser.firstName}                rating={item.relatedUser.rating}                numberOfFriends={numberOfFriends}                onDeleteContact={onDeleteContact}                isUserVisible={isUserVisible}                setIsUserVisible={setIsUserVisible}></UserDetails></View>          );        },      )}</View>  );};

They appear somewhat like this.

Now I want that when I click on the thumbnail of each item, a new modal should appear along with the details of that particular user.

However, currently, multiple modals get generated together and I believe they overlap so when I exit my modal and click on some other user's thumbnail, I don't get the correct modal opened up.

From my modal, I am also calling another component.

This is how my modal component looks like:

export const UserDetails: React.FunctionComponent<UserProps> = ({  firstName,  rating,  numberOfFriends,  onDeleteContact,  isUserVisible,  setIsUserVisible,}) => {  console.log(isUserVisible);  return (<Modal visible={isUserVisible}><View style={styles.container}>        {/* <View> */}<View><TouchableOpacity            style={styles.cross}            onPress={() => setIsUserVisible(false)}><Thumbnail              source={{                uri:'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',              }}></Thumbnail></TouchableOpacity>          {/* <Text>HELLOO</Text> */}</View><View style={styles.searchLocationContainer}><UserInfoContainer            firstName={firstName}            rating={rating}            numberOfFriends={numberOfFriends}></UserInfoContainer></View></View></Modal>  );};

What can I do to only generate/open 1 particular modal when I click on one user's thumbnail?

At fist my code looked like this this

  const customerInputHandler = (currentCustomer) => {    setCustomer(currentCustomer.nativeEvent.text);  };

And after searching the internet I came on a solution and I implemented this code below.I've being searching around to try and understand this code but unable to.Could some please explain the error I had above & explain why this solution fixed everything

const customerInputHandler = (currentCustomer: {     nativeEvent: {text: React.SetStateAction<string>};  }) => {    setCustomer(currentCustomer.nativeEvent.text);};

This is my example code, here I need to test the regenerate function after component mounts and I need to make sure that qrCodeUrl has been changed or not for Qrcode component

export function Component() {  const [qrCode, setQrCode] = useState("initialUrl");const regenerate = () => {   getUrl = ApiCall;   serQrCode(getUrl);}useEffect(() => {  const regenerate = async () => {    const qrCodeUrl = await someCall();    setQrCode(qrCodeUrl);  };  regenerate(); }, [])return (<View testID="qrCodeWrapper"><Qrcode url={qrCode} /></View>)}

and this is my test file

test("Has to ensure that QR code is refreshed", async () => {    const { environment, getByTestId } = render(Component);    await resolveMostRecentOperation<ComponentQuery>(environment);    const qrCodeWrapper = getByTestId("qrCodeWrapper");    expect(qrCodeWrapper.props.children).toBeDefined();    expect(qrCodeWrapper.props.children.props.url).toBe(`${appConfig.baseUrl}snapshot/initialUrl`);  });

This test is working fine but I am unable to get the updated url after component mounts, it always showing initialUrl

lang: react-native, jest, @testing-library/react-native

How to use useRef with React Native TextInput to have correct types?

React Native documentation says that TextInput has 4 methods including blur.

But, as you can see on the image below it shows me an error.

What type I must use?

I am using react-navigation 5.5.1, all is working great but I have some trouble with typescript.

I tried to type the navigation prop according to the docs (https://reactnavigation.org/docs/typescript/) but it looks like navigation is still type any.

Any clues what I missed?

export type AppParamList = {  Intro: undefined;  Stories: undefined;};interface RoutesProps {}const Stack = createStackNavigator<AppParamList>();const Routes: FC<RoutesProps> = () => {  return (<SafeAreaProvider><NavigationContainer><Stack.Navigator><Stack.Screen name="Intro" component={Intro} /><Stack.Screen name="Stories" component={Stories} /></Stack.Navigator></NavigationContainer></SafeAreaProvider>  );};// Intro.tsximport { StackNavigationProp } from '@react-navigation/stack';import { AppParamList } from ../type IntroScreenNavigationProp = StackNavigationProp<AppParamList, 'Intro'>;type Props = {  navigation: IntroScreenNavigationProp;};const Intro = ({ navigation }: Props): ReactElement => (<SafeAreaView><Text>Intro</Text><TouchableHighlight onPress={() => navigation.navigate('Stories')}><Text>Go to stories</Text></TouchableHighlight></SafeAreaView>);

I have a native module and I would like to type it.

Here is an example of my module's interface

export interface BBAudioPlayer {  playSound: (sound: 'click' | 'tada') => Promise<void>;  pause: () => Promise<void>;}

and that is how I use it:

NativeModules.BBAudioPlayer.playSound('tada');

How can extend NativeModules to add the types of my new module?

I'm rendering a few items in my map in ContactListand upon clicking on the thumbnail, I want to navigate to a new screen UserDetailsScreen such that the data about the clicked item is also passed along.

Previously I was using modals, but now I trying to switch to react-navigation.

ContactList.tsx:

export const ContactList: React.FunctionComponent<UserProps> = ({  data,  onDeleteContact,}) => {  const [isUserVisible, setIsUserVisible] = useState(false);  //const [visibleUser, setVisibleUser] = useState<any>();  const navigation = useNavigation();  return (<View style={styles.users}>      {data.users.nodes[0].userRelations.map(        (item: { relatedUser: RelatedUser; id: number }) => {          const numberOfFriends = item.relatedUser.userRelations.length;          const numberPlate = 'WHV AB 123';          return (<View style={styles.item} key={item.id}>              {/* <TouchableOpacity onPress={() => setIsUserVisible(true)}> */}<TouchableOpacity                onPress={() =>                  navigation.navigate('UserDetailsScreen', {                    firstName: item.relatedUser.firstName,                    rating: item.relatedUser.rating,                    numberOfFriends: numberOfFriends,                    onDeleteContact: onDeleteContact,                    isUserVisible: isUserVisible,                    setIsUserVisible: setIsUserVisible,                    numberPlate: numberPlate,                    navigation: navigation,                  })                }><Thumbnail                  }}></Thumbnail></TouchableOpacity><View style={styles.nameNumber}><Text style={styles.userName}>{userName}</Text></View>              {/* <UserDetails                firstName={item.relatedUser.firstName}                rating={item.relatedUser.rating}                numberOfFriends={numberOfFriends}                onDeleteContact={onDeleteContact}                isUserVisible={isUserVisible}                setIsUserVisible={setIsUserVisible}                  numberPlate={numberPlate}></UserDetails> */}</View>          );        },      )}</View>  );};

UserDetailsScreen:

export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({  firstName,  rating,  numberOfFriends,  numberPlate,  onDeleteContact,  navigation,//   isUserVisible,//   setIsUserVisible,}) => {//const navigation = useNavigation();const fName = navigation.getParam('firstName')  return (    // <Modal visible={isUserVisible}><View style={styles.container}><View><TouchableOpacity            style={styles.cross}            //onPress={() => setIsUserVisible(false)}>              onPress={() => navigation.navigate('Whitelist')}><Thumbnail></Thumbnail></TouchableOpacity></View><View style={styles.searchLocationContainer}><UserInfoContainer            firstName={firstName}            rating={rating}            numberPlate={numberPlate}            numberOfFriends={numberOfFriends}></UserInfoContainer></View></View>    // </Modal>  );};

Similarly, when I click on the thumbnail on this screen, I want to go back to my previous page where I can click on another object.

However, I keep getting an error that navigation.getParam is undefined. How can I fix this?

I'm rendering a few items in my map in ContactListand upon clicking on the thumbnail, I want to navigate to a new screen UserDetailsScreen such that the data about the clicked item is also passed along.

Previously I was using modals, but now I trying to switch to react-navigation.

ContactList.tsx:

export const ContactList: React.FunctionComponent<UserProps> = ({  data,  onDeleteContact,}) => {  const [isUserVisible, setIsUserVisible] = useState(false);  //const [visibleUser, setVisibleUser] = useState<any>();  const navigation = useNavigation();  return (<View style={styles.users}>      {data.users.nodes[0].userRelations.map(        (item: { relatedUser: RelatedUser; id: number }) => {          const numberOfFriends = item.relatedUser.userRelations.length;          const numberPlate = 'WHV AB 123';          return (<View style={styles.item} key={item.id}>              {/* <TouchableOpacity onPress={() => setIsUserVisible(true)}> */}<TouchableOpacity                onPress={() =>                  navigation.navigate('UserDetailsScreen', {                    firstName: item.relatedUser.firstName,                    rating: item.relatedUser.rating,                    numberOfFriends: numberOfFriends,                    onDeleteContact: onDeleteContact,                    isUserVisible: isUserVisible,                    setIsUserVisible: setIsUserVisible,                    numberPlate: numberPlate,                    navigation: navigation,                  })                }><Thumbnail                  }}></Thumbnail></TouchableOpacity><View style={styles.nameNumber}><Text style={styles.userName}>{userName}</Text></View>              {/* <UserDetails                firstName={item.relatedUser.firstName}                rating={item.relatedUser.rating}                numberOfFriends={numberOfFriends}                onDeleteContact={onDeleteContact}                isUserVisible={isUserVisible}                setIsUserVisible={setIsUserVisible}                  numberPlate={numberPlate}></UserDetails> */}</View>          );        },      )}</View>  );};

UserDetailsScreen:

export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({  firstName,  rating,  numberOfFriends,  numberPlate,  onDeleteContact,  navigation,//   isUserVisible,//   setIsUserVisible,}) => {//const navigation = useNavigation();const fName = navigation.getParam('firstName')  return (    // <Modal visible={isUserVisible}><View style={styles.container}><View><TouchableOpacity            style={styles.cross}            //onPress={() => setIsUserVisible(false)}>              onPress={() => navigation.navigate('Whitelist')}><Thumbnail></Thumbnail></TouchableOpacity></View><View style={styles.searchLocationContainer}><UserInfoContainer            firstName={firstName}            rating={rating}            numberPlate={numberPlate}            numberOfFriends={numberOfFriends}></UserInfoContainer></View></View>    // </Modal>  );};

Similarly, when I click on the thumbnail on this screen, I want to go back to my previous page where I can click on another object.

However, I keep getting an error that navigation.getParam is undefined. How can I fix this?

In my component ContactList, I have rendered sone items using a map. Each item contains a thumbnail. When I click on the thumbnail, I want to navigate to a new screen called UserDetailsScreen. While I navigate, I also want to transfer data to the next screen about the particular user whose thumbnail was clicked on.

Modals don't work properly since multiple modals will open if I used it in a map. So I am trying to use react-navigation.

ContactList.tsx:

export const ContactList: React.FunctionComponent<UserProps> = ({  data,  onDeleteContact,}) => {  const [isUserVisible, setIsUserVisible] = useState(false);  //const [visibleUser, setVisibleUser] = useState<any>();  const navigation = useNavigation();  return (<View style={styles.users}>      {data.users.nodes[0].userRelations.map(        (item: { relatedUser: RelatedUser; id: number }) => {          const numberOfFriends = item.relatedUser.userRelations.length;          const numberPlate = 'WHV AB 123';          return (<View style={styles.item} key={item.id}>              {/* <TouchableOpacity onPress={() => setIsUserVisible(true)}> */}<TouchableOpacity                onPress={() =>                  navigation.navigate('UserDetailsScreen', {                    firstName: item.relatedUser.firstName,                    rating: item.relatedUser.rating,                    numberOfFriends: numberOfFriends,                    onDeleteContact: onDeleteContact,                    isUserVisible: isUserVisible,                    setIsUserVisible: setIsUserVisible,                    numberPlate: numberPlate,                    navigation: navigation,                  })                }><Thumbnail                  }}></Thumbnail></TouchableOpacity><View style={styles.nameNumber}><Text style={styles.userName}>{userName}</Text></View>              {/* <UserDetails                firstName={item.relatedUser.firstName}                rating={item.relatedUser.rating}                numberOfFriends={numberOfFriends}                onDeleteContact={onDeleteContact}                isUserVisible={isUserVisible}                setIsUserVisible={setIsUserVisible}                  numberPlate={numberPlate}></UserDetails> */}</View>          );        },      )}</View>  );};

UserDetailsScreen:

type UserProps = {  //data: UsersQueryHookResult,  firstName: string;  rating: number;  numberOfFriends: number;  numberPlate: string;  onDeleteContact: (id: number) => void;  navigation: any;};export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({  firstName,  rating,  numberOfFriends,  numberPlate,  onDeleteContact,  navigation,//   isUserVisible,//   setIsUserVisible,}) => {//const navigation = useNavigation();const fName = navigation.getParam('firstName')  return (    // <Modal visible={isUserVisible}><View style={styles.container}><View><TouchableOpacity            style={styles.cross}            //onPress={() => setIsUserVisible(false)}>              onPress={() => navigation.navigate('Whitelist')}><Thumbnail></Thumbnail></TouchableOpacity></View><View style={styles.searchLocationContainer}><UserInfoContainer            firstName={firstName}            rating={rating}            numberPlate={numberPlate}            numberOfFriends={numberOfFriends}></UserInfoContainer></View></View>    // </Modal>  );};

Additionally, when I click on the thumbnail from this screen, I should go back to my previous screen such that I can click on another object now.

For now, I keep getting an error that navigation.getParam is undefined. How can I fix this?

I believe I need to pass the route props but I'm not sure how to use them and whether I should pass them in both screens or one

For navigations, I am using useNavigation from '@react-navigation/native';

I am using this to pass data between two screens in my app:

type UserDetailsProps = {  onDeleteContact: (id: number) => void;  route: any;};

I don't want to use the any time but I don't know what other type is suitable here.

I'm trying to use a FlatList like this:

<FlatList          data={vehicles}          horizontal={false}          scrollEnabled          renderItem={({ vehicle}) => <VehicleContainer vehicle={vehicle} />}          keyExtractor={(vehicle: any) => vehicle.numberPlate.toString()}        />

where vehicleslooks like this:

[{numberPlate: "OL-AL-1336", __typename: "Vehicle"}]

and the component VehicleContainerlooks like this:

type VehicleContainerProps = {  vehicle: Vehicle;};export const VehicleContainer: React.FunctionComponent<VehicleContainerProps> = ({  vehicle,}) => {  if (!vehicle) {    return null;  }  return (<View style={styles.vehicleInfo}><Text style={styles.numberPlate}>{vehicle.numberPlate}</Text></View>  );};

But I keep getting an error on renderItem's vehicle that Property 'vehicle' does not exist on type 'ListRenderItemInfo<Vehicle>'What is ListRenderItemInfo? It's not something I have defined myself. How can I fix this?

I created a new React Native project with --template typescript

I deleted the template directory which came as part of the boilerplate.

I then proceeded to add ESLint:

module.exports = {  parser: "@typescript-eslint/parser",  plugins: ["@typescript-eslint"],  extends: ["airbnb-typescript-prettier"]};

However, when I open babel.config.js, I get this error

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: /Users/Dan/site/babel.config.js. The file must be included in at least one of the projects provided.eslint

This question is specific to arrow functions. Is it possible to include the default values alongside an interface in the function parameters, and without resorting to Object.assign()?

interface Props {  someBoolean?: boolean;  anotherBoolean?: boolean;  children: any;}const DefaultValues = {  someBoolean: false,  anotherBoolean: false,}export const StackOverflow: React.FC<Props> = (_props: Props) => {  const props = Object.assign({}, _props, DefaultValues);  return <React.Fragment>{props.children}</React.Fragment>;};

I installed RNF from starter kit provided by Invertase. I am using RNF app, database, analytics, auth. Everything worked fine until I needed the auth module. It throws an error on app startup (on Android, haven't tried iOS):

    ...\node_modules\react-native\Libraries\Core\ExceptionsManager.js:86 You've attempted to require '@react-native-firebase/auth' version '6.0.3', however, the '@react-native-firebase/app' module is of a different version (6.0.0).    All React Native Firebase modules must be of the same version. Please ensure they match up in your package.json file and re-run yarn/npm install.

But I checked in package.json of all the modules are of version 6.0.3, and my package.json also looks good:

{"name": "meditationapp","version": "6.0.3","private": true,"scripts": {"start": "react-native start","run:android": "react-native run-android","run:ios": "react-native run-ios --simulator=\"iPhone 11 Pro Max\"","build:apk": "cd android && ./gradlew assembleRelease","test": "jest","prepare": "patch-package","storybook": "start-storybook -p 7007"  },"dependencies": {"@react-native-community/async-storage": "^1.6.2","@react-native-community/netinfo": "^4.4.0","@react-native-firebase/analytics": "6.0.3","@react-native-firebase/app": "6.0.3","@react-native-firebase/auth": "6.0.3","@react-native-firebase/database": "6.0.3","@typescript-eslint/eslint-plugin": "^2.3.3","@typescript-eslint/parser": "^2.3.3",    ...

Import in App.tsx:

import firebase from '@react-native-firebase/app'import database from '@react-native-firebase/database'import analytics from '@react-native-firebase/analytics'import auth from '@react-native-firebase/auth'

Things I've tried:

1. Delete node_modules and run npm install
2. Installed v6.0.0 instead of 6.0.3
3. Deleted android/app/build

Can't think of anything else to try, but the error does not go away. It's working fine with analytics and database, only auth is an issue.