Tabs scrolling

[SobolRR]

Can we opportunity horizontally scroll tabs?

[powman]

Usage: <Scene key="tab" tabs={true} horizontal={true}>

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