Tabs scrolling

[SobolRR]

Can we opportunity horizontally scroll tabs?

[powman]

Usage:

access folder node_modules/react-native-tabs/index.js and add code.

'use strict';

import React, {
Component
} from 'react';

import {
StyleSheet,
View,
Text,
ScrollView,
TouchableOpacity,
} from 'react-native';

class Tabs extends Component {
onSelect(el){
if (el.props.onSelect) {
el.props.onSelect(el);
} else if (this.props.onSelect) {
this.props.onSelect(el);
}
}

render(){
    const self = this;
    let selected = this.props.selected
    let horizontal = this.props.horizontal
    if (!selected){
        React.Children.forEach(this.props.children.filter(c=>c), el=>{
            if (!selected || el.props.initial){
                selected = el.props.name || el.key;
            }
        });
    }
    if(!horizontal){
        return (
            <View style={[styles.tabbarView, this.props.style]}>
                {React.Children.map(this.props.children.filter(c=>c),(el)=>
                    <TouchableOpacity key={el.props.name+"touch"}
                       style={[styles.iconView, this.props.iconStyle, (el.props.name || el.key) == selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]}
                       onPress={()=>!self.props.locked && self.onSelect(el)}
                       onLongPress={()=>self.onSelect(el)}
                       activeOpacity={el.props.pressOpacity}>
                         {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el}
                    </TouchableOpacity>
                )}
            </View>
        );
    }else{
        return (
            <ScrollView 
                style={[styles.tabbarViewScroll, this.props.style]}
                contentContainerStyle={{width:500}}
                horizontal={true}
                showsHorizontalScrollIndicator={false}
                >
                {React.Children.map(this.props.children.filter(c=>c),(el)=>
                    <TouchableOpacity key={el.props.name+"touch"}
                       style={[styles.iconView, this.props.iconStyle, (el.props.name || el.key) == selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]}
                       onPress={()=>!self.props.locked && self.onSelect(el)}
                       onLongPress={()=>self.onSelect(el)}
                       activeOpacity={el.props.pressOpacity}>
                         {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el}
                    </TouchableOpacity>
                )}
            </ScrollView>
        );
    }
}

}
var styles = StyleSheet.create({
tabbarView: {
position:'absolute',
bottom:0,
right:0,
left:0,
height:50,
opacity:1,
backgroundColor:'transparent',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
tabbarViewScroll: {
position:'absolute',
bottom:0,
right:0,
left:0,
height:50,
opacity:1,
backgroundColor:'transparent',
flexDirection: 'row',
},
iconView: {
flex: 1,
height: 50,
justifyContent: 'center',
alignItems: 'center',
}
});

module.exports = Tabs;

[powman]

Param in tab horizontal={true}

[rajscet]

love you thanks