Skip to content

Commit 770a69d

Browse files
committed
docs: update icon examples to match codebase patterns
Updated web platform support guide to reflect actual icon handling patterns used in the example app: - Show Platform.OS conditional for iOS SF Symbols vs Android/web PNG assets - Use require() for PNG/SVG files instead of icon component libraries - Add focused/unfocused icon pattern example - Remove icon library examples in favor of image asset approach - Demonstrate cross-platform pattern that works on iOS, Android, and web This matches the patterns in apps/example/src/Examples/ directory. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 4694e14 commit 770a69d

File tree

1 file changed

+49
-18
lines changed

1 file changed

+49
-18
lines changed

docs/docs/docs/guides/web-platform-support.md

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ src/
1919

2020
```tsx title="TabNavigator.native.tsx"
2121
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
22+
import { Platform } from 'react-native';
2223
import { HomeScreen } from '../screens/HomeScreen';
2324
import { SettingsScreen } from '../screens/SettingsScreen';
2425

@@ -31,14 +32,20 @@ export function TabNavigator() {
3132
name="Home"
3233
component={HomeScreen}
3334
options={{
34-
tabBarIcon: () => ({ sfSymbol: 'house' }),
35+
tabBarIcon: () =>
36+
Platform.OS === 'ios'
37+
? { sfSymbol: 'house' }
38+
: require('../assets/icons/home.png'),
3539
}}
3640
/>
3741
<Tabs.Screen
3842
name="Settings"
3943
component={SettingsScreen}
4044
options={{
41-
tabBarIcon: () => ({ sfSymbol: 'gear' }),
45+
tabBarIcon: () =>
46+
Platform.OS === 'ios'
47+
? { sfSymbol: 'gear' }
48+
: require('../assets/icons/settings.png'),
4249
}}
4350
/>
4451
</Tabs.Navigator>
@@ -48,7 +55,7 @@ export function TabNavigator() {
4855

4956
### Web Implementation
5057

51-
For web, use `@react-navigation/bottom-tabs` which provides a JavaScript-based implementation:
58+
For web, install `@react-navigation/bottom-tabs` which provides a JavaScript-based implementation:
5259

5360
```bash
5461
npm install @react-navigation/bottom-tabs
@@ -68,18 +75,14 @@ export function TabNavigator() {
6875
name="Home"
6976
component={HomeScreen}
7077
options={{
71-
tabBarIcon: ({ color, size }) => (
72-
<Icon name="home" size={size} color={color} />
73-
),
78+
tabBarIcon: () => require('../assets/icons/home.png'),
7479
}}
7580
/>
7681
<Tab.Screen
7782
name="Settings"
7883
component={SettingsScreen}
7984
options={{
80-
tabBarIcon: ({ color, size }) => (
81-
<Icon name="settings" size={size} color={color} />
82-
),
85+
tabBarIcon: () => require('../assets/icons/settings.png'),
8386
}}
8487
/>
8588
</Tab.Navigator>
@@ -106,27 +109,55 @@ export default function App() {
106109

107110
## Icon Support
108111

109-
On web, you cannot use SF Symbols. Instead, use cross-platform icon libraries:
112+
Icons can be provided using different methods depending on your platform:
110113

111-
**Expo Vector Icons** (recommended):
114+
### SF Symbols (iOS only)
112115

113116
```tsx
114-
import { Ionicons } from '@expo/vector-icons';
117+
options={{
118+
tabBarIcon: () => ({ sfSymbol: 'house' }),
119+
}}
120+
```
121+
122+
### Image Assets (PNG/SVG)
123+
124+
Use `require()` for PNG or SVG files. This works on iOS, Android, and web:
125+
126+
```tsx
127+
options={{
128+
tabBarIcon: () => require('../assets/icons/home.png'),
129+
}}
130+
```
115131

132+
```tsx
116133
options={{
117-
tabBarIcon: ({ color, size }) => (
118-
<Ionicons name="home" size={size} color={color} />
119-
),
134+
tabBarIcon: () => require('../assets/icons/home.svg'),
120135
}}
121136
```
122137

123-
**React Icons:**
138+
### Cross-Platform Pattern
139+
140+
For a single codebase supporting iOS, Android, and web, use Platform-specific conditionals:
124141

125142
```tsx
126-
import { FiHome } from 'react-icons/fi';
143+
import { Platform } from 'react-native';
127144

128145
options={{
129-
tabBarIcon: ({ color }) => <FiHome color={color} />,
146+
tabBarIcon: () =>
147+
Platform.OS === 'ios'
148+
? { sfSymbol: 'house' }
149+
: require('../assets/icons/home.png'),
150+
}}
151+
```
152+
153+
### Focused/Unfocused Icons
154+
155+
```tsx
156+
options={{
157+
tabBarIcon: ({ focused }) =>
158+
focused
159+
? require('../assets/icons/home-filled.png')
160+
: require('../assets/icons/home-outline.png'),
130161
}}
131162
```
132163

0 commit comments

Comments
 (0)