JSX

import React, {Component} from 'react';
import {
  View,
  Image
} from 'react-native';
import {
  Text
} from 'native-base';
import {styles} from './Collapsible.styles.js';
import Swiper from 'react-native-swiper';
import Accordion from 'react-native-collapsible/Accordion';

class Collapsible extends Component {
  renderHeader(section, index, isActive) {
    return (
      <View style={styles.titleContainer}>
        <Text style={styles.title}>{section.title}</Text>
        <Text style={styles.titleIcon}>{isActive ? 'Close' : 'Open'}</Text>
      </View>
    );
  }

  renderContent(data) {
    return (
      <View style={styles.contentContainer}>
        <Text style={styles.content}>{data.content}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{flex: 1}}>
          <View style={styles.swiperContainer}>
            <Swiper style={styles.wrapper}>
              <Image style={{width: '100%', height: '100%'}} source={{uri: 'https://i.pinimg.com/736x/07/2e/a4/072ea474c57b561a458f19a66d0f785d--woodland-engagement-photos-canoe-engagement-photos.jpg'}} />
            </Swiper>
          </View>
        </View>
        <View>
          <Accordion
            sections={[{
              title: 'Enjoy with it :D',
              content: 'Bacon ipsum dolor amet chuck turducken landjaeger tongue spare ribs. Picanha beef prosciutto meatball turkey shoulder shank salami cupim doner jowl pork belly cow. Chicken shankle rump swine tail frankfurter meatloaf ground round flank ham hock tongue shank andouille boudin brisket. ',
            }]}
            renderHeader={this.renderHeader}
            renderContent={this.renderContent}
          />
        </View>
      </View>
    );
  }
}

export default Collapsible;