import * as React from 'react'
import { NavigationScreenConfigProps } from 'react-navigation'
import { StyleSheet, View, Text, TouchableOpacity, StatusBar } from 'react-native'
import { CollapsibleHeaderFlatList } from 'react-native-collapsible-header-views'
import { getStatusBarHeight } from 'react-native-iphone-x-helper'
const Header = ({ goBack }: { goBack: () => void }) => (
{'<-'}
BASIC
)
export const Basic = ({ navigation }: NavigationScreenConfigProps) => (
<>
navigation.goBack()} />}
headerHeight={100}
statusBarHeight={getStatusBarHeight(true)}
headerContainerBackgroundColor={'green'}
data={data}
renderItem={Item}
ItemSeparatorComponent={Separator}
keyExtractor={keyExtractor}
/>
>
)
const keyExtractor = (item: number, _index: number) => `${item}`
const data = Array(50).fill(0).map((_, i) => i)
const Item = ({ item }: { item: number }) => (
{item}
)
const Separator = () => (
)
const styles = StyleSheet.create({
item: {
paddingLeft: 20,
paddingVertical: 20,
backgroundColor: 'wheat'
},
separator: {
height: 1,
backgroundColor: 'gray'
},
header: {
flex: 1,
backgroundColor: 'green',
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row'
},
backButton: {
height: 94,
width: 94,
justifyContent: 'center',
alignItems: 'center'
},
title: {
fontWeight: 'bold',
fontSize: 20,
color: 'white'
}
})