accordion.js

import React, { Component } from 'react'
import { Text, View, ScrollView, StyleSheet } from 'react-native'
import * as Animatable from 'react-native-animatable'
import Accordion from 'react-native-collapsible/Accordion'

const CONTENT = [
  {
    title: 'Maintenance: booking request sent',
    date: '13.04.2018, 04:00 - 08:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '10.04.2018, 11:55'
  },
  {
    title: 'Repair: booking request sent',
    date: '11.04.2018, 08:00 - 12:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '09.04.2018, 09:35'
  },
  {
    title: 'Maintenance: booking request sent',
    date: '13.04.2018, 04:00 - 08:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '10.04.2018, 11:55'
  },
  {
    title: 'Maintenance: booking request sent',
    date: '13.04.2018, 04:00 - 08:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '10.04.2018, 11:55'
  },
  {
    title: 'Repair: booking request sent',
    date: '11.04.2018, 08:00 - 12:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '09.04.2018, 09:35'
  },
  {
    title: 'Repair: booking request sent',
    date: '11.04.2018, 08:00 - 12:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '09.04.2018, 09:35'
  },
  {
    title: 'Maintenance: booking request sent',
    date: '13.04.2018, 04:00 - 08:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '10.04.2018, 11:55'
  },
  {
    title: 'Repair: booking request sent',
    date: '11.04.2018, 08:00 - 12:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '09.04.2018, 09:35'
  },
  {
    title: 'Maintenance: booking request sent',
    date: '13.04.2018, 04:00 - 08:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '10.04.2018, 11:55'
  },
  {
    title: 'Repair: booking request sent',
    date: '11.04.2018, 08:00 - 12:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '09.04.2018, 09:35'
  },
  {
    title: 'Maintenance: booking request sent',
    date: '13.04.2018, 04:00 - 08:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '10.04.2018, 11:55'
  },
  {
    title: 'Repair: booking request sent',
    date: '11.04.2018, 08:00 - 12:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '09.04.2018, 09:35'
  },
  {
    title: 'Repair: booking request sent',
    date: '11.04.2018, 08:00 - 12:00',
    descr: 'DriveTech 10',
    content: 'Booking request sent',
    contentDate: '09.04.2018, 09:35'
  }
]

export default class App extends Component {
  state = {
    activeSection: false,
    collapsed: true,
  }

  _setSection = section => {
    this.setState({ activeSection: section })
  }


  _renderHeader(section, i, isActive) {
    return (
      <Animatable.View duration={400} style={[styles.header, isActive ? styles.active : styles.inactive]} transition="backgroundColor">
        <Text style={styles.headerText}>{section.title}</Text>
      </Animatable.View>
    )
  }

  _renderContent(section, i, isActive) {
    return (
      <Animatable.View duration={400}  style={[styles.content, isActive ? styles.active : styles.inactive]} transition="backgroundColor">
        <Animatable.Text animation={isActive ? 'bounceIn' : undefined}>{section.content}</Animatable.Text>
        <Text style={styles.date}>{section.date}</Text>
        <Text style={styles.decr}>{section.decr}</Text>
        <Animatable.Text>{section.content}</Animatable.Text>
        <Animatable.Text>{section.contentDate}</Animatable.Text>
      </Animatable.View>
    )
  }

  render() {
    return (
      <ScrollView>
        <View style={{height: 500}}>
          <Text>Main View</Text>
        </View>
        <View style={{ marginBottom: 300 }}>
          <Accordion
            activeSection={this.state.activeSection}
            sections={CONTENT}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
            duration={400}
            onChange={this._setSection}
          />
        </View>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  mainContent: {
    height: 500,
    justifyContent: 'center',
    alignItems: 'center'
  },
  container: {
    flex: 1
  },
  header: {
    backgroundColor: 'gold',
    padding: 10,
    height: 38
  },
  content: {
    padding: 10,
  }
})