import React, {useCallback, useRef, useState} from 'react';
import {StyleSheet, ScrollView} from 'react-native';
import {Assets, Colors, Timeline, View, Card, Text, Button} from 'react-native-ui-lib';
const contents = [
'CURRENT (default) state with dashed line.\nAligned to title',
'SUCCESS state with label.',
'ERROR state with icon.',
'Custom color with icon and outline.\nAligned to title',
'Icon without background.',
'NEXT state with outline.',
'NEXT state with circle point and entry point.'
];
const TimelineScreen = () => {
const [anchorIndex, setAnchorIndex] = useState(0);
const [expand, setExpand] = useState(false);
const anchor = useRef();
const onPress = useCallback(() => {
setAnchorIndex(anchorIndex === 0 ? 1 : 0);
}, [anchorIndex]);
const onPressExpand = useCallback(() => {
setExpand(!expand);
}, [expand]);
const renderExtraContent = () => {
return (
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of
the printing and typesetting industry
);
};
const renderContent = (index = 0, anchorRef?: any) => {
return (
Step {index + 1}
{contents[index]}
{expand && renderExtraContent()}
);
};
return (
<>
Timeline
{renderContent(0, anchorIndex === 0 ? anchor : undefined)}
{renderContent(1, anchorIndex === 1 ? anchor : undefined)}
{renderContent(2)}
{renderContent(3)}
{renderContent(4)}
{renderContent(5)}
{renderContent(6)}
);
};
export default TimelineScreen;
const styles = StyleSheet.create({
container: {
paddingBottom: 20
}
});