React-native-router-flux: How to implement react-native-scrollable-tab-view?

[faceyspacey]

I'm looking to idiomatically support:

https://github.com/brentvatne/react-native-scrollable-tab-view

Is that something natural to do and what are some tips for how to go about it?

[behl1]

+1

[aksonov]

You might implement something like TabBar, which iterates for children and passes them to react-native-tabs. Your ScrollableTabView will iterate over inner Routes, create components and pass them to scrollable-tab-view. Let me know if you will have any problems with it.

Feel free to submit it as PR for this component.

[aksonov]

It is quite easy now with 3.0 release (custom renderer, check TabBar sources), closing this ticket, feel free to submit PR

[cancan101]

Any example of how to do this? It looks like Tabs from react-native-tabs and TabBar from react-native-router-flux expect to just be the tab bar and not the content pane whereas react-native-scrollable-tab-view expects to also manage the content pane (i.e. the various tabs are children components of the ScrollableTabView.

[cancan101]

This looks like a good start:

class ScrollableTabContainer extends Component {
  render(){
    const state = this.props.navigationState;
    return (
      <ScrollableTabView >
        {
          state.children.map(el =>{
            return (
              <DefaultRenderer navigationState={el}  key={el.key} {...el} tabLabel={el.title} />
            );
          })
        }
      </ScrollableTabView>
    );
  }
}

[sarovin]

@cancan101 Can you show your Router??
I have a set it as follows:

             <Scene
                key="search"
                type="replace"
                component={ScrollableTabContainer}
                title={'Search'}
              >
                <Scene
                  key="tab_1"
                  component={tab_1}
                  title="tab_1"
                  initial={true}
                />
                <Scene
                  key="tab_2"
                  component={tab_2}
                  title="tab_2"
                />
              </Scene>

but i have this error:

Objects are not valid as a React child (found: object with keys {dispatch, key, name, sceneKey, 
parent, type, component, title, initial, index}). If you meant to render a collection of children, 
use an array instead or wrap the object using createFragment(object) from the React add-ons. 
Check the render method of `ScrollableTabView`.

[sarovin]

Not considered the previous comment. I have fix it.
But i have another problem.

I have create this ScrollableTabView as cancan101:

import React, {
  Component,
} from 'react';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import { DefaultRenderer } from 'react-native-router-flux';
import TabBar from './TabBar';

class ScrollableTab extends Component {
  render(){
    const state = this.props.navigationState;

    return (
      <ScrollableTabView renderTabBar={() => <TabBar />} >
        {
          state.children.map(el => {
            return (
              <DefaultRenderer navigationState={el}  key={el.key} {...el} tabLabel={el.title} />
            );
          })
        }
      </ScrollableTabView>
    );
  }
}

export default ScrollableTab;

and this TabBar:

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated,
  Component
} from 'react-native';

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },
  tabs: {
    marginBottom: 70,
    top: 64,
    height: 45,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomColor: 'rgba(0,0,0,0.05)',
  },
  tabUnderlineStyle: {
    position: 'absolute',
    height: 3,
    backgroundColor: '#3b5998',
    bottom: 0,
  },
});

const propTypes = {
  goToPage: React.PropTypes.func,
  activeTab: React.PropTypes.number,
  tabs: React.PropTypes.array,
};

class TabBar extends Component {

  render() {
    return (
      <View style={styles.tabs} >
        {this.props.tabs.map((tab, i) => {
          return (
            <TouchableOpacity style={styles.tab} key={tab} onPress={() => this.props.goToPage(i)} >
              <Text>
                {tab}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}

TabBar.propTypes = propTypes;

export default TabBar;

The result is this:

Why it duplicates the NavBar? Any suggestions?

[ruskid]

Can someone post final working solution with scrollable-tab-view?

[juanpujol]

Did somebody figured this out? Thanks.

[ruskid]

I implemented it, but still some things didn't work quite well. For example "clone" in scene and I decided to stick to react-native-tabs. The code above works.

[jsdario]

Have any updates this past month?

[longfay]

lol really looking forward to the solution.

[afilp]

@sarovin I have the same error that you seemed to have fixed: "Objects are not valid as a React child"

See here:
https://github.com/aksonov/react-native-router-flux/issues/1589

Would you like to tell us how you fixed it? I am simply using the example code of this package for the Scenes.

[samernady]

any complete example or working solution on this?