import * as React from 'react'
import { NavigationScreenConfigProps } from 'react-navigation'
import {
StyleSheet,
View,
Text,
TouchableOpacity,
Animated,
StatusBar,
Dimensions
} from 'react-native'
import {
CollapsibleHeaderFlatList,
CollapsibleHeaderProps
} from 'react-native-collapsible-header-views'
import { getStatusBarHeight } from 'react-native-iphone-x-helper'
const Header = ({
goBack,
interpolatedHeaderTranslation
}: { goBack: () => void } & CollapsibleHeaderProps) => (
{'<-'}
INTERPOLATED TRANSLATION
)
export const InterpolatedTranslation = ({ navigation }: NavigationScreenConfigProps) => (
<>
navigation.goBack()} />
}
headerHeight={90}
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
},
separator: {
height: 1,
backgroundColor: 'gray'
},
header: {
flex: 1,
backgroundColor: 'green',
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row'
},
backButton: {
height: 84,
width: 84,
justifyContent: 'center',
alignItems: 'center'
},
arrow: {
fontWeight: 'bold',
fontSize: 20,
color: 'white'
},
title: {
flex: 1,
fontWeight: 'bold',
fontSize: 28,
color: 'white'
}
})