Skip to content

Commit 1e17d1c

Browse files
committed
Remove mention of unsupported resource type for tabBarIcon
1 parent 89b678f commit 1e17d1c

1 file changed

Lines changed: 15 additions & 13 deletions

File tree

versioned_docs/version-7.x/native-bottom-tab-navigator.md

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -197,33 +197,35 @@ The icon can be of following types:
197197
}
198198
```
199199

200-
On iOS, you can additionally pass a `tinted` property to control whether the icon should be tinted with the active/inactive color:
200+
It's necessary to provide icons for multiple screen densities (1x, 2x, 3x), e.g.: `icon.png`, `icon@2x.png`, `icon@3x.png` etc. as icons are not scaled automatically on iOS.
201+
202+
It also supports [drawable resource](https://developer.android.com/guide/topics/resources/drawable-resource) on Android, [xcasset](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project) on iOS:
201203

202204
```js
203205
tabBarIcon: {
204206
type: 'image',
205-
source: require('./path/to/icon.png'),
206-
tinted: false,
207+
source: { uri: 'icon_name' },
207208
}
208209
```
209210

210-
The image is tinted by default.
211-
212-
- [SF Symbols](https://developer.apple.com/sf-symbols/) name - Supported on iOS
211+
A `tinted` property can be used to control whether the icon should be tinted with the active/inactive color:
213212

214213
```js
215214
tabBarIcon: {
216-
type: 'sfSymbol',
217-
name: 'heart',
215+
type: 'image',
216+
source: require('./path/to/icon.png'),
217+
tinted: false,
218218
}
219219
```
220220

221-
- Resource name - [Drawable resource](https://developer.android.com/guide/topics/resources/drawable-resource) on Android, [xcasset](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project) on iOS.
221+
The image is tinted by default. Set `tinted` to `false` if the image has its own colors that you want to preserve on iOS. On Android, the image is always tinted and the `tinted` property is ignored.
222+
223+
- [SF Symbols](https://developer.apple.com/sf-symbols/) name - Supported on iOS
222224

223225
```js
224226
tabBarIcon: {
225-
type: 'resource',
226-
name: 'sunny',
227+
type: 'sfSymbol',
228+
name: 'heart',
227229
}
228230
```
229231

@@ -249,8 +251,8 @@ tabBarIcon: Platform.select({
249251
name: 'heart',
250252
},
251253
android: {
252-
type: 'resource',
253-
name: 'heart_icon',
254+
type: 'image',
255+
source: require('./path/to/icon.png'),
254256
},
255257
});
256258
```

0 commit comments

Comments
 (0)