tooot/src/stacks/common/TimelinesCombined.jsx

83 lines
2.5 KiB
React
Raw Normal View History

2020-10-24 16:44:32 +02:00
import React, { useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import { Animated, Dimensions, View } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import SegmentedControl from '@react-native-community/segmented-control'
import { Feather } from '@expo/vector-icons'
import Timeline from './Timeline'
const Stack = createNativeStackNavigator()
2020-10-24 19:15:05 +02:00
export default function TimelinesCombined ({ name, content }) {
2020-10-24 16:44:32 +02:00
const [segment, setSegment] = useState(0)
const [renderHeader, setRenderHeader] = useState(false)
useEffect(() => {
const nbr = setTimeout(() => setRenderHeader(true), 50)
return
}, [])
const moveAnimation = useRef(new Animated.Value(0)).current
return (
<Stack.Navigator
screenOptions={{
statusBarAnimation: 'none',
headerRight: () =>
renderHeader ? (
<Feather name='search' size={24} color='black' />
) : null,
headerCenter: () =>
renderHeader ? (
<SegmentedControl
2020-10-24 19:15:05 +02:00
values={[content[0].title, content[1].title]}
2020-10-24 16:44:32 +02:00
selectedIndex={segment}
onChange={e => {
setSegment(e.nativeEvent.selectedSegmentIndex)
Animated.timing(moveAnimation, {
toValue:
-e.nativeEvent.selectedSegmentIndex *
Dimensions.get('window').width,
duration: 250,
useNativeDriver: false
}).start()
}}
style={{ width: 150, height: 30 }}
/>
) : null
}}
>
2020-10-24 19:15:05 +02:00
<Stack.Screen name={name}>
2020-10-24 16:44:32 +02:00
{props => (
<Animated.View
style={{
flexDirection: 'row',
width: Dimensions.get('window').width * 2,
left: moveAnimation
}}
{...props}
>
<View style={{ width: Dimensions.get('window').width }}>
2020-10-24 19:15:05 +02:00
<Timeline timeline={content[0].timeline} />
2020-10-24 16:44:32 +02:00
</View>
<View style={{ width: Dimensions.get('window').width }}>
2020-10-24 19:15:05 +02:00
<Timeline timeline={content[1].timeline} />
2020-10-24 16:44:32 +02:00
</View>
</Animated.View>
)}
</Stack.Screen>
</Stack.Navigator>
)
}
TimelinesCombined.propTypes = {
2020-10-24 19:15:05 +02:00
name: PropTypes.string.isRequired,
content: PropTypes.arrayOf(
2020-10-24 16:44:32 +02:00
PropTypes.exact({
title: PropTypes.string.isRequired,
2020-10-24 19:15:05 +02:00
timeline: Timeline.propTypes.timeline
2020-10-24 16:44:32 +02:00
})
).isRequired
}