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.

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

initialPage, goToTab, onTabClick not working properly in version 5.0.0 #1225

Open
helloimfrog opened this issue Mar 31, 2022 · 2 comments
Open
Labels

Comments

@helloimfrog
Copy link

I've just installed version 5.0.0.

  • initialPage not working: I have 3 tab in a screen, I set initialPage={1}, then goBack and navigate to that screen again, tab content stay in first page, only tab indicator has changed to second page.
  • I'm using renderTabBar to custom the tab bar, and have tabProps.activeTab === i like what I read in document to highlight my custom tab indicator. This is my code:
<Tabs
        tabs={tabs}
        initialPage={1}
        style={{ flex: 1 }}
        styles={{ topTabBarSplitLine: { borderBottomWidth: 0 } }}
        renderTabBar={tabProps => {
          return (
            <View style={styles.screenTabsIndicatorWrapper}>
              {
                tabProps.tabs.map((item, i) =>
                  <TouchableOpacity
                    style={[styles.screenTabsIndicator, { backgroundColor: tabProps.activeTab === i ? Colors.white : Colors.whiteOpacity50 }]}
                    onPress={() => {
                      const { goToTab, onTabClick } = tabProps;
                      onTabClick && onTabClick(item, i);
                      goToTab && goToTab(index);
                    }}
                    hitSlop={{ top: 10, bottom: 10 }}
                    activeOpacity={1}
                  />
                )
              }
            </View>
          )
        }}
      >
        {/* My tabs stay here */}
      </Tabs>

Seems tabProps.activeTab hasn't being updated, so when I click my custom tab bar item, my backgroundColor isn't have any change.
I've to rollback to 4.2.0

@1uokun
Copy link
Collaborator

1uokun commented Mar 31, 2022

What's your platform, and can you show us package.json?

Does Carousel works well?😳

@helloimfrog
Copy link
Author

helloimfrog commented Mar 31, 2022

@1uokun Here is my package.json

{
  "name": "...",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@ant-design/icons-react-native": "^2.3.2",
    "@ant-design/react-native": "4.2.0", //Rolled back to 4.2.0
    "@react-native-async-storage/async-storage": "^1.17.2",
    "@react-native-community/cameraroll": "^4.1.2",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/slider": "^4.2.1",
    "@react-native-picker/picker": "^2.4.0",
    "@react-native-segmented-control/segmented-control": "^2.4.0",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/drawer": "^6.3.3",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.2",
    "@react-navigation/stack": "^6.1.1",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "axios": "0.21.1",
    "expo": "^44.0.6",
    "expo-localization": "^12.0.1",
    "i18n-js": "^3.9.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
    "qs": "^6.10.3",
    "react": "17.0.2",
    "react-native": "0.67.3",
    "react-native-event-bus": "^1.0.0",
    "react-native-fast-image": "^8.5.11",
    "react-native-gesture-handler": "^2.3.2",
    "react-native-image-crop-picker": "^0.37.3",
    "react-native-image-picker": "^4.7.3",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-modalbox": "^2.0.2",
    "react-native-page-control": "^1.1.2",
    "react-native-pager-view": "^5.4.15",
    "react-native-reanimated": "2.4.1",
    "react-native-root-toast": "^3.3.0",
    "react-native-safe-area-context": "^4.2.4",
    "react-native-screens": "^3.13.1",
    "react-native-spinkit": "^1.5.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-tags": "^2.2.1",
    "react-native-track-player": "^2.1.3",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-saga": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/runtime": "^7.17.8",
    "@react-native-community/eslint-config": "^3.0.1",
    "@types/i18n-js": "^3.8.2",
    "@types/jest": "^27.4.1",
    "@types/lodash": "^4.14.181",
    "@types/qs": "^6.9.7",
    "@types/react": "^17",
    "@types/react-native": "^0.67.3",
    "@types/react-native-modalbox": "^1.4.10",
    "@types/react-native-tags": "^2.2.1",
    "@types/react-test-renderer": "^17.0.1",
    "@typescript-eslint/eslint-plugin": "^5.17.0",
    "@typescript-eslint/parser": "^5.17.0",
    "babel-jest": "^27.5.1",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^8.12.0",
    "jest": "^27.5.1",
    "metro-react-native-babel-preset": "^0.70.0",
    "react-test-renderer": "17.0.2",
    "typescript": "^4.6.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

Tested in Android.
Have't tested Carosuel yet

@1uokun 1uokun added the Android label Jul 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants