Skip to content
Open
Show file tree
Hide file tree
Changes from 11 commits
Commits
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
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="512dp"
android:height="512dp"
android:viewportWidth="512"
android:viewportHeight="512">
<path
android:fillColor="#FF000000"
android:pathData="M490.13,185.47L338.97,34.3c-45.85,-45.74 -120.08,-45.74 -165.93,0L21.87,185.47C7.82,199.45 -0.05,218.46 0,238.27v221.4C0.05,488.57 23.48,511.98 52.37,512h407.25c28.9,-0.02 52.33,-23.43 52.37,-52.33V238.27C512.06,218.46 504.18,199.45 490.13,185.47zM448,448H341.33v-67.88c0,-44.98 -36.47,-81.45 -81.45,-81.45c0,0 0,0 0,0h-7.76c-44.98,0 -81.45,36.47 -81.45,81.45l0,0V448H64V238.27c0.01,-2.83 1.13,-5.54 3.12,-7.55L218.28,79.55c20.83,-20.83 54.59,-20.83 75.43,-0.01c0,0 0.01,0.01 0.01,0.01L444.89,230.72c1.99,2.01 3.11,4.72 3.12,7.55V448z"/>
</vector>
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class TabScreen(
}

// Icon
var iconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->
var drawableIconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->
if (newValue != oldValue) {
icon = getSystemDrawableResource(reactContext, newValue)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -162,12 +162,12 @@ class TabScreenViewManager :
view.tabBarItemBadgeTextColor = value
}

@ReactProp(name = "iconResourceName")
override fun setIconResourceName(
@ReactProp(name = "drawableIconResourceName")
override fun setDrawableIconResourceName(
view: TabScreen,
value: String?,
) {
view.iconResourceName = value
view.drawableIconResourceName = value
}

override fun setOrientation(
Expand All @@ -180,8 +180,8 @@ class TabScreenViewManager :
value: String?,
) = Unit

@ReactProp(name = "iconResource")
override fun setIconResource(
@ReactProp(name = "imageIconResource")
override fun setImageIconResource(
view: TabScreen,
value: ReadableMap?,
) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
case "orientation":
mViewManager.setOrientation(view, (String) value);
break;
case "iconResourceName":
mViewManager.setIconResourceName(view, value == null ? null : (String) value);
case "drawableIconResourceName":
mViewManager.setDrawableIconResourceName(view, value == null ? null : (String) value);
break;
case "iconResource":
mViewManager.setIconResource(view, (ReadableMap) value);
case "imageIconResource":
mViewManager.setImageIconResource(view, (ReadableMap) value);
break;
case "tabBarItemBadgeTextColor":
mViewManager.setTabBarItemBadgeTextColor(view, ColorPropConverter.getColor(value, view.getContext()));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ public interface RNSBottomTabsScreenManagerInterface<T extends View> {
void setTitle(T view, @Nullable String value);
void setBadgeValue(T view, @Nullable String value);
void setOrientation(T view, @Nullable String value);
void setIconResourceName(T view, @Nullable String value);
void setIconResource(T view, @Nullable ReadableMap value);
void setDrawableIconResourceName(T view, @Nullable String value);
void setImageIconResource(T view, @Nullable ReadableMap value);
void setTabBarItemBadgeTextColor(T view, @Nullable Integer value);
void setTabBarItemBadgeBackgroundColor(T view, @Nullable Integer value);
void setStandardAppearance(T view, Dynamic value);
Expand Down
20 changes: 16 additions & 4 deletions apps/src/tests/Test3115.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,15 @@ const TAB_CONFIGS: TabConfiguration[] = [
title: 'Tab 1',
freezeContents: false,
icon: {
sfSymbolName: 'sun.max',
ios: {
type: 'sfSymbolIOS',
name: 'sun.max'
},
android: {
type: 'drawableResourceAndroid',
name: 'sunny',
}
},
iconResourceName: 'sunny',
},
component: makeTab('Tab 1'),
},
Expand All @@ -61,9 +67,15 @@ const TAB_CONFIGS: TabConfiguration[] = [
tabKey: 'Tab2',
title: 'Tab 2',
icon: {
sfSymbolName: 'snow',
ios: {
type: 'sfSymbolIOS',
name: 'snow'
},
android: {
type: 'drawableResourceAndroid',
name: 'mode_cool',
}
},
iconResourceName: 'mode_cool',
},
component: makeTab('Tab 2'),
},
Expand Down
48 changes: 34 additions & 14 deletions apps/src/tests/TestBottomTabs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,19 @@ const TAB_CONFIGS: TabConfiguration[] = [
title: 'Tab1',
isFocused: true,
icon: {
sfSymbolName: 'house',
ios: {
type: 'sfSymbolIOS',
name: 'house.fill',
},
android: {
type: 'imageSource',
imageSource: require('../../../assets/variableIcons/icon_fill.png'),
}
},
selectedIcon: {
sfSymbolName: 'house.fill',
type: 'sfSymbolIOS',
name: 'house.fill',
},
// iconResourceName: 'sym_call_incoming', // Android specific
iconResource: require('../../../assets/variableIcons/icon_fill.png'),
},
component: Tab1,
},
Expand Down Expand Up @@ -96,13 +102,19 @@ const TAB_CONFIGS: TabConfiguration[] = [
},
tabBarItemBadgeBackgroundColor: Colors.GreenDark100,
icon: {
templateSource: require('../../../assets/variableIcons/icon.png'),
ios: {
type: 'templateSourceIOS',
templateSource: require('../../../assets/variableIcons/icon.png'),
},
android: {
type: 'drawableResourceAndroid',
name: 'sym_call_missed', // Android specific
}
},
selectedIcon: {
type: 'templateSourceIOS',
templateSource: require('../../../assets/variableIcons/icon_fill.png'),
},
iconResourceName: 'sym_call_missed', // Android specific
iconResource: require('../../../assets/variableIcons/icon.png'),
title: 'Tab2',
orientation: 'landscape',
},
Expand All @@ -127,13 +139,15 @@ const TAB_CONFIGS: TabConfiguration[] = [
tabBarBlurEffect: 'none',
},
icon: {
imageSource: require('../../../assets/variableIcons/icon.png'),
shared: {
type: 'imageSource',
imageSource: require('../../../assets/variableIcons/icon.png'),
}
},
selectedIcon: {
type: 'imageSource',
imageSource: require('../../../assets/variableIcons/icon_fill.png'),
},
// iconResourceName: 'sym_action_email', // Android specific
iconResource: require('../../../assets/variableIcons/icon_fill.png'),
title: 'Tab3',
// systemItem: 'search', // iOS specific
// systemItem: 'contacts', // iOS specific
Expand All @@ -146,13 +160,19 @@ const TAB_CONFIGS: TabConfiguration[] = [
tabScreenProps: {
tabKey: 'Tab4',
icon: {
sfSymbolName: 'rectangle.stack',
ios: {
type: 'sfSymbolIOS',
name: 'rectangle.stack',
},
android: {
type: 'drawableResourceAndroid',
name: 'custom_home_icon'
}
},
selectedIcon: {
sfSymbolName: 'rectangle.stack.fill',
type: 'sfSymbolIOS',
name: 'rectangle.stack.fill',
},
// iconResourceName: 'sym_action_chat', // Android specific
iconResource: require('../../../assets/svg/cart.svg'),
title: 'Tab4',
systemItem: 'search', // iOS specific
badgeValue: '123',
Expand Down
92 changes: 59 additions & 33 deletions src/components/bottom-tabs/BottomTabsScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React from 'react';
import { Freeze } from 'react-freeze';
import {
Image,
ImageResolvedAssetSource,
StyleSheet,
findNodeHandle,
processColor,
Expand All @@ -12,7 +13,7 @@ import {
} from 'react-native';
import { freezeEnabled } from '../../core';
import BottomTabsScreenNativeComponent, {
type IconType,
type NativeIconType,
type NativeProps,
type Appearance,
type ItemAppearance,
Expand All @@ -25,7 +26,9 @@ import type {
BottomTabsScreenItemStateAppearance,
BottomTabsScreenProps,
EmptyObject,
Icon,
PlatformIcon,
PlatformIconAndroid,
PlatformIconIOS,
} from './BottomTabsScreen.types';
import { bottomTabsDebugLog } from '../../private/logging';

Expand Down Expand Up @@ -55,7 +58,6 @@ function BottomTabsScreen(props: BottomTabsScreenProps) {
isFocused = false,
freezeContents,
icon,
iconResource,
selectedIcon,
standardAppearance,
scrollEdgeAppearance,
Expand Down Expand Up @@ -118,16 +120,6 @@ function BottomTabsScreen(props: BottomTabsScreenProps) {

const iconProps = parseIconsToNativeProps(icon, selectedIcon);

let parsedIconResource;
if (iconResource) {
parsedIconResource = Image.resolveAssetSource(iconResource);
if (!parsedIconResource) {
console.error(
'[RNScreens] failed to resolve an asset for bottom tab icon',
);
}
}

return (
<BottomTabsScreenNativeComponent
collapsable={false}
Expand All @@ -137,11 +129,6 @@ function BottomTabsScreen(props: BottomTabsScreenProps) {
onWillDisappear={onWillDisappearCallback}
onDidDisappear={onDidDisappearCallback}
isFocused={isFocused}
// I'm keeping undefined as a fallback if `Image.resolveAssetSource` has failed for some reason.
// It won't render any icon, but it will prevent from crashing on the native side which is expecting
// ReadableMap. Passing `iconResource` directly will result in crash, because `require` API is returning
// double as a value.
iconResource={parsedIconResource || undefined}
{...iconProps}
standardAppearance={mapAppearanceToNativeProp(standardAppearance)}
scrollEdgeAppearance={mapAppearanceToNativeProp(scrollEdgeAppearance)}
Expand Down Expand Up @@ -241,57 +228,95 @@ function shouldFreezeScreen(
return !nativeViewVisible;
}

function parseIconToNativeProps(icon: Icon | undefined): {
iconType?: IconType;
function parseAndroidIconToNativeProps(icon: PlatformIconAndroid | undefined): {
imageIconResource?: ImageResolvedAssetSource;
drawableIconResourceName?: string;
} {
if (!icon) {
return {};
}

let parsedIconResource;
if (icon.type === 'imageSource') {
parsedIconResource = Image.resolveAssetSource(icon.imageSource);
if (!parsedIconResource) {
console.error(
'[RNScreens] failed to resolve an asset for bottom tab icon',
);
}

return {
// I'm keeping undefined as a fallback if `Image.resolveAssetSource` has failed for some reason.
// It won't render any icon, but it will prevent from crashing on the native side which is expecting
// ReadableMap. Passing `iconResource` directly will result in crash, because `require` API is returning
// double as a value.
imageIconResource: parsedIconResource || undefined,
};
} else if (icon.type === 'drawableResourceAndroid') {
return {
drawableIconResourceName: icon.name,
};
} else {
throw new Error(
'[RNScreens] Incorrect icon format for Android. You must provide `imageSource` or `drawableResourceAndroid`.',
);
}
}

function parseIOSIconToNativeProps(icon: PlatformIconIOS | undefined): {
iconType?: NativeIconType;
iconImageSource?: ImageSourcePropType;
iconSfSymbolName?: string;
} {
if (!icon) {
return {};
}

if ('sfSymbolName' in icon) {
// iOS-specific: SFSymbol usage
if (icon.type === 'sfSymbolIOS') {
return {
iconType: 'sfSymbol',
iconSfSymbolName: icon.sfSymbolName,
iconSfSymbolName: icon.name,
};
} else if ('imageSource' in icon) {
} else if (icon.type === 'imageSource') {
return {
iconType: 'image',
iconImageSource: icon.imageSource,
};
} else if ('templateSource' in icon) {
// iOS-specifig: image as a template usage
} else if (icon.type === 'templateSourceIOS') {
return {
iconType: 'template',
iconImageSource: icon.templateSource,
};
} else {
// iOS-specific: SFSymbol, image as a template usage
throw new Error(
'[RNScreens] Incorrect icon format. You must provide sfSymbolName, imageSource or templateSource.',
'[RNScreens] Incorrect icon format for iOS. You must provide `sfSymbolIOS`, `imageSource` or `templateSourceIOS`.',
);
}
}

function parseIconsToNativeProps(
icon: Icon | undefined,
selectedIcon: Icon | undefined,
icon: PlatformIcon | undefined,
selectedIcon: PlatformIconIOS | undefined,
): {
iconType?: IconType;
imageIconResource?: ImageResolvedAssetSource;
drawableIconResourceName?: string;
iconType?: NativeIconType;
iconImageSource?: ImageSourcePropType;
iconSfSymbolName?: string;
selectedIconImageSource?: ImageSourcePropType;
selectedIconSfSymbolName?: string;
} {
const androidNativeProps = parseAndroidIconToNativeProps(
icon?.android || icon?.shared,
);

const { iconImageSource, iconSfSymbolName, iconType } =
parseIconToNativeProps(icon);
parseIOSIconToNativeProps(icon?.ios || icon?.shared);
const {
iconImageSource: selectedIconImageSource,
iconSfSymbolName: selectedIconSfSymbolName,
iconType: selectedIconType,
} = parseIconToNativeProps(selectedIcon);
} = parseIOSIconToNativeProps(selectedIcon);

if (
iconType !== undefined &&
Expand All @@ -307,6 +332,7 @@ function parseIconsToNativeProps(
}

return {
...androidNativeProps,
iconType,
iconImageSource,
iconSfSymbolName,
Expand Down
Loading
Loading