[MOB-11585] Migrate Example to TypeScript (#893)

Author: TheBuggedYRN

example/package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/runtime": "^7.15.4",
+    "@types/react-native-vector-icons": "^6.4.13",
     "babel-jest": "^27.2.5",
     "detox": "^19.8.4",
     "jest": "^27.2.5",

example/src/App.js renamed to example/src/App.tsx

@@ -8,9 +8,14 @@ import { createTabBarIcon } from './components/TabBarIcon';
 import { HomeScreen } from './screens/HomeScreen';
 import { SettingsScreen } from './screens/SettingsScreen';
 
-const Tab = createBottomTabNavigator();
+export type RootStackParamList = {
+  Home: undefined;
+  Settings: undefined;
+};
 
-export function App() {
+const Tab = createBottomTabNavigator<RootStackParamList>();
+
+export const App: React.FC = () => {
   useEffect(() => {
     Instabug.init({
       token: '2c63627b9923e10eee2c8abf92e6925f',
@@ -29,4 +34,4 @@ export function App() {
       </Tab.Navigator>
     </NavigationContainer>
   );
-}
+};

example/src/components/Button.js renamed to example/src/components/Button.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, TouchableOpacityProps } from 'react-native';
 
-export function Button({ children, onPress }) {
+export const Button: React.FC<TouchableOpacityProps> = ({ children, ...props }) => {
   return (
-    <TouchableOpacity style={styles.button} onPress={onPress}>
+    <TouchableOpacity style={styles.button} {...props}>
       <Text style={styles.text}>{children}</Text>
     </TouchableOpacity>
   );
-}
+};
 
 const styles = StyleSheet.create({
   text: {

example/src/components/ColorButton.js renamed to example/src/components/ColorButton.tsx

@@ -3,7 +3,13 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
 
 import Icon from 'react-native-vector-icons/Ionicons';
 
-export function ColorButton({ color, checked = false, onPress }) {
+interface ColorButtonProps {
+  checked: boolean;
+  color: string;
+  onPress: (color: string) => void;
+}
+
+export const ColorButton: React.FC<ColorButtonProps> = ({ color, checked = false, onPress }) => {
   return (
     <TouchableOpacity
       accessibilityRole="checkbox"
@@ -14,7 +20,7 @@ export function ColorButton({ color, checked = false, onPress }) {
       {checked && <Icon name="checkmark-sharp" color="white" size={30} accessible={false} />}
     </TouchableOpacity>
   );
-}
+};
 
 const styles = StyleSheet.create({
   button: {

example/src/components/Screen.js renamed to example/src/components/Screen.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 
-export function Screen({ children }) {
+export const Screen: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <View testID="welcome" style={styles.container}>
       <ScrollView contentContainerStyle={styles.contentContainer}>{children}</ScrollView>
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {

example/src/components/Section.js renamed to example/src/components/Section.tsx

@@ -1,15 +1,18 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-export function Section({ title, children }) {
+interface SectionProps extends PropsWithChildren {
+  title: string;
+}
+
+export const Section: React.FC<SectionProps> = ({ title, children }) => {
   return (
     <View style={styles.section}>
       <Text style={styles.title}>{title}</Text>
-
       {children}
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   section: {

example/src/components/TabBarIcon.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
+import type { RouteProp } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+import type { RootStackParamList } from '../App';
+
+interface TabBarIconProps {
+  route: RouteProp<RootStackParamList>;
+  focused: boolean;
+  color: string;
+  size: number;
+}
+
+export const createTabBarIcon = (
+  route: RouteProp<RootStackParamList>,
+): BottomTabNavigationOptions['tabBarIcon'] => {
+  return (props) => <TabBarIcon {...props} route={route} />;
+};
+
+export const TabBarIcon: React.FC<TabBarIconProps> = ({ route, focused, color, size }) => {
+  let name = route.name.toLowerCase();
+  if (!focused) {
+    name += '-outline';
+  }
+
+  return <Icon name={name} color={color} size={size} />;
+};

example/src/components/TabBarIcon.tsx

@@ -21,7 +21,7 @@ export function HomeScreen() {
 
   const showFeatureRequests = () => FeatureRequests.show();
 
-  const sendBugReport = () => BugReporting.show(BugReporting.reportType.bug);
+  const sendBugReport = () => BugReporting.show(BugReporting.reportType.bug, []);
 
   const sendCrashReport = () => {
     try {
@@ -37,7 +37,7 @@ export function HomeScreen() {
   const sendFeedback = () =>
     BugReporting.show(BugReporting.reportType.feedback, [BugReporting.option.emailFieldHidden]);
 
-  const startNewConversation = () => BugReporting.show(BugReporting.reportType.question);
+  const startNewConversation = () => BugReporting.show(BugReporting.reportType.question, []);
 
   const showUnreadMessagesCount = () =>
     Replies.getUnreadRepliesCount((count) => Alert.alert('Messages: ' + count));

example/src/screens/HomeScreen.js renamed to example/src/screens/HomeScreen.tsx

@@ -24,18 +24,18 @@ export function SettingsScreen() {
 
   const isLightTheme = theme === Instabug.colorTheme.light;
 
-  const toggleColorTheme = (isLight) => {
+  const toggleColorTheme = (isLight: boolean) => {
     const newTheme = isLight ? Instabug.colorTheme.light : Instabug.colorTheme.dark;
     Instabug.setColorTheme(newTheme);
     setTheme(newTheme);
   };
 
-  const setPrimaryColor = (newColor) => {
+  const setPrimaryColor = (newColor: string) => {
     Instabug.setPrimaryColor(newColor);
     setColor(newColor);
   };
 
-  const changeInvocationEvent = (invocationEvent) =>
+  const changeInvocationEvent = (invocationEvent: Instabug.invocationEvent) =>
     BugReporting.setInvocationEvents([invocationEvent]);
 
   return (