Skip to content

Commit 719ef9b

Browse files
committed
Document using xcasset in header items for native stack
1 parent 1e17d1c commit 719ef9b

2 files changed

Lines changed: 76 additions & 30 deletions

File tree

versioned_docs/version-7.x/native-stack-navigator.md

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1563,24 +1563,47 @@ Common properties:
15631563
- `color` (of type `ColorValue`)
15641564
- `icon`: Optional icon to show instead of the label.
15651565
1566-
The icon can be an image:
1566+
The icon can be of following types:
1567+
- Local image
15671568
1568-
```js
1569-
{
1570-
type: 'image',
1571-
source: require('./path/to/image.png'),
1572-
tinted: true, // Whether to apply tint color to the icon. Defaults to true.
1573-
}
1574-
```
1569+
```js
1570+
{
1571+
type: 'image',
1572+
source: require('./path/to/image.png'),
1573+
}
1574+
```
15751575
1576-
Or a [SF Symbols](https://developer.apple.com/sf-symbols/) name:
1576+
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.
15771577
1578-
```js
1579-
{
1580-
type: 'sfSymbol',
1581-
name: 'heart',
1582-
}
1583-
```
1578+
It also supports [xcasset](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project):
1579+
1580+
```js
1581+
tabBarIcon: {
1582+
type: 'image',
1583+
source: { uri: 'icon_name' },
1584+
}
1585+
```
1586+
1587+
A `tinted` property can be used to control whether the icon should be tinted with the active/inactive color:
1588+
1589+
```js
1590+
tabBarIcon: {
1591+
type: 'image',
1592+
source: require('./path/to/icon.png'),
1593+
tinted: false,
1594+
}
1595+
```
1596+
1597+
Set `tinted` to `false` if the image has its own colors that you want to preserve.
1598+
1599+
- [SF Symbols](https://developer.apple.com/sf-symbols/) name
1600+
1601+
```js
1602+
{
1603+
type: 'sfSymbol',
1604+
name: 'heart',
1605+
}
1606+
```
15841607
15851608
- `variant`: Visual variant of the button. Supported values:
15861609
- `plain` (default)

versioned_docs/version-8.x/native-stack-navigator.md

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1610,24 +1610,47 @@ Common properties:
16101610
- `color`
16111611
- `icon`: Optional icon to show instead of the label.
16121612
1613-
The icon can be an image:
1613+
The icon can be of following types:
1614+
- Local image
16141615
1615-
```js
1616-
{
1617-
type: 'image',
1618-
source: require('./path/to/image.png'),
1619-
tinted: true, // Whether to apply tint color to the icon. Defaults to true.
1620-
}
1621-
```
1616+
```js
1617+
tabBarIcon: {
1618+
type: 'image',
1619+
source: require('./path/to/icon.png'),
1620+
}
1621+
```
16221622
1623-
Or a [SF Symbols](https://developer.apple.com/sf-symbols/) name:
1623+
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.
16241624
1625-
```js
1626-
{
1627-
type: 'sfSymbol',
1628-
name: 'heart',
1629-
}
1630-
```
1625+
It also supports [xcasset](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project):
1626+
1627+
```js
1628+
tabBarIcon: {
1629+
type: 'image',
1630+
source: { uri: 'icon_name' },
1631+
}
1632+
```
1633+
1634+
A `tinted` property can be used to control whether the icon should be tinted with the active/inactive color:
1635+
1636+
```js
1637+
tabBarIcon: {
1638+
type: 'image',
1639+
source: require('./path/to/icon.png'),
1640+
tinted: false,
1641+
}
1642+
```
1643+
1644+
Set `tinted` to `false` if the image has its own colors that you want to preserve.
1645+
1646+
- [SF Symbols](https://developer.apple.com/sf-symbols/) name
1647+
1648+
```js
1649+
{
1650+
type: 'sfSymbol',
1651+
name: 'heart',
1652+
}
1653+
```
16311654
16321655
- `variant`: Visual variant of the button. Supported values:
16331656
- `plain` (default)

0 commit comments

Comments
 (0)