Section Header

SectionHeader.js

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

const SectionHeader = (section, index, isActive) => <View style={styles.container}>
    <Text h4>{section.title}</Text>
    <View style={styles.right}>
        <Text style={{
            marginRight: 5,
            fontSize: 18
        }}>10</Text>
        <Icon
            name={isActive
            ? 'arrow-down'
            : 'arrow-right'}
            type='simple-line-icon'
            size={25}/>
    </View>
</View>

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottomWidth: 0.75,
        padding: 10
    },
    left: {},
    right: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center'
    }
});

export default SectionHeader;