Skip to content

feat(tabs): custom drawable/symbol tab-bar icons — tinted, per-tab size, indicator sizing, iOS fallback #4209

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

Open
stachbial wants to merge 6 commits into
base: main
Choose a base branch
from
+587 −9
Open

feat(tabs): custom drawable/symbol tab-bar icons — tinted, per-tab size, indicator sizing, iOS fallback #4209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9cd91aa
feat(tabs): support custom drawable tab-bar icons on Android
stachbial Jun 24, 2026
5c2f895
refactor(tabs): move tabBarItemActiveIndicator size to standardAppear…
stachbial Jun 25, 2026
5b24016
chore: add example
stachbial Jun 25, 2026
dd39511
feat(tabs): use tinted boolean for drawable icons; add iOS custom sym…
stachbial Jun 28, 2026
77ca255
Merge remote-tracking branch 'origin/main' into @stachbial/native-tab…
stachbial Jun 30, 2026
303c590
chore: update example
stachbial Jun 30, 2026
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
32 changes: 32 additions & 0 deletions FabricExample/android/app/src/main/res/drawable/person_walking.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="12.813dp"
android:height="24dp"
android:viewportWidth="104.37"
android:viewportHeight="195.49">
<group android:translateX="0.867" android:translateY="0">
<path android:fillColor="#fcc9a7" android:pathData="M29.553,179.18 L25.603,188.67 L19.163,185.25 L23.093,175.94 L29.553,179.18 Z"/>
<path android:fillColor="#1f252a" android:pathData="M27.773,188.11 C27.773,187.54 27.283,187.17 26.793,187.38 C25.833,187.79 24.253,188.14 22.363,187.29 C20.403,186.41 20.043,184.96 20.033,184.01 C20.033,183.51 19.673,183.13 19.223,183.2 L4.853,185.27 C3.983,185.4 3.163,185.9 2.583,186.68 C2.033,187.41 2.293,188.47 3.063,188.71 L24.513,195.23 C25.353,195.49 26.273,194.88 26.523,193.9 L27.733,189.1 C27.753,189.02 27.763,188.94 27.763,188.86 L27.773,188.11 Z"/>
<path android:fillColor="#fcc9a7" android:pathData="M87.783,156.16 L96.783,161.12 L92.693,167.15 L83.863,162.23 L87.783,156.16 Z"/>
<path android:fillColor="#1f252a" android:pathData="M96.463,158.9 C95.893,158.84 95.473,159.29 95.623,159.79 C95.923,160.78 96.103,162.4 95.053,164.18 C93.963,166.03 92.483,166.24 91.533,166.13 C91.033,166.08 90.623,166.39 90.633,166.84 L91.123,181.35 C91.153,182.23 91.563,183.1 92.273,183.76 C92.933,184.38 94.023,184.25 94.343,183.5 L103.153,162.89 C103.503,162.08 102.993,161.1 102.053,160.75 L97.413,159.02 C97.333,158.99 97.253,158.97 97.173,158.96 L96.463,158.9 Z"/>
<path android:fillColor="#092330" android:pathData="M34.313,87.5 L37.783,109.76 L55.323,141.29 L85.523,167.55 L92.563,155.1 L68.613,132.76 L54.563,87.88 L34.313,87.5 Z"/>
<path android:fillColor="#0c2c40" android:pathData="M62.813,86.23 C62.813,86.23 66.303,92.83 60.883,103.37 L44.053,135.49 L31.223,184.17 L18.483,179.72 L27.633,130.49 L43.853,92.07 L34.313,87.5 L62.813,86.23 Z"/>
<path android:fillColor="#fcc9a7" android:pathData="M26.123,23.6 C28.343,26.03 32.113,26.2 34.533,23.99 C36.963,21.77 37.133,18 34.923,15.57 C32.703,13.14 28.943,12.97 26.503,15.18 C24.073,17.41 23.903,21.17 26.123,23.6 Z M21.363,26.66 L26.543,20.42 L30.673,24.57 L25.813,30.52 L21.363,26.66 Z"/>
<path android:fillColor="#1c2226" android:pathData="M33.053,12.05 L28.303,18.41 C27.683,19.24 27.703,20.39 28.353,21.19 L32.203,25.94 C33.103,27.05 34.783,27.06 35.693,25.97 L41.063,19.58 C41.803,18.7 41.763,17.4 40.973,16.56 L36.503,11.84 C35.543,10.83 33.893,10.92 33.053,12.05 Z"/>
<path android:fillColor="#f7ece7" android:pathData="M37.963,34.47 L19.133,43.92 L29.473,27.97 L22.653,22.07 L1.093,51.61 C-0.867,54.15 -0.107,57.85 2.703,59.4 C4.133,60.19 5.853,60.27 7.353,59.61 L35.273,48.52 L37.963,34.47 Z M31.223,43.54 C31.223,43.54 34.553,69.65 34.313,87.5 C34.313,87.5 44.303,91.9 65.483,85.47 L60.243,36.92 L50.043,33.49 L37.963,34.47 L31.223,43.54 Z"/>
<path android:fillColor="#fcf3f0" android:pathData="M41.383,31.93 L41.643,33.63 C41.663,33.75 41.623,33.88 41.533,33.97 L38.923,36.74 C38.683,36.99 38.263,36.85 38.223,36.51 L37.953,34.47 C37.933,34.34 37.983,34.21 38.083,34.12 L40.693,31.69 C40.943,31.47 41.343,31.6 41.383,31.93 Z"/>
<path android:fillColor="#fcc9a7" android:pathData="M44.873,36.32 C47.973,36.07 50.283,33.34 50.033,30.24 L49.283,21.16 L38.043,22.08 L40.363,34.63 C40.733,36.23 41.763,36.57 44.873,36.32 Z"/>
<path android:fillColor="#f4be9a" android:pathData="M49.663,24.34 C49.663,24.34 47.243,31.22 42.333,30.37 C37.823,29.59 38.043,22.08 38.043,22.08 L49.663,24.34 Z"/>
<path android:fillColor="#fcc9a7" android:pathData="M43.113,27.87 L44.113,27.76 C49.093,27.22 52.703,22.74 52.163,17.76 L51.553,12.08 C51.013,7.1 46.533,3.49 41.553,4.03 L40.553,4.14 C35.573,4.68 31.963,9.16 32.503,14.14 L33.113,19.82 C33.653,24.81 38.133,28.41 43.113,27.87 Z M43.113,27.87 L44.113,27.76 C49.093,27.22 52.703,22.74 52.163,17.76 L51.553,12.08 C51.013,7.1 46.533,3.49 41.553,4.03 L40.553,4.14 C35.573,4.68 31.963,9.16 32.503,14.14 L33.113,19.82 C33.653,24.81 38.133,28.41 43.113,27.87 Z"/>
<path android:fillColor="#1c2226" android:pathData="M51.963,15.96 C51.283,15.89 48.433,18.05 47.693,17.11 C46.673,15.81 45.743,13.44 47.063,10.98 C47.283,10.57 47.343,10.09 47.203,9.64 C46.943,8.83 46.243,7.89 44.313,8.57 C41.223,9.66 34.273,13.16 32.263,8.15 C29.723,1.84 49.703,3.6 49.703,3.6 L54.253,10.18 L52.303,19.56 L51.963,15.96 Z"/>
<path android:fillColor="#fcc9a7" android:pathData="M49.183,16.91 C49.373,18.69 50.973,19.98 52.753,19.78 C54.533,19.59 55.823,17.99 55.623,16.21 C55.433,14.43 53.833,13.14 52.053,13.34 C50.273,13.54 48.993,15.13 49.183,16.91 Z"/>
<path android:fillColor="#0c2c40" android:pathData="M43.853,38.25 L46.403,77.56 L41.653,82.02 L38.833,77.7 L41.653,37.47 L43.853,38.25 Z M40.053,35.54 L40.443,35 L40.343,34.53 L45.963,34.53 L46.403,36 L42.663,39.3 L40.053,35.54 Z"/>
<path android:fillColor="#fcf3f0" android:pathData="M49.673,29.71 L44.353,33.33 C43.753,33.74 43.673,34.6 44.193,35.11 L48.373,39.22 C48.843,39.68 49.613,39.66 50.053,39.16 L54.263,34.43 C54.673,33.97 54.653,33.26 54.213,32.83 L51.133,29.82 C50.743,29.45 50.133,29.4 49.673,29.71 Z"/>
<path android:fillColor="#eaddd8" android:pathData="M19.155,26.4 Q19.193,26.399 19.23,26.404 Q19.267,26.41 19.302,26.423 Q19.337,26.435 19.369,26.455 L27.329,31.255 Q27.361,31.274 27.389,31.299 Q27.417,31.324 27.439,31.354 Q27.461,31.385 27.477,31.419 Q27.493,31.452 27.502,31.489 Q27.511,31.525 27.512,31.562 Q27.514,31.6 27.509,31.637 Q27.503,31.674 27.49,31.709 Q27.478,31.744 27.458,31.776 Q27.439,31.808 27.414,31.836 Q27.389,31.864 27.358,31.886 Q27.328,31.908 27.294,31.924 Q27.261,31.94 27.224,31.949 Q27.188,31.958 27.15,31.959 Q27.113,31.961 27.076,31.956 Q27.039,31.95 27.004,31.937 Q26.969,31.925 26.937,31.905 L18.977,27.105 Q18.945,27.086 18.917,27.061 Q18.889,27.036 18.867,27.006 Q18.845,26.975 18.829,26.941 Q18.813,26.908 18.804,26.871 Q18.795,26.835 18.793,26.798 Q18.792,26.76 18.797,26.723 Q18.803,26.686 18.816,26.651 Q18.828,26.616 18.847,26.584 Q18.867,26.552 18.892,26.524 Q18.917,26.496 18.947,26.474 Q18.978,26.452 19.011,26.436 Q19.045,26.42 19.082,26.411 Q19.118,26.402 19.155,26.4 Z"/>
<path android:fillColor="#afafaf" android:pathData="M41.633,69.28 L38.843,99.11 C38.733,100.23 39.503,101.25 40.613,101.47 L74.823,108.01 C76.083,108.25 77.273,107.37 77.413,106.1 L80.543,77.75 C80.663,76.65 79.943,75.63 78.863,75.37 L44.313,67.36 C43.023,67.05 41.763,67.96 41.633,69.28 Z"/>
<path android:fillColor="#d1d1d1" android:pathData="M44.063,69.81 L41.273,99.64 C41.173,100.76 41.933,101.78 43.043,102 L77.253,108.54 C78.513,108.78 79.703,107.9 79.843,106.63 L82.973,78.28 C83.093,77.18 82.373,76.16 81.293,75.9 L46.743,67.88 C45.443,67.58 44.183,68.49 44.063,69.81 Z"/>
<path android:fillColor="#fcc9a7" android:pathData="M56.973,97.26 C54.223,94.74 49.943,94.93 47.423,97.68 C44.903,100.43 45.093,104.71 47.843,107.23 C50.593,109.75 54.873,109.56 57.393,106.81 C59.913,104.05 59.723,99.78 56.973,97.26 Z M62.043,93.32 L56.823,100.9 L51.743,96.62 L56.623,89.41 L62.043,93.32 Z"/>
<path android:fillColor="#f7ece7" android:pathData="M60.253,36.92 C60.253,36.92 67.903,37.69 70.123,50.2 L78.923,68.48 C79.163,69.28 79.323,70.1 79.403,70.92 L60.893,97.51 L52.543,92.56 L67.513,68.56 L58.423,54.17 L60.253,36.92 Z"/>
<path android:fillColor="#eaddd8" android:pathData="M55.226,88.592 Q55.263,88.588 55.301,88.592 Q55.338,88.596 55.374,88.607 Q55.41,88.618 55.442,88.635 L63.872,93.155 Q63.905,93.173 63.934,93.197 Q63.963,93.22 63.987,93.249 Q64.011,93.278 64.028,93.311 Q64.046,93.344 64.057,93.38 Q64.067,93.416 64.071,93.453 Q64.075,93.491 64.071,93.528 Q64.067,93.565 64.056,93.601 Q64.045,93.637 64.028,93.67 Q64.01,93.702 63.986,93.731 Q63.963,93.76 63.934,93.784 Q63.905,93.808 63.872,93.825 Q63.839,93.843 63.803,93.854 Q63.767,93.865 63.73,93.868 Q63.692,93.872 63.655,93.868 Q63.618,93.864 63.582,93.853 Q63.546,93.842 63.513,93.825 L55.083,89.305 Q55.05,89.287 55.021,89.263 Q54.993,89.24 54.969,89.211 Q54.945,89.182 54.928,89.149 Q54.91,89.116 54.899,89.08 Q54.888,89.044 54.885,89.007 Q54.881,88.969 54.885,88.932 Q54.889,88.895 54.899,88.859 Q54.91,88.823 54.928,88.79 Q54.946,88.757 54.97,88.729 Q54.993,88.7 55.022,88.676 Q55.051,88.652 55.084,88.635 Q55.117,88.617 55.153,88.606 Q55.189,88.595 55.226,88.592 Z M57.508,51.461 Q57.546,51.463 57.582,51.473 Q57.618,51.483 57.652,51.5 Q57.685,51.516 57.715,51.539 Q57.744,51.562 57.769,51.59 Q57.794,51.618 57.812,51.651 L63.202,61.031 Q63.221,61.063 63.233,61.099 Q63.245,61.134 63.25,61.171 Q63.255,61.208 63.252,61.246 Q63.25,61.283 63.24,61.319 Q63.23,61.355 63.213,61.389 Q63.197,61.422 63.174,61.452 Q63.151,61.482 63.123,61.506 Q63.095,61.531 63.062,61.549 Q63.03,61.568 62.994,61.58 Q62.959,61.592 62.922,61.597 Q62.885,61.602 62.847,61.599 Q62.81,61.597 62.774,61.587 Q62.738,61.577 62.704,61.56 Q62.671,61.544 62.641,61.521 Q62.611,61.498 62.587,61.47 Q62.562,61.442 62.543,61.409 L57.153,52.029 Q57.135,51.997 57.123,51.961 Q57.111,51.926 57.106,51.889 Q57.101,51.852 57.104,51.814 Q57.106,51.777 57.116,51.741 Q57.126,51.705 57.143,51.671 Q57.159,51.638 57.182,51.608 Q57.205,51.578 57.233,51.554 Q57.261,51.529 57.294,51.511 Q57.326,51.492 57.361,51.48 Q57.397,51.468 57.434,51.463 Q57.471,51.458 57.508,51.461 Z"/>
<path android:fillColor="#1c2226" android:pathData="M34.323,10.38 C30.503,8.65 31.303,4.19 32.173,2.78 C32.173,2.78 32.343,5.29 34.053,4.71 C34.053,4.71 33.823,0.97 38.833,0 C38.833,0 36.983,3.36 43.573,2.72 C51.663,1.93 52.133,7.05 51.683,13.41 L49.203,11.63 L47.283,7.2 L40.733,7.2 L34.323,10.38 Z"/>
</group>
</vector>
9 changes: 9 additions & 0 deletions FabricExample/android/app/src/main/res/drawable/swm_logo.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48.656dp"
android:height="24dp"
android:viewportWidth="222.196"
android:viewportHeight="109.6">
<group android:translateX="-3.204" android:translateY="-3.2">
<path android:fillColor="#000000" android:pathData="M225.4 3.2L225.4 87.7L28.3 87.7L28.3 3.2L225.4 3.2ZM3.299 27.322L25.3 5.321L25.3 88.579L3.204 110.675L3.299 27.322ZM96.5 24L96.5 22.5C96.5 19.9 97.4 18.3 99.9 18.4C100.8 18.4 101.7 18.5 102.5 18.8L102.5 14.6C101.6 14.4 100.6 14.2 99.5 14.2C95.1 14.2 92.3 16.9 92.3 22.3L92.3 24L89.3 24L89.3 28.2L92.3 28.2L92.3 41.8L96.6 41.8L96.6 28.2L100.4 28.2L102.4 24L96.5 24ZM111.3 35.3L111.3 28.2L117.2 28.2L117.2 24L111.3 24L111.3 18.4L107 19.5L107 24L104.4 24L104.4 28.2L107 28.2L107 35.8C107 40.1 109.4 42.2 113.3 42.2C114.9 42.2 116 41.9 117.2 41.4L117.2 37.1C116.3 37.7 115.2 38 114.1 38C112.4 38 111.3 37.2 111.3 35.3ZM56.9 42.2C61.7 42.2 63.7 39.6 63.7 36.6C63.7 33.019 60.922 31.932 58.703 31.063L58.7024 31.0628C57.2037 30.4759 55.96 29.9889 56 28.9C56 28 56.8 27.5 58.2 27.5C59.4 27.5 60.9 27.9 63 29.2L63 24.9C61.4 24 59.9 23.6 58.3 23.6C54.4 23.6 51.6 25.7 51.6 29.2C51.6 34.9 59.2 34 59.2 36.8C59.2 37.7 58.4 38.2 56.8 38.2C55.1 38.2 53.2 37.7 51.6 36.9L51.6 41.1C53.1 41.7 54.8 42.2 56.9 42.2ZM76.8 23.6C71.7 23.6 67.5 27.8 67.5 32.9C67.5 38 71.7 42.2 76.8 42.2C81.9 42.2 86.1 38 86.1 32.9C86.1 27.8 81.9 23.6 76.8 23.6ZM159.4 23.6C154.3 23.6 150.6 27.8 150.6 32.9C150.6 38 154.4 42.2 159.3 42.2C161.4 42.2 163.1 41.5 164.3 40.4L164.3 41.8L168.5 41.8L168.5 24L164.2 24L164.2 25.2C163 24.2 161.4 23.6 159.4 23.6ZM203.8 36.9C201.8 37.7 199.8 38 198.1 38C194.5 38 192.5 36.5 191.8 34.3L204.4 34.3L204.4 27.9C203.2 25.5 200.2 23.6 196.5 23.6C191 23.6 187.2 27.8 187.2 32.9C187.2 38.3 191 42.2 197.3 42.2C199.1 42.2 200.6 41.8 201.6 41.4L203.8 36.9ZM178.8 24L174.6 24L174.6 41.8L178.9 41.8L178.9 33.5C178.9 29.7 181.6 28 184.6 28.8L184.6 23.7C182.5 23.7 180.1 24.1 178.8 26.5L178.8 24ZM142.7 41.8L148.4 24L143.5 24L140.3 35.9L136.5 24L132.2 24L128.4 35.9L125.2 24L120.3 24L126 41.8L130.5 41.8L134.5 29.6L138.4 41.8L142.7 41.8ZM201.1 31L191.8 31C192.5 29 194.2 27.6 196.4 27.6C198.7 27.6 200.5 28.9 201.1 31ZM76.8 28C79.4 28 81.5 30.1 81.5 32.9C81.5 35.7 79.3 37.8 76.7 37.8C74.1 37.8 72 35.7 72 32.9C72 30.1 74.2 28 76.8 28ZM159.9 28C162.5 28 164.6 30.1 164.6 32.9C164.6 35.7 162.5 37.8 159.9 37.8C157.3 37.8 155.2 35.7 155.2 32.9C155.2 30.1 157.3 28 159.9 28ZM76.5 68.5L76.5 56.8C76.5 53.1 73.9 50.4 70.9 50.4C68.8 50.4 67 51.1 65.5 52.7C64.4 51.2 62.8 50.4 60.9 50.4C59.2 50.4 57.9 50.8 56.6 52.1L56.6 50.8L52.4 50.8L52.4 68.5L56.7 68.5L56.7 57.5C56.7 55.6 58 54.5 59.5 54.5C60.9 54.5 62.3 55.6 62.3 57.5L62.3 68.5L66.6 68.5L66.6 57.5C66.6 55.6 67.9 54.5 69.4 54.5C70.8 54.5 72.2 55.6 72.2 57.5L72.2 68.5L76.5 68.5ZM89.8 50.4C84.7 50.4 81 54.6 81 59.7C81 64.8 84.7 68.9 89.8 69C91.9 69 93.6 68.3 94.8 67.2L94.8 68.6L99 68.6L99 50.8L94.6 50.8L94.6 52C93.4 51 91.8 50.4 89.8 50.4ZM109 52.1L109 50.8L105 50.8L105 68.6L109.3 68.6L109.3 58C109.3 56.1 110.8 54.6 112.7 54.6C114.6 54.6 116.1 56.1 116.1 58L116.1 68.5L120.4 68.5L120.4 57C120.4 53.2 117.4 50.4 113.7 50.4C112 50.4 110.3 50.8 109 52.1ZM130.8 69C135.6 69 137.6 66.4 137.6 63.4C137.6 57.3 129.9 58.3 129.9 55.7C129.9 54.8 130.7 54.3 132.1 54.3C133.3 54.3 134.8 54.7 136.9 56L136.9 51.7C135.3 50.8 133.8 50.4 132.2 50.4C128.3 50.4 125.5 52.5 125.5 56C125.5 61.7 133.1 60.8 133.1 63.6C133.1 64.5 132.3 65 130.7 65C129 65 127.1 64.5 125.5 63.7L125.5 67.9C127 68.5 128.7 69 130.8 69ZM160.8 50.4C155.7 50.4 151.5 54.6 151.5 59.7C151.5 64.8 155.7 69 160.8 69C165.9 69 170.1 64.8 170.1 59.7C170.1 54.6 165.9 50.4 160.8 50.4ZM178.7 50.8L174.7 50.8L174.7 68.6L179 68.6L179 58C179 56.1 180.5 54.6 182.4 54.6C184.3 54.6 185.8 56.1 185.8 58L185.8 68.5L190.1 68.5L190.1 57C190.1 53.2 187.1 50.4 183.4 50.4C181.7 50.4 180 50.8 178.7 52.1L178.7 50.8ZM147 68.6L147 50.8L142.7 50.8L142.7 68.6L147 68.6ZM90.3 54.8C92.9 54.8 95 56.9 95 59.7C95 62.5 92.9 64.6 90.3 64.6C87.7 64.6 85.6 62.5 85.6 59.7C85.6 56.9 87.7 54.8 90.3 54.8ZM160.8 54.8C163.4 54.8 165.5 56.9 165.5 59.7C165.5 62.5 163.4 64.6 160.8 64.6C158.2 64.6 156.1 62.5 156.1 59.7C156.1 56.9 158.2 54.8 160.8 54.8ZM198.6 64.4L198.6 63.7L194.7 63.7L194.7 64.4L196.2 64.4L196.2 68.6L197 68.6L197 64.4L198.6 64.4ZM201.9 67.6L200.3 63.7L199.1 63.7L199.1 68.6L199.9 68.6L199.9 65L201.4 68.6L202.1 68.6L203.6 65L203.6 68.6L204.4 68.6L204.4 63.7L203.4 63.7L201.9 67.6ZM223.289 90.7L201.277 112.8L5.321 112.8L27.421 90.7L223.289 90.7Z"/>
</group>
</vector>
15 changes: 15 additions & 0 deletions FabricExample/ios/FabricExample/Images.xcassets/nano.swm.symbolset/Contents.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"info": {
"author": "xcode",
"version": 1
},
"properties": {
"symbol-rendering-intent": "template"
},
"symbols": [
{
"filename": "nano.swm.svg",
"idiom": "universal"
}
]
}
Loading