Doesn't work in a ScrollView #187

sercanov · 2016-03-02T20:17:10Z

Tried in a normal View, works. But when I put ScrollableTabView component in a ScrollView ; it renders the tabs but not the child elements.

Using React Native 0.21 on Android

skv-headless · 2016-03-02T20:43:00Z

Could you please attach your code only part with react-native-scrollable-tab-view?

sercanov · 2016-03-02T20:46:18Z

@skv-headless sure!

              <ScrollView style={{flex:1}}>
                <GuideBanner currentGuide = {this.state.currentGuide} isLoading={this.state.loading}  />
                <ScrollableTabView style={{flex:1}} initialPage={0}>
                  <ItemSegment tabLabel='Items' guideDetail={this.state.currentGuide}/>
                  <SkillSegment tabLabel='Skills' guideDetail={this.state.currentGuide}/>
                </ScrollableTabView>
              </ScrollView>

The code above doesn't render the child elements (ItemSegment and SkillSegment)

But when I add contentContainerStyle={{flex:1}} to the parent ScrollView; it renders the child elements but it allows to scroll only inside the tab view, not whole parent view.

haikov · 2016-03-18T14:00:57Z

I'm facing the same issue. Doesn't render child element

jbrodriguez · 2016-03-18T15:51:16Z

Hi, same here, when it's inside a ScrollView, not only it doesn't render the child elements, but it doesn't allow tab selection, the bottom bar, moves just a bit, then jumps ... well, it's inconsistent behaviour

jiuxuan00 · 2016-03-22T07:55:05Z

Hi, same here, when it's inside a ScrollView, not only it doesn't render the child elements, but it doesn't allow tab selection, the bottom bar, moves just a bit, then jumps ... well, it's inconsistent behaviour

punitlohani93 · 2016-04-19T12:59:40Z

Encountered this issue in Android. Works well on iOS. In android, if you press the tab long enough, only then, the tabs will switch. Nevertheless the tab content is not rendered in my case. No such issue in iOS

sankhadeeproy007 · 2016-05-16T12:29:27Z

Hi any updates on this one? I'm getting the same error.

martinezguillaume · 2016-05-19T12:55:27Z

Don't work in android, the child components don't render... on iOS no problem

vince-rowe · 2016-05-25T15:10:57Z

Same issue on react native 0.26.2 and latest install of scrollable tab view. As comments above we can get the contents to show on Android with either using a View that then won't scroll as needed, or by adding ContainerStyle={{flex:1}} to ScrollView which also stops the scroll.

Any update on a possible fix?

SudoPlz · 2016-06-14T13:45:39Z

I've got the same problem on React native 0.26.2 and the 0.4.4 version of react-native-scrollable-tab-view.

ivpusic · 2016-06-21T08:19:04Z

same here

gorangajic · 2016-06-29T18:48:06Z

related? facebook/react-native#4775

TLenahan · 2016-07-07T14:56:11Z

Is there any update on this issue? I'm running into the same problem.

sckoh · 2016-07-13T02:50:55Z

same prob on react-native 0.29

jbrodriguez · 2016-07-23T16:17:57Z

@skv-headless do you have any idea what the problem might be ?

It's still happening on 0.30

Is it facebook/react-native#4775 really ?

jbrodriguez · 2016-07-25T16:24:02Z

RN 0.31 brings this change, hopefully it solves the nested issue

facebook/react-native@b0c023c

luiscript · 2016-07-28T18:19:44Z

I'm using it with this Parallax scroll view and I'm having the same issue, child doesn't render and I can't scroll between tabs… Great work, I hope this can be solved. Thanks.

jbrodriguez · 2016-08-05T17:10:00Z

It still doesn't work in 0.31 (Android) :(

As soon as you nest the ScrollableTabView inside a View/ScrollView, the tab contents are not shown.

It doesn't make a difference if you flex: 1 or not

(This is on a fresh react-native init)

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, View, ScrollView, Text } from 'react-native'

import ScrollableTabView from 'react-native-scrollable-tab-view'

class Page extends Component {
    render() {
        return (
            <View style={{backgroundColor: 'blue'}}>
                <Text>{this.props.name}</Text>
            </View>
        )
    }
}

class app extends Component {
    render() {
        return (
            // <ScrollView>
            //  <View style={{height: 150}}>
            //      <Text>Testing</Text>
            //  </View>

            // <View>
                <ScrollableTabView>
                    <Page name='tab1' tabLabel='tab1' />
                    <Page name='tab2' tabLabel='tab2' />
                    <Page name='tab3'  tabLabel='tab3' />
                    <Page name='tab4' tabLabel='tab4' />
                    <Page name='tab5' tabLabel='tab5' />
                    <Page name='tab6' tabLabel='tab6' />
                </ScrollableTabView>
            // </View>
            // </ScrollView>
        )
    }
}

AppRegistry.registerComponent('app', () => app)

jbrodriguez · 2016-08-05T17:38:30Z

Well, it's not a react-native-scrollable-tab-view issue.

It's definitely a ViewPagerAndroid issue.

The example below won't work as soon as the ViewPagerAndroid is nested.

import React, { Component } from 'react'
import { AppRegistry, View, ViewPagerAndroid, Text } from 'react-native'

class app extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
                // <View>
                    <ViewPagerAndroid
                        initialPage={0}
                    >
                        <View><Text>page1-1</Text></View>
                        <View><Text>page1-2</Text></View>
                        <View><Text>page1-3</Text></View>
                    </ViewPagerAndroid>
                // </View>
        )
    }
}

AppRegistry.registerComponent('app', () => app)

jbrodriguez · 2016-08-05T18:13:08Z

I got it working with the following code

class Page extends Component {
    render() {
        return (
            <View style={{flex: 1, backgroundColor: 'blue'}}>
                <Text>{this.props.name}</Text>
            </View>
        )
    }
}

class app extends Component {
    render() {
        return (
            <ScrollView
                contentContainerStyle={{flex: 1}}
            >
                <View style={{flex: 1}}>
                    <ScrollableTabView>
                        <Page name='tab1' tabLabel='tab1' />
                        <Page name='tab2' tabLabel='tab2' />
                        <Page name='tab3' tabLabel='tab3' />
                        <Page name='tab4' tabLabel='tab4' />
                        <Page name='tab5' tabLabel='tab5' />
                        <Page name='tab6' tabLabel='tab6' />
                    </ScrollableTabView>
                </View>
            </ScrollView>
        )
    }
}

AppRegistry.registerComponent('app', () => app)

AND

removing Android specific code in the component, that is ... eliminating the use of ViewPagerAndroid (since it's so troublesome).

https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/index.js#L79
https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/index.js#L143

For the test, I changed those two lines to read if (Platform.OS === 'android') {, and it just worked !

So, the question for @skv-headless ... is there any special reason to use ViewPagerAndroid at all ?

crozzfire · 2016-08-05T21:53:19Z

@jbrodriguez That actually works! But I wouldn't change it as: if (Platform.OS === 'android') { , because the support for iOS would disappear. Instead, I made the 'iOS' specific code as the main code and deleted the android specific code. Works like a charm and I guess the problem indeed is in ViewPagerAndroid.

@skv-headless If it doesn't seem like something way wrong, you might wanna consider it. Can send out a pull request.

jbrodriguez · 2016-08-06T00:17:23Z

@crozzfire I was forcing 'android' just as a proof of concept, but the right way would be a single path of execution, like you mentioned 👍

chengmu · 2016-08-23T02:44:13Z

@jbrodriguez @crozzfire tried this way, really works like a magic!!! Thanks, really helped a lot

tioback · 2016-09-05T23:58:26Z

@crozzfire I tried this approach, but even though the content started showing and swiping is working, scrolling is not. Has anyone else had this problem?

tiaaaa123 · 2016-10-05T19:12:35Z

@jbrodriguez Thank you so much!

@skv-headless Is PageViewerAndroid really necessary?

summersky92 · 2016-10-12T08:55:39Z

maybe it's fixed by this commit [(https://github.com/skv-headless/react-native-scrollable-tab-view/commit/5d8aeb1f8cc13cdfbb1bf75ea12866548f872edd)] @chromonav @tioback

tioback · 2016-10-12T15:59:01Z

Thanks, @summersky92, I'll check it out later and post an update here.

gotounix · 2016-10-28T08:07:57Z

@tioback @skv-headless This commit 5d8aeb1 will make the sub ScrollablePage in ScrollablePage cannot be changed by sliding, and sliding just change the tab for parent.

skv-headless · 2016-10-28T08:55:23Z

@gotounix not sure what do you mean. Can you please make a snippet which doesn't work. Thanks

gotounix · 2016-10-28T10:07:29Z

@skv-headless I meaning if using this commit 5d8aeb1 when I embed a ScrollablePage (child) in a ScrollablePage (parent), translation fingers sliding can't switch tabs in child, translation fingers sliding just switch tabs in parent.

{/*This is the parent*/}
<ScrollableTabView
    renderTabBar={() => <BottomTabBar
        tabNames={bottomTabNames}
        tabIconNames={bottomTabIconNames} />}
        tabBarPosition='bottom'>
    <View style={styles.content}>
        <Text>#1</Text>
    </View>
    {/*This is the child and
    the ScrollablePage below can't switch tabs by translation fingers sliding*/}
    <ScrollablePage tabNames={aTabNames} />
</ScrollableTabView>

boniattirodrigo · 2017-04-13T18:36:23Z

I'm trying to add a parallax component around react-native-scrollable-tab-view, but I'm having the same issue. Did anyone resolve it?

WillyRamirez · 2017-04-30T14:37:33Z

Hi @skv-headless
What is the status of this? I still don't have child components when enclosing my component with a ScrollView... The solution jbrodriguez provided seems not to be valid anymore. I am using "0.6.5"

prestawithme · 2017-05-19T16:08:06Z

For me, it does not relate to react-native-scrollable-tab-view. It related to the structure.

for my example (I'm using react native base):

Doesn't work code

class AnatomyExample extends Component {

    render() {

        return (

          <Container>

             <Header>

                 <Left>

                     <Button transparent>

                         <Icon name='menu' />

                     </Button>

                 </Left>

                 <Body>

                     <Title>Todo App</Title>

                 </Body>

                 <Right />

             </Header>

             <Content> 

             <ScrollTabView style={{flex: 1, backgroundColor: 'white'}}>

               <Todo tabLabel="Todo" />

               <Completed tabLabel="Completed" />

             </ScrollTabView>             

             </Content>

             <Footer>

                <Text>Input to add to do here</Text>

             </Footer>

         </Container>

        );
    }
}```



**Working code**

class AnatomyExample extends Component {

render() {

    return (

      <Container>

         <Header>

             <Left>

                 <Button transparent>

                     <Icon name='menu' />

                 </Button>

             </Left>

             <Body>

                 <Title>Todo App</Title>

             </Body>

             <Right />

         </Header>

         <ScrollTabView style={{flex: 1, backgroundColor: 'white'}}>

           <Todo tabLabel="Todo" />

           <Completed tabLabel="Completed" />

         </ScrollTabView>         

         <Footer>

            <Text>Input to add to do here</Text>

         </Footer>

     </Container>
    );
}

}```

slaveofcode · 2017-09-03T03:23:03Z

Hi what the status of this issue? because i'm facing the same issue by the way

MaxiSantos · 2017-12-20T05:12:35Z

@prestawithme, yes.. same here. I'm modifying the height of the container of the ScrollTabView and I'm seeing content. Basically this is not working on android but it looks you have achieved that. Can you provide all the styles you have used?

anhnguyenvan-agilityio · 2018-08-01T13:49:32Z

you can using this lib ! it fixed this bug
[https://github.com/turfaa/react-native-scrollable-tab-view-universal)]

Toriki07 · 2018-08-20T05:00:45Z

thank you, it work for me

VesperDev · 2018-09-11T19:07:42Z

@anhnguyenvan this work.

only copy the code of file index.js to react-native-scrollable-tab-view

rezaarifian · 2018-10-08T07:04:30Z

I got it working with the following code

class Page extends Component {
    render() {
        return (
            <View style={{flex: 1, backgroundColor: 'blue'}}>
                <Text>{this.props.name}</Text>
            </View>
        )
    }
}

class app extends Component {
    render() {
        return (
            <ScrollView
                contentContainerStyle={{flex: 1}}
            >
                <View style={{flex: 1}}>
                    <ScrollableTabView>
                        <Page name='tab1' tabLabel='tab1' />
                        <Page name='tab2' tabLabel='tab2' />
                        <Page name='tab3' tabLabel='tab3' />
                        <Page name='tab4' tabLabel='tab4' />
                        <Page name='tab5' tabLabel='tab5' />
                        <Page name='tab6' tabLabel='tab6' />
                    </ScrollableTabView>
                </View>
            </ScrollView>
        )
    }
}

AppRegistry.registerComponent('app', () => app)

AND

removing Android specific code in the component, that is ... eliminating the use of ViewPagerAndroid (since it's so troublesome).

https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/index.js#L79
https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/index.js#L143

For the test, I changed those two lines to read if (Platform.OS === 'android') {, and it just worked !

So, the question for @skv-headless ... is there any special reason to use ViewPagerAndroid at all ?

thanks,
I following this commit

spencerkingman-niche · 2018-11-13T19:00:48Z

I am using https://github.com/turfaa/react-native-scrollable-tab-view-universal and it works like a dream. Is there any reason why this has to be a separate project? Or can the changes in this fork be incorporated into this project (Which is far more popular)?

ptomasroos · 2018-11-13T21:08:56Z

@spencerkingman-niche

This branch is 6 commits ahead, 11 commits behind.

Are there any significant changes in that repo?

ptomasroos · 2018-11-15T07:26:56Z

I've now chcked the fork out @spencerkingman-niche and I will incorporate the idea of replacing the PageView with a ScrollView instead on the next write which I'm doing at this moment in #949

Thanks for pointer

spencerkingman-niche · 2018-11-15T15:46:15Z

Thank you!

turfaa · 2018-11-28T02:22:22Z

@spencerkingman-niche @ptomasroos

Hi,
There is no significant update on my repo. Just changing the name, version, and readme explaining what has changed.

Why no pull request instead? Because it breaks in more cases. I forgot what are those cases, but it breaks. I thought the use of ViewPagerAndroid was intended because of those breaks.

Is it better to add a parameter, letting users to choose which one to use (ScrollView vs ViewPagerAndroid)?

andyr6381 · 2019-01-26T12:43:04Z

Also got it to work with the fork package.json: "react-native-scrollable-tab-view": "git+https://github.com/turfaa/react-native-scrollable-tab-view-universal", and code below.

Only issue I have now is the scroll view sets whichever tab has the biggest height, hopefully find a way to set this dynamic. Any suggestions?

juliscotto · 2021-01-31T20:25:55Z

@andyr6381 im having the same problem, did find a solution?

eramudeep · 2021-02-04T13:33:43Z

im having the same problem, did find a solution?
:(

juliscotto · 2021-02-04T20:52:24Z

@eramudeep couldnt find a solution, so I ended up using this with this approach, hope it helps!

skv-headless mentioned this issue Mar 10, 2016

get this Warning: ScrollView doesn't take rejection well - scrolls anyway #185

Closed

This was referenced Mar 24, 2016

Warning: ScrollView doesn't take rejection well - scrolls anyway #211

Closed

I find why this component cannot be nested #215

Closed

skv-headless added the nested label Jun 23, 2016

crozzfire mentioned this issue Aug 5, 2016

Potential fix for tab content not appearing in a ScrollView #381

Closed

habibridho mentioned this issue Aug 17, 2016

react-native-swiper in react-native-scrollable-tab-view can,t show leecade/react-native-swiper#200

Closed

walidvb added a commit to walidvb/react-native-scrollable-tab-view that referenced this issue Sep 29, 2016

allows to force scroll view for ptomasroos#187

70c7598

jbrodriguez mentioned this issue Jan 19, 2017

Android: Nested tab-view doesn't display children satya164/react-native-tab-view#105

Closed

skv-headless mentioned this issue Apr 17, 2017

Doesn't work in a ScrollView #609

Closed

Thanmai-C mentioned this issue Jan 3, 2018

react native scrollable tabs doesnot scroll inside scrollview #813

Closed

ptomasroos closed this as completed Oct 25, 2018

acb mentioned this issue Mar 31, 2019

Transition content doesn't render inside a ScrollView sharingapples/react-native-transition#8

Open

Doesn't work in a ScrollView #187

Doesn't work in a ScrollView #187

Comments

sercanov commented Mar 2, 2016

skv-headless commented Mar 2, 2016

sercanov commented Mar 2, 2016

haikov commented Mar 18, 2016

jbrodriguez commented Mar 18, 2016

jiuxuan00 commented Mar 22, 2016

punitlohani93 commented Apr 19, 2016

sankhadeeproy007 commented May 16, 2016

martinezguillaume commented May 19, 2016 • edited Loading

vince-rowe commented May 25, 2016

SudoPlz commented Jun 14, 2016

ivpusic commented Jun 21, 2016

gorangajic commented Jun 29, 2016

TLenahan commented Jul 7, 2016

sckoh commented Jul 13, 2016

jbrodriguez commented Jul 23, 2016

jbrodriguez commented Jul 25, 2016

luiscript commented Jul 28, 2016

jbrodriguez commented Aug 5, 2016 • edited Loading

jbrodriguez commented Aug 5, 2016

jbrodriguez commented Aug 5, 2016 • edited Loading

AND

crozzfire commented Aug 5, 2016 • edited Loading

jbrodriguez commented Aug 6, 2016

chengmu commented Aug 23, 2016

tioback commented Sep 5, 2016

tiaaaa123 commented Oct 5, 2016

summersky92 commented Oct 12, 2016 • edited Loading

tioback commented Oct 12, 2016

gotounix commented Oct 28, 2016

skv-headless commented Oct 28, 2016

gotounix commented Oct 28, 2016 • edited Loading

boniattirodrigo commented Apr 13, 2017

WillyRamirez commented Apr 30, 2017

prestawithme commented May 19, 2017 • edited Loading

slaveofcode commented Sep 3, 2017

MaxiSantos commented Dec 20, 2017

anhnguyenvan-agilityio commented Aug 1, 2018

Toriki07 commented Aug 20, 2018

VesperDev commented Sep 11, 2018

rezaarifian commented Oct 8, 2018

AND

spencerkingman-niche commented Nov 13, 2018

ptomasroos commented Nov 13, 2018

ptomasroos commented Nov 15, 2018

spencerkingman-niche commented Nov 15, 2018

turfaa commented Nov 28, 2018 • edited Loading

andyr6381 commented Jan 26, 2019 • edited Loading

juliscotto commented Jan 31, 2021

eramudeep commented Feb 4, 2021

juliscotto commented Feb 4, 2021

martinezguillaume commented May 19, 2016 •

edited

Loading

jbrodriguez commented Aug 5, 2016 •

edited

Loading

jbrodriguez commented Aug 5, 2016 •

edited

Loading

crozzfire commented Aug 5, 2016 •

edited

Loading

summersky92 commented Oct 12, 2016 •

edited

Loading

gotounix commented Oct 28, 2016 •

edited

Loading

prestawithme commented May 19, 2017 •

edited

Loading

turfaa commented Nov 28, 2018 •

edited

Loading

andyr6381 commented Jan 26, 2019 •

edited

Loading