Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Apr 25, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f5221a
feat: add icons to tab bar
dwgray Apr 23, 2024
0ea7e41
feat: icons on ios
dwgray Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions examples/objectdetection/android/app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,3 +117,8 @@ dependencies {
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
rootProject.ext.vectoricons = [
iconFontNames: [ 'Ionicons.ttf' ]
]

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
8 changes: 8 additions & 0 deletions examples/objectdetection/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1136,6 +1136,10 @@ PODS:
- glog
- RCT-Folly (= 2022.05.16.00)
- React-Core
- RNVectorIcons (10.0.3):
- glog
- RCT-Folly (= 2022.05.16.00)
- React-Core
- SocketRocket (0.6.1)
- VisionCamera (3.9.2):
- React
Expand Down Expand Up @@ -1222,6 +1226,7 @@ DEPENDENCIES:
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- ReactNativeMediaPipe (from `../../..`)
- RNScreens (from `../node_modules/react-native-screens`)
- RNVectorIcons (from `../node_modules/react-native-vector-icons`)
- VisionCamera (from `../node_modules/react-native-vision-camera`)
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)

Expand Down Expand Up @@ -1349,6 +1354,8 @@ EXTERNAL SOURCES:
:path: "../../.."
RNScreens:
:path: "../node_modules/react-native-screens"
RNVectorIcons:
:path: "../node_modules/react-native-vector-icons"
VisionCamera:
:path: "../node_modules/react-native-vision-camera"
Yoga:
Expand Down Expand Up @@ -1421,6 +1428,7 @@ SPEC CHECKSUMS:
ReactCommon: 2aa35648354bd4c4665b9a5084a7d37097b89c10
ReactNativeMediaPipe: 92850eb7623b4bb0d6e8fe90c5e5781b42ccba00
RNScreens: b6b64d956af3715adbfe84808694ae82d3fec74f
RNVectorIcons: 73ab573085f65a572d3b6233e68996d4707fd505
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
VisionCamera: 6c8ca7d04fc62fafccd8f8ad584e96f5303671f5
Yoga: 805bf71192903b20fc14babe48080582fee65a80
Expand Down
4 changes: 4 additions & 0 deletions examples/objectdetection/ios/objectdetection/Info.plist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>UIAppFonts</key>
<array>
<string>Ionicons.ttf</string>
</array>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
Expand Down
2 changes: 2 additions & 0 deletions examples/objectdetection/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"@shopify/react-native-skia": "^1.0.5",
"@types/react-native-vector-icons": "^6.4.18",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.30.1",
"react-native-vector-icons": "^10.0.3",
"react-native-vision-camera": "^3.9.2",
"react-native-worklets-core": "^0.4.0"
},
Expand Down
41 changes: 39 additions & 2 deletions examples/objectdetection/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,53 @@ import * as React from "react";
import { CameraStream } from "./CameraStream";
import { Photo } from "./Photo";
import { Settings } from "./Settings";
import { NavigationContainer } from "@react-navigation/native";
import { NavigationContainer, type RouteProp } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { type RootTabParamList } from "./navigation";
import Ionicons from "react-native-vector-icons/Ionicons";

const Tab = createBottomTabNavigator<RootTabParamList>();

type TabBarIconProps = {
focused: boolean;
color: string;
size: number;
route: RouteProp<RootTabParamList, keyof RootTabParamList>;
};

const RenderTabBarIcon: React.FC<TabBarIconProps> = ({
focused,
color,
size,
route,
}) => {
let iconName;

if (route.name === "CameraStream") {
iconName = focused ? "camera" : "camera-outline";
} else if (route.name === "Photo") {
iconName = focused ? "document" : "document-outline";
} else {
// if (route.name === "Settings")
iconName = focused ? "cog" : "cog-outline";
}

return <Ionicons name={iconName} size={size} color={color} />;
};

function App() {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="CameraStream">
<Tab.Navigator
initialRouteName="CameraStream"
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
return RenderTabBarIcon({ focused, color, size, route });
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ...

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

},
tabBarActiveTintColor: "tomato",
tabBarInactiveTintColor: "gray",
})}
>
<Tab.Screen
name="CameraStream"
component={CameraStream}
Expand Down
38 changes: 37 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5873,6 +5873,25 @@ __metadata:
languageName: node
linkType: hard

"@types/react-native-vector-icons@npm:^6.4.18":
version: 6.4.18
resolution: "@types/react-native-vector-icons@npm:6.4.18"
dependencies:
"@types/react": "*"
"@types/react-native": ^0.70
checksum: 1ef458cb5e7a37f41eb400e3153940b1b152e4df76a7c06c7a47c712dbfe46e14b9999f04dde1bd074f338f850e161c6c925174ddea33386b74f8112c940065b
languageName: node
linkType: hard

"@types/react-native@npm:^0.70":
version: 0.70.19
resolution: "@types/react-native@npm:0.70.19"
dependencies:
"@types/react": "*"
checksum: 79b504fa56340631079e7c20ea0d9412ec14147b76d0ce189f4403936f529ef1e6fd031383afab117846c5ae039123bcf3afc948bae4432269c6780282726f71
languageName: node
linkType: hard

"@types/react-router-config@npm:*, @types/react-router-config@npm:^5.0.7":
version: 5.0.11
resolution: "@types/react-router-config@npm:5.0.11"
Expand Down Expand Up @@ -15873,6 +15892,7 @@ __metadata:
"@react-navigation/native": ^6.1.17
"@shopify/react-native-skia": ^1.0.5
"@types/react": ^18.2.6
"@types/react-native-vector-icons": ^6.4.18
"@types/react-test-renderer": ^18.0.0
babel-jest: ^29.6.3
babel-plugin-module-resolver: ^5.0.0
Expand All @@ -15883,6 +15903,7 @@ __metadata:
react-native: 0.73.6
react-native-safe-area-context: ^4.9.0
react-native-screens: ^3.30.1
react-native-vector-icons: ^10.0.3
react-native-vision-camera: ^3.9.2
react-native-worklets-core: ^0.4.0
react-test-renderer: 18.2.0
Expand Down Expand Up @@ -17614,6 +17635,21 @@ __metadata:
languageName: node
linkType: hard

"react-native-vector-icons@npm:^10.0.3":
version: 10.0.3
resolution: "react-native-vector-icons@npm:10.0.3"
dependencies:
prop-types: ^15.7.2
yargs: ^16.1.1
bin:
fa-upgrade.sh: bin/fa-upgrade.sh
fa5-upgrade: bin/fa5-upgrade.sh
fa6-upgrade: bin/fa6-upgrade.sh
generate-icon: bin/generate-icon.js
checksum: 77f22804b0217b4b21e8f4baaee6d33d09429bf55a31e07347fb5ab0af395b0d9adc0cbc3abd46f689ccaf07b953dc909eba95213bce7e03b562801fe4fd0768
languageName: node
linkType: hard

"react-native-vision-camera@npm:3.9.2":
version: 3.9.2
resolution: "react-native-vision-camera@npm:3.9.2"
Expand Down Expand Up @@ -21372,7 +21408,7 @@ __metadata:
languageName: node
linkType: hard

"yargs@npm:^16.2.0":
"yargs@npm:^16.1.1, yargs@npm:^16.2.0":
version: 16.2.0
resolution: "yargs@npm:16.2.0"
dependencies:
Expand Down
Loading