diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 7e7720b57a6e..5445816f067b 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -127,3 +127,5 @@ function Checkbox(
 Checkbox.displayName = 'Checkbox';
 
 export default forwardRef(Checkbox);
+
+export type {CheckboxProps};
diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index 9968bb0e0772..270d476f4f79 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -120,3 +120,5 @@ function FormAlertWithSubmitButton({
 FormAlertWithSubmitButton.displayName = 'FormAlertWithSubmitButton';
 
 export default FormAlertWithSubmitButton;
+
+export type {FormAlertWithSubmitButtonProps};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 25532107016f..68c445cc944c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -55,3 +55,5 @@ function Header({title = '', subtitle = '', textStyles = [], shouldShowEnvironme
 Header.displayName = 'Header';
 
 export default Header;
+
+export type {HeaderProps};
diff --git a/src/stories/Checkbox.stories.js b/src/stories/Checkbox.stories.tsx
similarity index 62%
rename from src/stories/Checkbox.stories.js
rename to src/stories/Checkbox.stories.tsx
index fc5b63347c71..36bd40366a2a 100644
--- a/src/stories/Checkbox.stories.js
+++ b/src/stories/Checkbox.stories.tsx
@@ -1,28 +1,33 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import Checkbox from '@components/Checkbox';
+import type {CheckboxProps} from '@components/Checkbox';
+
+type CheckboxStory = ComponentStory<typeof Checkbox>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-export default {
+const story: ComponentMeta<typeof Checkbox> = {
     title: 'Components/Checkbox',
     component: Checkbox,
 };
 
-function Template(args) {
+function Template(props: CheckboxProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <Checkbox {...args} />;
+    return <Checkbox {...props} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: CheckboxStory = Template.bind({});
 Default.args = {
     onPress: () => {},
     isChecked: true,
     accessibilityLabel: '',
 };
 
+export default story;
 export {Default};
diff --git a/src/stories/FormAlertWithSubmitButton.stories.js b/src/stories/FormAlertWithSubmitButton.stories.tsx
similarity index 60%
rename from src/stories/FormAlertWithSubmitButton.stories.js
rename to src/stories/FormAlertWithSubmitButton.stories.tsx
index 5d64deb74145..d6060b9c2ad1 100644
--- a/src/stories/FormAlertWithSubmitButton.stories.js
+++ b/src/stories/FormAlertWithSubmitButton.stories.tsx
@@ -1,33 +1,34 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
+import type {FormAlertWithSubmitButtonProps} from '@components/FormAlertWithSubmitButton';
+
+type FormAlertWithSubmitButtonStory = ComponentStory<typeof FormAlertWithSubmitButton>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof FormAlertWithSubmitButton> = {
     title: 'Components/FormAlertWithSubmitButton',
     component: FormAlertWithSubmitButton,
 };
 
-function Template(args) {
+function Template(props: FormAlertWithSubmitButtonProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <FormAlertWithSubmitButton {...args} />;
+    return <FormAlertWithSubmitButton {...props} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
-const HtmlError = Template.bind({});
+const Default: FormAlertWithSubmitButtonStory = Template.bind({});
+const HtmlError: FormAlertWithSubmitButtonStory = Template.bind({});
 
-const defaultArgs = {
+const defaultArgs: FormAlertWithSubmitButtonStory['args'] = {
     isAlertVisible: true,
     onSubmit: () => {},
     buttonText: 'Submit',
-    network: {
-        isOffline: true,
-    },
 };
 
 Default.args = defaultArgs;
diff --git a/src/stories/Header.stories.js b/src/stories/Header.stories.tsx
similarity index 64%
rename from src/stories/Header.stories.js
rename to src/stories/Header.stories.tsx
index 8560fba4b27f..e683a78be992 100644
--- a/src/stories/Header.stories.js
+++ b/src/stories/Header.stories.tsx
@@ -1,24 +1,28 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
+import type {HeaderProps} from '@components/Header';
 import Header from '@components/Header';
 
+type HeaderStory = ComponentStory<typeof Header>;
+
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof Header> = {
     title: 'Components/Header',
     component: Header,
 };
 
-function Template(args) {
+function Template(props: HeaderProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <Header {...args} />;
+    return <Header {...props} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: HeaderStory = Template.bind({});
 Default.args = {
     title: 'Chats',
     shouldShowEnvironmentBadge: true,
diff --git a/src/stories/HeaderWithBackButton.stories.js b/src/stories/HeaderWithBackButton.stories.tsx
similarity index 61%
rename from src/stories/HeaderWithBackButton.stories.js
rename to src/stories/HeaderWithBackButton.stories.tsx
index eb31413de1d5..8306d8e19225 100644
--- a/src/stories/HeaderWithBackButton.stories.js
+++ b/src/stories/HeaderWithBackButton.stories.tsx
@@ -1,29 +1,33 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import type HeaderWithBackButtonProps from '@components/HeaderWithBackButton/types';
 import withNavigationFallback from '@components/withNavigationFallback';
 
 const HeaderWithBackButtonWithNavigation = withNavigationFallback(HeaderWithBackButton);
 
+type HeaderWithBackButtonStory = ComponentStory<typeof HeaderWithBackButtonWithNavigation>;
+
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof HeaderWithBackButtonWithNavigation> = {
     title: 'Components/HeaderWithBackButton',
     component: HeaderWithBackButtonWithNavigation,
 };
 
-function Template(args) {
+function Template(props: HeaderWithBackButtonProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <HeaderWithBackButtonWithNavigation {...args} />;
+    return <HeaderWithBackButtonWithNavigation {...props} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
-const Attachment = Template.bind({});
-const Profile = Template.bind({});
+const Default: HeaderWithBackButtonStory = Template.bind({});
+const Attachment: HeaderWithBackButtonStory = Template.bind({});
+const Profile: HeaderWithBackButtonStory = Template.bind({});
 Default.args = {
     title: 'Settings',
 };