iroachie / react-native-material-tabs Goto Github PK

Hello, in my Android project its working perfectly, but on iOS the user needs to touch below the tab title to change tab, i think the touchable area of the tab is very small on iOS and i don't know why. Is there any style that i can customize to achieve a better touch experience?

I am trying to eliminate a bug that is causing my React Native 0.53.3 application to crash after it opens the splash screen.

Environment:
  OS: macOS High Sierra 10.13.6
  Node: 11.10.1
  Yarn: 1.10.1
  npm: 6.7.0
  Watchman: 4.7.0
  Xcode: Xcode 10.1 Build version 10B61
  Android Studio: 3.4 AI-183.5429.30.34.5452501

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.53.3 => 0.53.3

From the MacOS console I was able to obtain this error message:

Unhandled JS Exception: Cannot create styled-component for component: [object Object]

The only place in this application where styled-component is being utilized is here package-lock.json:

"styled-components": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-2.4.1.tgz",
      "integrity": "sha1-ZjvQSF1LarRvlGIQ3APSOY0a3nQ=",
      "requires": {
        "buffer": "^5.0.3",
        "css-to-react-native": "^2.0.3",
        "fbjs": "^0.8.9",
        "hoist-non-react-statics": "^1.2.0",
        "is-plain-object": "^2.0.1",
        "prop-types": "^15.5.4",
        "stylis": "^3.4.0",
        "supports-color": "^3.2.3"
      },

and here:

"react-native-material-tabs": {
      "version": "3.5.0",
      "resolved": "https://registry.npmjs.org/react-native-material-tabs/-/react-native-material-tabs-3.5.0.tgz",
      "integrity": "sha512-OSni2m2rcxiIYd082fjjroRrU8o/8pZlP3Ok/m244Gl9vUmhyj5WVeTgSYODjmHksQ9IIF2/sZurZcy3DawF7A==",
      "requires": {
        "prop-types": "^15.5.10",
        "styled-components": "^2.3.0"
      }
    },

It seems that it could be a dependency of react-native-material-tabs? That is the only library that is actually being used, specifically, MaterialTabs:

import MaterialTabs from 'react-native-material-tabs';

And implemented here:

render() {
    return (
      <View style={styles.container}>
        {Platform.OS === 'android' && (
          <MaterialTabs
            uppercase={false}
            items={this.props.tabNames}
            selectedIndex={this.state.selectedIndex}
            onChange={this._selectTab}
            barColor={v2Colors.charcoalDark}
            indicatorColor={v2Colors.green}
            activeTextColor={v2Colors.white}
            inactiveTextColor={v2Colors.gray}
            textStyle={{
              fontSize: moderateScale(14, 0.2),
              ...v2Fonts.GothamRegular,
            }}
          />
        )}
        {Platform.OS === 'ios' && (
          <View style={styles.iOSTabsWrapper}>
            {this.props.tabNames.map((tabName, index) => {
              const tabWrapperStyles = [styles.tabWrapper];
              const tabTextStyles = [styles.tabText];
              if (index === 0) {
                tabWrapperStyles.push(styles.tabWrapperFirst);
              } else if (index === this.props.tabNames.length - 1) {
                tabWrapperStyles.push(styles.tabWrapperLast);
              }

The app crashes so there is no console logging I can do as far as I know. I am honestly not sure if I am on the right track. Has anyone had this issue before? Or can you suggest a way to debug if the problem is indeed with the props inside of MaterialTabs being that I don't have access to console due to the app just crashing natively.

You can download a copy of the app here to reproduce:
https://www.dropbox.com/s/ygyrhnno8aou4jg/RNsampleApp.zip?dl=0

As a developer who wants to add or remove tabs dynamically the tabs will not resize themselves when a tab is removed or added resulting in an unresponsive experience.

Hi, this looks exactly what I've been looking for! Curious about the indicator restricted to content. Is this supported? I haven't seen a prop for this.

If not, do you have any recommendations for mimicking that behavior with your library?

target behavior/look:

Sorry if I'm wrong, but I think this warning happens in this library. It popped up after upgrading from 2.1.0 to 3.0.1.

ExceptionsManager.js:71 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Styled(undefined)`.
    in Touchable (created by Styled(undefined))
    in Styled(undefined) (at Tab.js:28)
    in Tab (at MaterialTabs.js:153)
    in RCTView (at View.js:127)
    in View (created by Styled(View))
    in Styled(View) (at MaterialTabs.js:151)
    in RCTScrollContentView (at ScrollView.js:649)
    in RCTScrollView (at ScrollView.js:734)
    in ScrollView (at MaterialTabs.js:145)
    in RCTView (at View.js:127)
    in View (created by Styled(View))
    in Styled(View) (at MaterialTabs.js:141)
    in MaterialTabs (at CalculationModeTabs.js:15)
    [...]

I found an issue in the styled-components repository, so maybe this can be fixed by a version upgrade: styled-components/styled-components#766

Is there a way to allow the content when scrollable be dynamic so that way the text determines the size?

the animation for selecting in RTL doesn't support
the indicator doesn't show in the second and the third tabs
this is the first tab

but when I choose the next one the indicator doesn't show

Is that possible to display the initial tab on screen when the number of tabs are more than fitting in to screen width?
I have 10 tabs and if the initial tab index is greater than 2 it doesn't bring it to the screen and need to scroll to see the selected one.

I would like the bar to be slightly positioned lower since I wrapped the component in a view to add a thing border bottom border.

Sorry for another request - Component has been fantastic otherwise.

I noticed that 12px horizontal padding is applied to all tabs. I would like to override this, or maybe all other tabStyles. Is this something you have considered?

It's great if anyone please provide some example of this plugin implementation.

I'm facing this error.

My code:

<MaterialTabs
                items={
                    [
                        <FontAwesome name={"home"} size={24} style={[styles.icons, { color: "#fff" }]}/>, 
                        <Icon name={"search"} size={24} style={[styles.icons, { color: "#fff" }]}/>, 
                        <Icon name={"genero"} size={24} style={[styles.icons, { color: "#fff" }]}/>, 
                        <Icon name={"minhas_musicas"} size={24} style={[styles.icons, { color: "#fff" }]}/>
                    ]
                }
                selectedIndex={this.state.selectedTab}
                onChange={this.setTab}
                barColor="#222"
                indicatorColor="#ff2a00"
                activeTextColor="#fff"
            />

Any help?

Can you add the allowFontScaling prop so we can enable or disable. If there are 3 tabs at size 15px for each tab and if you have your font Scaled to Max on iOS it breaks the layout/view.

Hello,

I am using the Material tab for my project and here I found unexpected behavior of a tab when I select on any of the tabs also when screen load it will scroll to the last index of a tab when scrollable property is true It automatically the last index. here is a video of it so you could get a proper idea about it.
kindly revert me, please.

here is the code that I have used.

<MaterialTabs
items={this.state.dashboard.map(item => Strings.t(item.id))}
selectedIndex={this.state.selectedTab}
uppercase={false}
barColor={Colors.brand_white}
barHeight={46}
scrollable={true}
activeTextColor={Colors.text_dark}
indicatorColor={Colors.brand_main}
inactiveTextColor={Colors.text_light}
textStyle={styles.tabText}
onChange={this.onChangeTab}
/>

For your information, this code looks great when changing LTR language (iOS).

Screen Recording 2020-03-11 at 3.50.51 PM.mov.zip

Hey there
How Can I render a simple view for each of the tabs?

Hello iRoachie
new update is so much better than previous,Thanks.
There is 2 issue that annoys.
1.selecting Tabs just by touching the Text of it. It's better to be selected also by touching the Tabs. cause some Tab'texts are too short to be selected easily.
2.If phone's language is RTL, animation for selecting that is used doesn't support.

I have an interesting use case that requires MaterialTabs to be rendered within a drop down menu. For some reason on iOS, the menu does not appear until some sort of input is focused, wether that be a checkbox, datepicker etc.

This issue does not appear on Android though, so it's got me scratching my head. Does anyone have any thoughts?

I've made a snack to show an example of the use case & issue.

https://snack.expo.io/@remoradev/09c4ea

Video Example

uppercase='false' is not working. Also tried with uppercase=false, but it returned an error.

The number of my Tabs is received from Server (I mean It's variable) and It could be 10 Tabs or more in the same place, so that my categories are shown badly. How can I remove this amount that's divided by Tabs' number and also have a horizontal scroll to show my Tabs in their own size(my Tabs move by pushing to left or right)??

Is there any way to show Tabs' content from Top to the Bottom and under each other(I mean when u reach at the last content of one Tab, if u keep on pushing to the Top the contents of next tab is shown )?
Thank u for previous update and for everything :)

The scrollable flag just makes tabs scrollable but not the views. Is there any way I can change the current view on the basis of user gesture?

Hi,

if I use this component there is nothing my screen. When i put two text components before and after MaterialTabs the text components are just next to each other without tabs in between.

On ExpoSnack the Component is working, but on my own machine it is not.

Tested with and without expo eject.
Expo Version on DevMachine: 2.15.4
Tried Linux and Windows

Greetings
Michael

Was wondering if this was something that has been considered - passing in a custom style similar to how you can pass in a different colour for the activeTextColor.

Right now all text styles are the same, but I would like the active tab to be bolded, as an example.

I notice quite some lag with this component (when it animates), is there any chance to get some performance boost somehow?

How to change color of unselected tab text?

for newer versions of RN this package will need to be updated at some point.

Hi,

first of all, thanks for the library! I wondered about the bouncing tab indicator when switching tabs… I never saw material tabs like that.

According to the design guidelines the animation shouldn't bounce. It would be great if there would be an option (for backwards-compatibility) to disable the bouncy behaviour to adhere the specs.

https://material.io/guidelines/components/tabs.html#tabs-specs

material.io animation specs:

react-native-material-tabs for comparison:

The indicator does not change when the selectedIndex is changed. The onChange event is fired with the correct tab index, but the indicator does not move. I've chased it down to this hook not re-running since selectedIndex isn't in the dependencies list.

  useEffect(() => {
    bar.current &&
      bar.current.measure((_, b, width) => {
        getTabWidth(width);
      });

    selectTab();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [items, barWidth]);

Adding selectedIndex to the dependencies list fixes the issue. Might be better to just turn the selectTab function into an effect with selectedIndex as a dependency and remove it from the above hook so that the bar measurement doesn't have to re-run when the index changes. Happy to make a PR if needed.

Currently all text is uppercased would be nice to have this as a option.

Hi!
I am using your library in my Expo app.
Recently I upgraded to Expo SDK 49 which among other things upgraded my react-native-reanimated to ~3.3.0
I am now getting a warning when using the MaterialTabs component, saying:

 WARN  It looks like you might be using shared value's .value inside reanimated inline style. If you want a component to update when shared value changes you should use the shared value directly instead of its current state represented by `.value`. See documentation here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/animations#animations-in-inline-styles 
    at Indicator (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:311211:19)
    at RCTScrollContentView
    at RCTScrollView
    at ScrollView (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:66218:36)
    at ScrollView
    at RCTView
    at View (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:64061:43)
    at StyledNativeComponent (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:308152:21)
    at Styled(View)
    at MaterialTabs (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:302271:21)

If I comment out the MaterialTabs tag the warning disappears.
P.S I am using the MaterialTabs component inside a @gorhom/bottom-sheet component, just mentioning in case it is related.
Would love your help, thanks in advance :)

Hey Thank you very much for the library.

I have a question . Would be glad if you could help me.

I want to make the width of the tabs as much as the items header length.

Is that possible?

Can I link swipable tab content with this tab bar?

How can I scroll automatically to tab position when change selected tab?