feat: Add icons packages for android/ios and consume them in the tab bar

[dwgray]

This PR adds react-native-vector-icons to to the object-detection sample and uses them in the tab bar.
I've only explicitly included the ionic icon set, which is the one that the sample used and one that I have a little familiarity with, but it should be simple enough to swap that out or add others.

The main thing I'm unsure of in this PR is how I am rendering the tab bar. The sample from react-navigation was in javascript and possibly not "correct" even then since they embedded the tab bar in the settings options, which generated linting errors.

I've extracted the code into a function component and got the types all agreeing. Several questions:

• Am I going down the right path here?
• What's a good name for this functional component? I am not particularly happy with RenderTabBarIcon, but naming is hard
• Where is our line for extracting components to files? Should RenderTabBarIcon be in its own file - my leaning would be yes, but most of the react samples I've been seeing cram a bunch of stuff into one file (and this is a sample).
• I used React.FC for typing since that's what @cdiddy77 suggested elsewhere, but it sounds like this is somewhat controversial in the React community.
• If we are using React.FC in general, should we explicitly type the App FC?

[cdiddy77]

Myself personally I probably would have just inclined the <Ionicon ... /> but having and extra component seems ok. 'Render' is redundant and if you are making something a component, then whe. You call it, the preferred syntax is <RenderTabBarIcon ...

[dwgray]

Sorry @cdiddy77 - when you get a chance would you mind taking a look at https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md - there appears to be an issue with nesting "unstable" components, which is what led me down the path I took. For instance, if I called my component with the <> syntax, it still through the error even though I pulled out the component. I think I may mean that I'm working around the linter warning without fixing the underlying issue.

If I change the code to:

      <Tab.Navigator
        initialRouteName="CameraStream"
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => (
            <TabBarIcon focused={focused} color={color} size={size} route={route} />
          ),
          tabBarActiveTintColor: "tomato",
          tabBarInactiveTintColor: "gray",
        })}
      >

I get the same linter warning.

I think the issue here is that my components are rendered every time the tree is rebuilt, while optimally we'd like them to be re-rendered only if the route parameter changes. But memoization, which I think should be the answer to this problem is discouraged by the above. (This SO answer may be relevant)[https://stackoverflow.com/a/72589674/2197085] - it talks about a way to apply memoization correctly, but I can't see how to do that since hooks have to be declared at the top of the component and the thing I want to memorize it the route parameter that is being passed to the screenOptions lambda function.