How to integrate types defined in an external file in a React Typescript project

I have a Typescript based React Native project where i want to externalize - and thus reuse - type definitions like interface, enum etc in a file(or perhaps a few files within a directory).

My understanding is that this should work if i define a types or typings entry in my package.json. This doesn't seem to work as my IDE complains about not finding name when i attempt a simple Interface integration. I can of course import the required definitions in my files, but i thought that being an 'official' typescript project(using the template provided by @react-native-community) these should work out of the box.

My package.json:

{ 
  "name": "appname",
  "typings": "./src/typings/index.d.ts",
  ...
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
    "@types/jest": "^24.0.18",
    "@types/react-native": "^0.60.22",
    ....
    "typescript": "^3.6.3"
  },
  ....
}

My tsconfig.json

{ 
  "compilerOptions": {    
    "resolveJsonModule": true,
    "target": "esnext",                      
    "module": "commonjs",                     
    "lib": ["es6"],                           
    "allowJs": true,                          
    "jsx": "react-native",                    
    "noEmit": true,                           
    "incremental": true,                      
    "isolatedModules": true,                  
    "strict": true,                           
    "moduleResolution": "node",               
    "baseUrl": "./",                          
    "allowSyntheticDefaultImports": true,    
    "esModuleInterop": true                  
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

An example usage for a component:

export const ActionButton:React.FC<ActionButtonProps> =(props)=>{
...
}

where ActionButtonProps reads:

export enum EButtonType {
    primary= "PRIMARY", secondary= "SECONDARY", tertiary="TERTIARY"
}

export interface ActionButtonProps {
    title: string
    submitting: boolean
    onPress: ()=>void
    hideLoading?: boolean
    loadingSize?:number | "small" | "large" | undefined
    loadingColor?: string
    type?: keyof typeof EButtonType
}

I want to externalize the above in a separate file (defined in the typings property in package.json or something similar) and not have to import the required type definitions in each file i want to use it.

Currently my IDE complains with TS error 2304: 'Cannot find name ActionButtonProps' even though the file i have referenced in the typings property in package.json has the entries already defined.

I am assuming its just a case of missing some configuration or perhaps changing entries.

I tried the following, none of which works:

• Have a triple-slash reference entry on top of the component file with a path attribute pointing to the file: /// <reference path="../../../../../typings/index.d.ts" />
• Have a triple-slash reference entry on top of the component file with a path attribute pointing to a file that sits alongside: /// <reference path="./ActionButton.d.ts" />
• Add an include property with wildcard values to tsconfig.json: "include": ["src/**/*","./src/typings/**/*"],
• Add a typeRoots property with wildcard and non-wildcard values to tsconfig.json: "typeRoots": ["src/typings/", "src/typings/**/*"],

Any pointers would be greatly appreciated. If there is a solution, i have an additional pertinent query as well. Is there a way i could have the index.d.ts call separate files that reside in directories inside it? i.e src > typings > index.d.ts that calls entries defined in src > typings > moduleA > index.d.ts and src > typings > moduleB > index.d.ts

Edit

my TS version is 3.6.4 and node version is 12.12.0