ptomasroos / react-native-scrollable-tab-view Goto Github PK

I have the SliderIOS included in one of my views, and dragging the slider fires the scrollable tab view, making it impossible to move the slider handle.

I'm using a CustomTabBar but it appears properties of objects passed to the precomputeStyle function all return undefined when I upgraded to RN 0.12. Passing same object directly to setNativeProps seems to work but then the tabs do not change when tapped.

I am trying to use a onPress from within a tab to switch tabs. Do you happen to know how I might access goToPage() in ScrollableTabView from within a tab? Is that the right function?

Thank you in advance!

'Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).'

and it's blank, even when using given example. Running on 0.8.

Code:
<ScrollableTabView renderTabBar={() => <VenueTab />}>...</ScrollableTabView />

I want to put the tab in the bottom what should I do, if i modify your code.
thanks.

as the title ,

we can not use onChange Method to process huge logic , for example fetch data,

then when we add a method called afterChange,and put it after Animated action

here are my code

       'use strict';

      var React = require('react-native');
      var {
        Dimensions,
        Text,
        View,
        TouchableOpacity,
        PanResponder,
        Animated,
      } = React;

      var DefaultTabBar = require('./DefaultTabBar');
      var deviceWidth = Dimensions.get('window').width;

      var TimerMixin = require('react-timer-mixin');
      var ScrollableTabView = React.createClass({
        getDefaultProps() {
          return {
            edgeHitWidth: 30,
          }
        },

        mixins: [TimerMixin],
        getInitialState() {
          return { currentPage: 0, scrollValue: new Animated.Value(0) };
        },

        componentWillMount() {
          var release = (e, gestureState) => {
            var relativeGestureDistance = gestureState.dx / deviceWidth,
                lastPageIndex = this.props.children.length - 1,
                vx = gestureState.vx,
                newPage = this.state.currentPage;

            if (relativeGestureDistance < -0.5 || (relativeGestureDistance < 0 && vx <= 0.5)) {
              newPage = newPage + 1;
            } else if (relativeGestureDistance > 0.5 || (relativeGestureDistance > 0 && vx >= 0.5)) {
              newPage = newPage - 1;
            }

            this.props.hasTouch && this.props.hasTouch(false);
            this.goToPage(Math.max(0, Math.min(newPage, this.props.children.length - 1)));
          }

          this._panResponder = PanResponder.create({
            // Claim responder if it's a horizontal pan
            onMoveShouldSetPanResponder: (e, gestureState) => {
              if (Math.abs(gestureState.dx) > Math.abs(gestureState.dy)) {
                if ((gestureState.moveX <= this.props.edgeHitWidth ||
                    gestureState.moveX >= deviceWidth - this.props.edgeHitWidth) &&
                      this.props.locked !== true) {
                  this.props.hasTouch && this.props.hasTouch(true);
                  return true;
                }
              }
            },

            // Touch is released, scroll to the one that you're closest to
            onPanResponderRelease: release,
            onPanResponderTerminate: release,

            // Dragging, move the view with the touch
            onPanResponderMove: (e, gestureState) => {
              var dx = gestureState.dx;
              var lastPageIndex = this.props.children.length - 1;

              // This is awkward because when we are scrolling we are offsetting the underlying view
              // to the left (-x)
              var offsetX = dx - (this.state.currentPage * deviceWidth);
              this.state.scrollValue.setValue(-1 * offsetX / deviceWidth);
            },
          });
        },

        goToPage(pageNumber) {
          this.props.onChangeTab && this.props.onChangeTab({
            i: pageNumber, ref: this.props.children[pageNumber]
          });

          this.setState({
            currentPage: pageNumber
          });

          Animated.spring(this.state.scrollValue, {toValue: pageNumber, friction: 10, tension: 50}).start();

          if (this.props.afterChanged) {
              this.setTimeout(()=> {
                  this.props.afterChanged({
                      i: pageNumber, ref: this.props.children[pageNumber]
                  })
              },200);   
          }
        },

        renderTabBar(props) {
          if (this.props.renderTabBar === false) {
            return null;
          } else if (this.props.renderTabBar) {
            return React.cloneElement(this.props.renderTabBar(), props);
          } else {
            return <DefaultTabBar {...props} />;
          }
        },

        render() {
          var sceneContainerStyle = {
            width: deviceWidth * this.props.children.length,
            flex: 1,
            flexDirection: 'row'
          };

          var translateX = this.state.scrollValue.interpolate({
            inputRange: [0, 1], outputRange: [0, -deviceWidth]
          });

          return (
            <View style={{flex: 1}}>
              {this.renderTabBar({goToPage: this.goToPage,
                                  tabs: this.props.children.map((child) => child.props.tabLabel),
                                  activeTab: this.state.currentPage,
                                  scrollValue: this.state.scrollValue})}

              <Animated.View style={[sceneContainerStyle, {transform: [{translateX}]}]}
                {...this._panResponder.panHandlers}>
                {this.props.children}
              </Animated.View>
            </View>
          );
        }
      });

      module.exports = ScrollableTabView;

Just want to customize the padding, backgroundColor and border. Just putting and styling tab and tabs doesn't seems to work. Or it can be only achieved through customBar ?

I have 3 tabs. When I open a modal I can still scroll between them. Clicking on items doesn't work (thankfully).

Receiving this error. Also:

<unknown>
DefaultTabBar.js:12

Digging around but I'm not quite sure what needs to change o_O

Hey mate, first off, this is a beautiful module, well done!
I have some prev/next buttons that I want to control the active tab.

I put the following function on the ScrollableTabView
onChangeTab={(obj) => {this.setState({ day: obj.i })}}
then in my prev button callback, I update the view
this.refs.dayScroller.goToPage(this.state.day - 1)

This causes the horizontal swipe to be a little laggy. If I take out the onChangeTab callback, smooth again.

I am using a version of the CustomTabBar from the main example. Is there some way I can retrieve the activeTab from the dayScroller or tabBar refs?
This way, in my prev button callback, I would be able to update the view with
this.refs.dayScroller.goToPage(this.refs.dayScroller.activeTab - 1)

Hi anyone using react-native-router?

I tried to go to different route from the tabbed view and noticed that the animation is quite laggy. Anyone else facing this too?

The props for spring tension, friction and clamp are being ignored.
In the goToPage method friction and tension are passed hard coded to Animated.spring

Also I think you are not using rebound anymore, instead Animated.spring which only supports friction and tension if I am not mistaken. This also means rebound could be removed as a dependency and the clampSpring prop should be removed from the Readme.

If you want I can submit a PR - just let me know if I am talking BS above ;-)

I am using scrollable-tab-view with 3 children. Each child is a ListView

  <ScrollableTabView edgeHitWidth="200">

      <View tabLabel="TabOne" style={styles.container}>
        <TabOneListView />
      </View>
      <View tabLabel="TabTwo" style={styles.container}>
        <TabTwoListView />
      </View>
      <View tabLabel="TabThree" style={styles.container}>
        <TabTwoListView />
      </View>

  </ScrollableTabView>

On TabOne, I click on my list item, the click event is handled, it opens a new page, it's all ok.
When I click on an item on TabTwo, it HANDLES CLICK EVENTS FROM TAB ONE ...
I can scroll properly in TabTwo, but when I click an item, it's as if it is clicking on TabOne.

Please, can anyone try replicate this issue?

There is no problem with iOS.

I can replicate this on any Android 5.0 device. No problem with iOS or Android 4.4.

I have my Inside a Navigator. I am passing the navigator to one the tabs with <Tab rootNavigator={rootNavigator}> ... </Tab>. Then I try to call rootNavigator.push from TabOne, but there is a 1 second delay before the view starts to change. This is not a onPress problem.

Inside TabOne.js

<TouchableOpacity onPress={this.openArticleView}>
    <Text> Open Article View </Text>
</TouchableOpacity>
...
openArticleView: function(){
    this.props.rootNavigator.push({
      id: 'ArticleView',
      name: 'name',
    });
}

The screen freezes for 1 second before navigator.push starts to take effect.

The tab doesn't seems to style and nor the swipable. It does able to tab on each and tabbed move

Hi.
First of all, an awesome work.

I was wondering if you have considered using a specific width set in the component instead of using the deviceWidth?
This way the component could be used in some places that not respect the full device width

Regards

Hey first of all great repo!

I am facing an issue integrating the FacebookTabBar example. I get the error "icon.setNativeProps is not a function " in the function

setAnimationValue(value) {
var currentPage = this.props.activeTab;

this.unselectedTabIcons.forEach((icon, i) => {
  if (value - i >= 0 && value - i <= 1) {
    icon.setNativeProps({opacity: value - i});
  }
  if (i - value >= 0 &&  i - value <= 1) {
    icon.setNativeProps({opacity: i - value});
  }
});

},

Also, if I do a console.log(icon), it says icon is not defined
I had no problem integrating the CustomTabBar code. Thanks again!

In landscape mode has children still the same width and tab at left side is partially displayed too.

https://github.com/brentvatne/react-native-scrollable-tab-view/blob/master/index.js#L34

The velocityX should be negative, because otherwise it matches velocities in the wrong direction.

It should read:

if (relativeGestureDistance < -0.5 || (relativeGestureDistance < 0 && vx <= -0.5)) {

I want to put the tab in the LEFT what should I do, if i modify your code.
thanks.

I'm experiencing this issue...
I'm also using CustomTabBar as provided by you in the README.md. When someone goes to a tab it doesn't hide the other tabs, do I have to change anything in the CustomTabBar Code ?

var CustomTabBar = React.createClass({
  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array
  },

  renderTabOption(name, page) {
    var isTabActive = this.props.activeTab === page;

    return (
      <TouchableOpacity key={name} onPress={() => this.props.goToPage(page)}>
        <View style={[styles.tab]}>
          <Text style={{color: isTabActive ? 'green' : 'grey', fontWeight: isTabActive ? 'bold' : 'normal'}}>{name}</Text>
        </View>
      </TouchableOpacity>
    );
  },

  setAnimationValue(value) {
    this.refs[TAB_UNDERLINE_REF].setNativeProps(precomputeStyle({
      left: (deviceWidth * value) / this.props.tabs.length
    }));
  },

  render() {
    var numberOfTabs = this.props.tabs.length;
    var tabUnderlineStyle = {
      position: 'absolute',
      width: deviceWidth / numberOfTabs,
      height: 4,
      backgroundColor: 'green',
      bottom: 0,
    };

    return (
      <View style={styles.tabs}>
        {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
        <View style={tabUnderlineStyle} ref={TAB_UNDERLINE_REF} />
      </View>
    );
  },
});

react-native: 0.7.1
react-native-scrollable-tab-view: 0.1.7 ( because only this version works with react-native 0.7.1 )

Hi! I've been playing around with spring tension and friction, but how do I adjust the overall speed at which the transition takes place?

Thanks again for all of your work on this plugin!

Hello, thank you for this module I really like it.

I want to load the data of a page only when it becomes active.
I'm a little noob with react still so I don't know if this is easy or not to implement, but is there a way to know when a page changes?

Thank you.

When implementing this with a navigation bar, the tab bar get's rendering behind the navigation bar.

render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: 'Mine Rabatter',
          component: Main,
        }}
      />
    );
  }

There is a example in below

<ScrollableTabView edgeHitWidth={deviceWidth / 2}>
  <View tabLabel="Only me">...</View>
</ScrollableTabView>

Hi,

Since the 0.9, I got this when running the App:

Unable to resolve module precomputeStyle from /App/node_modules/react-native-scrollable-tab-view/index.js
Unable to resolve module precomputeStyle from /App/node_modules/react-native-scrollable-tab-view/DefaultTabBar.js

Many plugins make similar errors.
The project still compiles though.

I have 3 tabs, all of them ListView. If I try to switch tab while scrolling, I'll have a very laggy animation, up to the point where it crashes. This has been tested and reproduced on an iPhone 6 & iPhone 5.

Any idea? Should we delegate a stopScroll when switching tab?

Thanks

Is there any way by which we can change the current tab we are viewing to the index one we want through code without clicking ?
like:
setTabView function or so ?

Hey there, i am trying to use the basic implementations in my Android App, but i am keep getting these errors...

npm manager:

Unable to resolve module precomputeStyle from ProjectPath.../node_modules/react-native-scrollable-tab-view/index.js
Unable to resolve module precomputeStyle from ProjectPath.../node_modules/react-native-scrollable-tab-view/DefaultTabBar.js

I found this issue, I'm running react-native 0.8.0. My app runs in development and the packager throws that error. When I set the app for production mode (minifying the js and running it inside the app) it crashes.

I've been having hard time trying to get ListView's section header to stick to the bottom of Facebook TabBar, its default is to stick to the top of the screen. When I scroll, the section header slides under the tab-bar. Any thoughts on this? Anything I should change in FacebookTabBar.js to make this work?

Without tab bar at the top.

With tab bar at the top. (Strange how GIF version doesn't show the full video properly, just imagine that the list is scrolled a lot and the section header slides under the tab bar).

my rn is "^0.13.2"
when l run

the Latest release maybe delete precomputeStyle module
facebook/react-native#3760

TextInput in the Search component does not work (second child)..It does not trigger any input or keyboard.. (ANDROID)
if I swap the children ..Search will work, but Home won't.
The first child component always work, so for this case the Home component works fine.

example :

     return (
     <ScrollableTabView >
         <Home key="Home"   />
         <Search key="Search"   />
     </ScrollableTabView>
     )

Search - render

    var info = _.map(this.state.filtered, (data) => {
        return (
         <TouchableHighlight  underlayColor='#dddddd' onPress={this._viewDetails.bind(this, lead)}>
             <View style={styles.row}>
                 <View>
                     <View>
                         <Text style={styles.details} >{data.firstname +  ' ' + data.lastname}</Text>
                         <Text style={styles.company}>{data.company}</Text>
                     </View>
                 </View>
                 <Icon name='angle-right' size={20} style={styles.image} />
             </View>
         </TouchableHighlight>
        );


    return (
     <ScrollView>
         <TextInput style={styles.searchInput}
                    onChangeText={this._search.bind(this)} placeholder='search'/>
         <View style={styles.container}>
             {info}
         </View>
     </ScrollView>
    );
}

DOES ANYONE KNOW IF THERE IS SOMETHING MISSING HERE ?

For some reason, the styles on the CustomTabBar break when upgrading form 0.8.0 to 0.9.0. It has to do with the flex not taking up equal space. I've just double checked, because I know it sounds weird, but the only thing changed is the version of RN.

See screenshots:

0.9.0

0.8.0, with equal spacing

Any idea?

Any enlightenment ? I could have a few dozen tabs. How to render efficiently or do some sort of recycling ?

when I simply use this function, the error occurs

setAnimationValue(value) {
    this.refs[TAB_UNDERLINE_REF].setNativeProps(precomputeStyle({
        left: (deviceWidth * value) / this.props.tabs.length
    }));
},

👍 Thanks for awesome job，I use this component for my first-try on RN：

https://github.com/qddegtya/A-ReactNative-TesterHome

Here's the confusing problem:

There are three ListView Children mounted on ScrollTabView with a customRenderTabBar.
By Default,the customRenderTabBar will on top of those ListView.
So, when i scroll to Bottom of the ListView, i find out that the ListView has been 'truncated'.
After thinking about this condition, i tried this:

var sceneContainerStyle = {
      width: deviceWidth * this.props.children.length,
      flex: 1,
      flexDirection: 'row'
      paddingBottom: 113 /*I add the paddingBottom style.*/
    };

Then I fix the problem.

Here's my source code:

'use strict';

var React = require('react-native');
var TopicCard = require('./a-TopicCard');
var apilist = require('../apilist');
var ScrollableTabView = require('react-native-scrollable-tab-view');
var TopicTabBar = require('./a-TopicTabBar');

var {
  StyleSheet,
  Text,
  View,
  TabBarIOS,
  NavigatorIOS,
  ScrollView
} = React;

var TopicPage = React.createClass({

  _renderSlidesContent(slides) {
     return slides.map((obj) => {
       return (
         <View tabLabel={obj.tabLable} style={{ flex: 1 }}>
         {/* This is a ListView component */}
          <TopicCard
            resourceApi={obj.api}
            currentReqName={obj.apiName}
          />
        </View>
       )
     });
  },

  render: function() {
    return (
      <ScrollableTabView
        renderTabBar={() => <TopicTabBar />}
        sceneContainerStyle={{ paddingBottom: 113 }}
       >

       {this._renderSlidesContent(this.props.needSlideContents)}
      </ScrollableTabView>
    );
  },
});

module.exports = TopicPage;

So, I'm thinking: Is it necessary to make a chance to set sceneContainerStyle？
Or........Is there any better solution to fix my problem?

<View style={Object.assign(sceneContainerStyle, this.props.sceneContainerStyle)} {...this._panResponder.panHandlers}
              ref={view => { this.scrollView = view; }}>
          {this.props.children}
</View>

News




Friends

            </ScrollableTabView>

Hi,

I didn't see anybody reporting this issue so here it is: I tried the basic usage example that works perfectly fine... Except if the inside text is too long to hold in a section.
Here's what it gives:

When the code is simply:

render() {
     return (
        <View style={styles.container2}>
            <ScrollableTabView>
                <Homepage tabLabel="React" />
                <Profile tabLabel="Flow" />
                <Settings tabLabel="Jest" />
            </ScrollableTabView>
        </View>
    );
}

With the Homepage component being defined as follows:

class Homepage extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome! This is the Homepage. And some more ligns just to check everything's fine.
                </Text>
            </View>
        );
    }
}

It used to automatically wrap in the Navigator. For info here's styles.container:

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
},

This is not really an issue as much as an inquiry - are you able to place the tab view in the middle of the screen? Much like we see below:

Currently I have this:

If I try to tap on blank space area around the text label of each tab it doesn't work. It work only when it get pressed exactly on the text.

In RN 0.13, facebook removed precomputeStyle,you should remove precomputeStyle and replace all codes
like

this.scrollView.setNativeProps(precomputeStyle{
          transform: [{translateX: -1 * offsetX}],
        });

by

this.scrollView.setNativeProps({style:{
          transform: [{translateX: -1 * offsetX}],
        }});

Just started to get this when i run into the examples directory examples/FacebookTabsExample and trying to install the required version of the module.

FacebookTabsExample genie$ npm install
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm info preinstall [email protected]
npm info package.json [email protected] No license field.
npm info package.json [email protected] No license field.
npm info build /Users/genie/myfile/xcode/react-native-scrollable-tab-view/examples/FacebookTabsExample
npm info linkStuff [email protected]
npm info build /Users/genie/myfile/xcode/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/react-native-icons
npm info preinstall [email protected]
npm info linkStuff [email protected]
npm info install [email protected]
npm info postinstall [email protected]
npm info install [email protected]
npm info postinstall [email protected]
npm info prepublish [email protected]
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm  v2.11.3
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package react-native does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-native@>=0.8.0 || 0.8.0-rc
npm ERR! peerinvalid Peer [email protected] wants react-native@^0.5.0

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/genie/myfile/xcode/react-native-scrollable-tab-view/examples/FacebookTabsExample/npm-debug.log

This is the content of package.json

{
  "name": "FacebookTabsExample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh"
  },
  "dependencies": {
    "react-native": "^0.5.0",
    "react-native-icons": "0.0.9",
    "react-native-scrollable-tab-view": "^0.1.4"
  }
}

Thanks for all the awesome libraries!

npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "[email protected]"
npm ERR! node v0.12.7
npm ERR! npm v2.12.1
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package react-native does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-native@^0.5.0
npm ERR! peerinvalid Peer [email protected] wants react-native@>=0.8.0 || 0.8.0-rc

Hey there. I am trying to use your Component, unfortunately i get this error, and i am not sure how to solve this... Anyone with same issues?

Best Regards

In FacebookTabBar.js, it looks like setAnimationValue is not calculating the icon opacity correctly.

Initial app launch.

After selecting the 5th icon.

I am using this plugin https://github.com/rt2zz/react-native-drawer . I was happy with both of the plugin only till I find that how scroll-tab work by hiding it self on the left.

So the problem happen when I open drawer I see that my hidden scrolled tab are over the drawer.

Is there any suggestion how I can force this scroll-tab to be under or force the drawer to be always on top ?