DEV Community: Rahul Chandra

RNGP - Autolinking: Could not find project.android.packageName in react-native config output!

Rahul Chandra — Tue, 17 Sep 2024 19:02:45 +0000

Some time adding this will work
on react-native.config.js file

module.exports = {
  project: {
    ios: {},
    android: {
      packageName: 'com.yourproject',
    },
  },
  assets: ['./src/components/assets/fonts/'],
};

Also delete autlinking.json and clean building android also worked for me

React Native : How to override types in react navigation theme and add more

Rahul Chandra — Thu, 12 Sep 2024 18:18:55 +0000

Hi,
How we can add more theme color's other than that are specified types in types
There are different methods the method i followed is by adding a global.d.ts fil e in type folder in src and mentioning the colors needed types there and extending the theme class of react navigation

import '@react-navigation/native';
// Override the theme in react native navigation to accept our custom theme props.
declare module '@react-navigation/native' {
export type Theme = {
dark: boolean;
colors: {
primary: string;
background: string;
background2: string;
card: string;
btColor: string;
text: string;
text2: string;
border: string;
notification: string;
};
};
export function useTheme(): Theme;
}

React native tab view error :A props object containing a "key" prop is being spread into JSX

Rahul Chandra — Thu, 12 Sep 2024 07:37:29 +0000

Hi i have got this error when i tried react native lates version with react naitve tab view

this patch fixed this issue

diff --git a/node_modules/react-native-tab-view/src/TabBar.tsx b/node_modules/react-native-tab-view/src/TabBar.tsx
index e8d0b4c..1c3c09f 100644
--- a/node_modules/react-native-tab-view/src/TabBar.tsx
+++ b/node_modules/react-native-tab-view/src/TabBar.tsx
@@ -364,8 +364,7 @@ export function TabBar<T extends Route>({

   const renderItem = React.useCallback(
     ({ item: route, index }: ListRenderItemInfo<T>) => {
-      const props: TabBarItemProps<T> & { key: string } = {
-        key: route.key,
+      const props: TabBarItemProps<T> = {        
         position: position,
         route: route,
         navigationState: navigationState,
@@ -446,9 +445,9 @@ export function TabBar<T extends Route>({
         <>
           {gap > 0 && index > 0 ? <Separator width={gap} /> : null}
           {renderTabBarItem ? (
-            renderTabBarItem(props)
+             renderTabBarItem({ key: route.key, ...props })
           ) : (
-            <TabBarItem {...props} />
+            <TabBarItem key={route.key} {...props} />
           )}
         </>
       );