question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

It can not render images in react-native-scrollable-tab-view?

See original GitHub issue
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Swiper from 'react-native-swiper';

var sliderImgs = [
    'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
    'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
    'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
];
var SwiperSlider = React.createClass({
    render: function () {
        return (
            <Swiper style={styles.wrapper} showsButtons={true} autoplay={true} height={80} showsPagination={false}>
                <Image style={[styles.slide,]} source={{ uri: sliderImgs[0] }}></Image>
                <Image style={[styles.slide,]} source={{ uri: sliderImgs[1] }}></Image>
                <Image style={[styles.slide,]} source={{ uri: sliderImgs[2] }}></Image>
            </Swiper>
        );
    }
});

This is my page tab view:

var Demo = React.createClass({
    render: function () {
        return (
            <View style={styles.container}>
                <ScrollableTabView initialPage={0} tabBarPosition='bottom' renderTabBar={() => <BottomTabBar />}>
                    <ScrollView tabLabel="index" style={styles.tabView} contentContainerStyle={{ height: 1000 }}>
                        <SwiperSlider />
                    </ScrollView>
                    <ScrollView tabLabel="index1" style={styles.tabView}>
                        <View style={styles.card}>
                            <Text>index1</Text>
                        </View>
                    </ScrollView>
                    <ScrollView tabLabel="index2" style={styles.tabView}>
                        <View style={styles.card}>
                            <Text>index2</Text>
                        </View>
                    </ScrollView>
                    <ScrollView tabLabel="index3" style={styles.tabView}>
                        <View style={styles.card}>
                            <Text>index3</Text>
                        </View>
                    </ScrollView>
                    <ScrollView tabLabel="index4" style={styles.tabView}>
                        <View style={styles.card}>
                            <Text>index4</Text>
                        </View>
                    </ScrollView>
                </ScrollableTabView>
            </View>
        );
    },
});

It can only render buttons and pagination,but can not view images.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:4
  • Comments:8

github_iconTop GitHub Comments

1reaction
aqnarutocommented, Dec 3, 2016

same issue+1,and a still didn’t find solution yet

same with #200 .#307

0reactions
MiccyMacommented, Apr 28, 2017

Well, I got the same problem when i use swiper inside the react-navigator.Here is my solution, change the swiper into another third party component, and I chose react-native-looped-carousel,and everything is perfect!!!

Read more comments on GitHub >

github_iconTop Results From Across the Web

react native - Unable to render View inside ScrollableTabView
ok, I read the react-native-scroll-tab-view and react-native-scroll-tab-view-forked source code, and find some code are different, ...
Read more >
Render Props - React
Render Props. The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a...
Read more >
don't render tab until it is clicked on-React Native
Coding example for the question React Native Tab View - don't render tab until it is clicked on-React Native.
Read more >
react-native-tab-view - npm
React Native Tab View. A cross-platform Tab View component for React Native. Implemented using react-native-pager-view on Android & iOS, ...
Read more >
Scrollable-tab-view react native: unable to switch tabs
Stuck at initialpage which I have set even after clicking on other tabs nothing happens also inside tabs no data is rendered although ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found