fix: typescript

Author: lukewalczak

docs/src/components/ScreenshotTabs.tsx

@@ -21,7 +21,7 @@ const ScreenshotTabs: React.FC<ScreenshotTabsProps> = ({
   screenshotData,
   baseUrl,
 }) => {
-  const renderScreenhot = (src: string): JSX.Element => (
+  const renderScreenhot = (src: string): React.JSX.Element => (
     <img src={`${baseUrl}${src}`} className={getClassName(src)} />
   );
 

docs/src/components/ThemeColorsTable.tsx

@@ -13,11 +13,14 @@ import {
   getUniqueNestedKeys,
 } from '../utils/themeColors';
 
-const getTableHeader = (keys: string[]): JSX.Element[] => {
+const getTableHeader = (keys: string[]): React.JSX.Element[] => {
   return keys.map((key) => <th key={key}>{key}</th>);
 };
 
-const getTableCell = (keys: string[], modes: DataObject): JSX.Element[] => {
+const getTableCell = (
+  keys: string[],
+  modes: DataObject
+): React.JSX.Element[] => {
   return keys.map((key) => {
     const value = modes[key];
     if (typeof value === 'string') {
@@ -33,7 +36,7 @@ const FlatTable = ({
 }: {
   themeColorsData: DataObject;
   uniqueKeys: string[];
-}): JSX.Element => {
+}): React.JSX.Element => {
   const rows = Object.keys(themeColorsData).map((mode) => {
     return (
       <tr key={`${mode}`}>
@@ -68,7 +71,7 @@ const TabbedTable = ({
 }: {
   themeColorsData: DataObject;
   uniqueKeys: string[];
-}): JSX.Element => {
+}): React.JSX.Element => {
   const tabTableContent = Object.keys(themeColorsData).map((key) => {
     const modes = themeColorsData[key] as DataObject;
     const rows = Object.keys(modes).map((mode) => {
@@ -111,7 +114,7 @@ const ThemeColorsTable = ({
 }: {
   themeColorsData: DataObject;
   componentName: string;
-}): JSX.Element | null => {
+}): React.JSX.Element | null => {
   const uniqueKeys = getUniqueNestedKeys(themeColorsData);
   const nestingLevel = getMaxNestedLevel(themeColorsData);
   const isFlatTable = nestingLevel === 1;

src/components/BottomNavigation/BottomNavigationRouteScreen.tsx

@@ -7,7 +7,7 @@ interface Props extends ViewProps {
 }
 
 class BottomNavigationRouteScreen extends React.Component<Props> {
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     const { style, index, children, visibility, ...rest } = this.props;
 
     // On Web, the unfocused tab screens can still be clicked since they are transparent, but still there

src/components/Typography/AnimatedText.tsx

@@ -102,6 +102,6 @@ const styles = StyleSheet.create({
 });
 
 export const customAnimatedText = <T,>() =>
-  AnimatedText as (props: Props<T>) => JSX.Element;
+  AnimatedText as (props: Props<T>) => React.JSX.Element;
 
 export default AnimatedText;

src/components/Typography/Text.tsx

@@ -177,7 +177,7 @@ const styles = StyleSheet.create({
 
 type TextComponent<T> = (
   props: Props<T> & { ref?: React.RefObject<TextRef> }
-) => JSX.Element;
+) => React.JSX.Element;
 
 const Component = forwardRef(Text) as TextComponent<never>;