Skip to content
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

fix: fix crash when change tab bar label during runtime #250

Merged
merged 3 commits into from
Jan 21, 2025
Merged

fix: fix crash when change tab bar label during runtime #250

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e59a50f
fix: fix crash when change tab bar label during runtime
owinter86 Jan 21, 2025
a753761
Apply suggestions from code review
okwasniewski Jan 21, 2025
c3b1bae
docs: add changesets
okwasniewski Jan 21, 2025
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
4 changes: 4 additions & 0 deletions apps/example/src/Examples/NativeBottomTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { Contacts } from '../Screens/Contacts';
import { Chat } from '../Screens/Chat';
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
import { Platform } from 'react-native';
import { useState } from 'react';

const Tab = createNativeBottomTabNavigator();

function NativeBottomTabs() {
const [label, setLabel] = useState('Article');
return (
<Tab.Navigator
initialRouteName="Chat"
Expand Down Expand Up @@ -40,11 +42,13 @@ function NativeBottomTabs() {
console.log(
`${Platform.OS}: Long press detected on tab with key ${data.target} at the screen level.`
);
setLabel("CHANGED")
okwasniewski marked this conversation as resolved.
Show resolved Hide resolved
},
}}
options={{
tabBarButtonTestID: 'articleTestID',
tabBarBadge: '10',
tabBarLabel: label,
tabBarIcon: ({ focused }) =>
focused
? require('../../assets/icons/person_dark.png')
Expand Down
18 changes: 13 additions & 5 deletions packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {
LayoutParams.WRAP_CONTENT
))


okwasniewski marked this conversation as resolved.
Show resolved Hide resolved
post {
addOnLayoutChangeListener { _, left, top, right, bottom,
_, _, _, _ ->
Expand Down Expand Up @@ -197,16 +198,17 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {
}

private fun onTabSelected(item: MenuItem) {
val selectedItem = items.first { it.title == item.title }
val selectedItem = items[item.itemId]
selectedItem.let {
onTabSelectedListener?.invoke(selectedItem.key)
emitHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)
}

okwasniewski marked this conversation as resolved.
Show resolved Hide resolved
}

private fun onTabLongPressed(item: MenuItem) {
val longPressedItem = items.firstOrNull { it.title == item.title }
longPressedItem?.let {
val longPressedItem = items[item.itemId]
longPressedItem.let {
onTabLongPressedListener?.invoke(longPressedItem.key)
emitHapticFeedback(HapticFeedbackConstants.LONG_PRESS)
}
Expand All @@ -220,6 +222,10 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {
this.items = items
items.forEachIndexed { index, item ->
val menuItem = getOrCreateItem(index, item.title)
if (item.title !== menuItem.title) {
menuItem.title = item.title
}

menuItem.isVisible = !item.hidden
if (iconSources.containsKey(index)) {
getDrawable(iconSources[index]!!) {
Expand Down Expand Up @@ -370,7 +376,7 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {

private fun updateTextAppearance() {
if (fontSize != null || fontFamily != null || fontWeight != null) {
val menuView = getChildAt(0) as? ViewGroup ?: return
val menuView = bottomNavigation.getChildAt(0) as? ViewGroup ?: return
val size = fontSize?.toFloat()?.takeIf { it > 0 } ?: 12f
val typeface = ReactFontManager.getInstance().getTypeface(
fontFamily ?: "",
Expand Down Expand Up @@ -403,7 +409,9 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {

private fun updateTintColors(item: MenuItem? = null) {
// First let's check current item color.
val currentItemTintColor = items.find { it.title == item?.title }?.activeTintColor
val currentItemTintColor = item?.itemId?.let { itemId ->
items[itemId].activeTintColor
}

// getDefaultColor will always return a valid color but to satisfy the compiler we need to check for null
val colorPrimary = currentItemTintColor ?: activeTintColor ?: Utils.getDefaultColorFor(
Expand Down
Loading