diff --git a/with-gatsby/src/components/Header.tsx b/with-gatsby/src/components/Header.tsx
index 44fe799..4e3f660 100644
--- a/with-gatsby/src/components/Header.tsx
+++ b/with-gatsby/src/components/Header.tsx
@@ -1,10 +1,13 @@
 import { Link } from 'gatsby';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Text, View } from 'react-native';
 import { useREM } from 'react-native-web-hooks';
 
-const Header = ({ siteTitle }) => {
+interface Props {
+  siteTitle: string;
+}
+
+const Header = ({ siteTitle = '' }: Props) => {
 
   const accessibilityRole: any = 'banner'
   return (
@@ -37,12 +40,5 @@ const Header = ({ siteTitle }) => {
     </View>
   )
 }
-Header.propTypes = {
-  siteTitle: PropTypes.string,
-}
-
-Header.defaultProps = {
-  siteTitle: ``,
-}
 
 export default Header
diff --git a/with-gatsby/src/components/Layout.tsx b/with-gatsby/src/components/Layout.tsx
index c820f15..33b5d00 100644
--- a/with-gatsby/src/components/Layout.tsx
+++ b/with-gatsby/src/components/Layout.tsx
@@ -5,17 +5,20 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 import { graphql, useStaticQuery } from 'gatsby';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Text, View } from 'react-native';
 
+interface Props {
+  children: React.ReactNode;
+}
+
 import Header from './header';
 
 const Anchor = (props: any) => {
   return <Text accessibilityRole="link" {...props} />
 }
 
-const Layout = ({ children }) => {
+const Layout = ({ children }: Props) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {
@@ -49,8 +52,4 @@ const Layout = ({ children }) => {
   )
 }
 
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
 export default Layout
diff --git a/with-gatsby/src/components/SEO.tsx b/with-gatsby/src/components/SEO.tsx
index 857ced0..f88b472 100644
--- a/with-gatsby/src/components/SEO.tsx
+++ b/with-gatsby/src/components/SEO.tsx
@@ -5,12 +5,34 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 import { graphql, useStaticQuery } from 'gatsby';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
 
+interface Props {
+  title: string;
+  meta?: ConcatArray<Meta>;
+  lang?: string;
+  description?: string;
+}
 
-function SEO({ description, lang, meta, title }) {
+
+type Meta = MetaContent | MetaProperty;
+
+
+type MetaContent = {
+  property?: undefined;
+  content: any;
+  name: string;
+}
+
+type MetaProperty = {
+  property: string;
+  content: any;
+  name?: undefined;
+}
+
+
+function SEO({ description = '', lang = 'en', meta = [], title }: Props) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -72,17 +94,4 @@ function SEO({ description, lang, meta, title }) {
   )
 }
 
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-
-SEO.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
-}
-
 export default SEO