React Native + NativeBase Content component and Carousel (not displaying)

Question

Good day,

Here's a small problem with my React Native app which uses NativeBase components. The problem is within the <Content /> component of NativeBase. I want to use the <Carousel /> component from github which is react-native-carousel.

The code is as follows:

index.android.js

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

import {
  Container,
  Header,
  Content,
  Title,
  Icon,
  Button,
} from 'native-base';

import Carousel from 'react-native-carousel';

import styles from './src/styles/styles';

export default class iABC extends Component {
  render() {
    return (
      <Container>
        <Header backgroundColor='#ffffff' height={50}>
          <Button transparent>
            <Icon name='md-menu' style={styles.header.icon} />
          </Button>

          <Title style={styles.header.title}>
            iABC
          </Title>

          <Button transparent>
            <Icon name='md-person' style={styles.header.icon} />
          </Button>
        </Header>

        <Content>
          <View style={styles.global.content}>            
            <Carousel width={375}
              hideIndicators={false}
              indicatorColor='#000000'
              indicatorSize={25}
              indicatorSpace={20}
              indicatorAtBottom={true}
              indicatorOffset={250}
              indicatorText='>'
              animate={true}
              delay={2000}
              loop={true}>

              <View style={styles.carousel.page1}>
                <Text>Page 1</Text>
              </View>
              <View style={styles.carousel.page1}>
                <Text>Page 2</Text>
              </View>
              <View style={styles.carousel.page1}>
                <Text>Page 3</Text>
              </View>
            </Carousel>
          </View>          
        </Content>
      </Container>
    );
  }
}

AppRegistry.registerComponent('iABC', () => iABC);

Style: carousel.js

'use strict'
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  page1: {
    flex: 1,
    height: 150,
    width: 375,
    backgroundColor: '#cdcdcd',
    justifyContent: 'center',
    alignItems: 'center',
  }
})

Style: global.js

'use strict'
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

I have tried many things, styling carousel component, giving it a separate view, styling both at the same time, but unfortunately it doesn't work. However, as long as I remove <Content /> component of NativeBase, it works fine. I'm pretty sure that the problem is with the NativeBase component.

Thanks in advance.

score 2 · Accepted Answer · answered Dec 29 '16 at 06:07

2

About react-native-carousel

Renders Carousel
Carousel renders CarouselPager
And CarouselPagerrenders ScrollView of RN

About NativeBase Content, it renders ScrollView of RN. So wrapping it in another ScrollView is not necessary and causing problem.

Try excluding NB's Content.

Know more about NativeBase's replacing components - CheatSheet

answered Dec 29 '16 at 06:07

Supriya Kalghatgi

1,155
9
10

Thanks, got it. Wasn't sure about what does NB's Content return, thought it just returns View component :( Trying to avoid the usage of NB's Component and use another Carousel component from react-native-carousel-component. – Dec 29 '16 at 06:50
I dont think you need to avoid all of the NB's components. To be avoided in such cases only. You can check the docs of NB, it includes thorough details of all of its components – Supriya Kalghatgi Dec 29 '16 at 10:22

React Native + NativeBase Content component and Carousel (not displaying)

1 Answers1