title: react-i18next on React Native No overload matches this call typescript
body: <p>Iam trying to configure react-i18next 11.8.2 in my React Native app with typescript 4.1.2:</p>
  <pre><code>i18n.use(initReactI18next).init({
    resources: {
      en,
      es,
    },
    lng: 'es',
    fallbackLng: 'es',
    interpolation: {
      escapeValue: false,
    },
  });
  </code></pre>
  <p>with two resources files (en, es).</p>
  <p>But i am getting an typescript error with the TFunction interface using the useTranslation hook:</p>
  <pre><code>const {t, i18n} = useTranslation(['SelectLanguage']);]
  
  &lt;StyledLabel&gt;{t('SelectLanguage:title')}&lt;/StyledLabel&gt;
  </code></pre>
  <p>The error:</p>
  <pre><code>No overload matches this call.
    Overload 1 of 2, '(props: Pick&lt;Pick&lt;TextProps &amp; RefAttributes&lt;Text&gt;, &quot;key&quot; | &quot;ref&quot; | &quot;style&quot; | &quot;onLayout&quot; | &quot;testID&quot; | &quot;nativeID&quot; | &quot;accessible&quot; | &quot;accessibilityActions&quot; | ... 35 more ... | &quot;dataDetectorType&quot;&gt; &amp; Partial&lt;...&gt;, &quot;key&quot; | ... 42 more ... | &quot;dataDetectorType&quot;&gt; &amp; { ...; } &amp; { ...; } &amp; { ...; }): ReactElement&lt;...&gt;', gave the following error.
      Type 'TFunctionResult' is not assignable to type 'string | number | TextElement | ChildElement[] | (string &amp; {}) | (string &amp; ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;...&gt;)&gt;) | ... 20 more ... | undefined'.
        Type 'null' is not assignable to type 'string | number | TextElement | ChildElement[] | (string &amp; {}) | (string &amp; ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;...&gt;)&gt;) | ... 20 more ... | undefined'.
    Overload 2 of 2, '(props: StyledComponentPropsWithAs&lt;typeof Text, any, {}, never&gt;): ReactElement&lt;StyledComponentPropsWithAs&lt;typeof Text, any, {}, never&gt;, string | ... 1 more ... | (new (props: any) =&gt; Component&lt;...&gt;)&gt;', gave the following error.
      Type 'TFunctionResult' is not assignable to type 'string | number | TextElement | ChildElement[] | (string &amp; {}) | (string &amp; ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;...&gt;)&gt;) | ... 20 more ... | undefined'.
        Type 'null' is not assignable to type 'string | number | TextElement | ChildElement[] | (string &amp; {}) | (string &amp; ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;...&gt;)&gt;) | ... 20 more ... | undefined'.ts(2769)
  text.component.d.ts(15, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;TextProps &amp; RefAttributes&lt;Text&gt;, &quot;key&quot; | &quot;ref&quot; | &quot;style&quot; | &quot;onLayout&quot; | &quot;testID&quot; | ... 38 more ... | &quot;dataDetectorType&quot;&gt; &amp; Partial&lt;...&gt;, &quot;key&quot; | ... 42 more ... | &quot;dataDetectorType&quot;&gt; &amp; { ...; } &amp; { ...; } &amp; { ...; }'
  text.component.d.ts(15, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;TextProps &amp; RefAttributes&lt;Text&gt;, &quot;key&quot; | &quot;ref&quot; | &quot;style&quot; | &quot;onLayout&quot; | &quot;testID&quot; | ... 38 more ... | &quot;dataDetectorType&quot;&gt; &amp; Partial&lt;...&gt;, &quot;key&quot; | ... 42 more ... | &quot;dataDetectorType&quot;&gt; &amp; { ...; } &amp; { ...; } &amp; { ...; }'
  </code></pre>
  <p>I can solve this error by parsing the result of the i18n translation like this:</p>
  <pre><code>&lt;StyledLabel&gt;{t&lt;string&gt;('SelectLanguage:title')}&lt;/StyledLabel&gt;
  </code></pre>
  <p>Do you have any idea of why this is happening? i think it could be the StyledLabel props, it is just an styled component of a @ui-kitten/components Text</p>
  <pre><code>import styled from 'styled-components/native';
  import {Text} from '@ui-kitten/components';
  
  export const StyledLabel = styled(Text)`
    margin-bottom: 5px;
  `;
  </code></pre>
  <p>the text.component of UI Kitten:</p>
  <pre><code>export declare class Text extends React.Component&lt;TextProps&gt; {
      render(): React.ReactElement&lt;RNTextProps&gt;;
  }
  export {};
  </code></pre>