Skip to content

Commit

Permalink
add offline support
Browse files Browse the repository at this point in the history
  • Loading branch information
kosmydel committed Oct 30, 2023
1 parent 3c6666c commit e20fa3b
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 1 deletion.
18 changes: 17 additions & 1 deletion src/components/Lottie/Lottie.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,29 @@
import LottieView, {LottieViewProps} from 'lottie-react-native';
import React, {CSSProperties, ForwardedRef, forwardRef} from 'react';
import {ViewStyle} from 'react-native';
import {ViewStyle, Text} from 'react-native';
import DotLottieAnimation from '@components/LottieAnimations/types';
import styles from '@styles/styles';
import useNetwork from '@hooks/useNetwork';

type Props = {
animation: DotLottieAnimation;
} & LottieViewProps;

function Lottie({animation, ...props}: Props, ref: ForwardedRef<LottieView>) {
const [isError, setIsError] = React.useState(false);

const source = animation.file;
const style: ViewStyle = styles.aspectRatioLottie(animation);

useNetwork({onReconnect: () => {
console.log('reconnected, load image again');
setIsError(false);
}});

if (isError) {
return <Text>Animation not loaded. You are offline!</Text>;
}

return (
<LottieView
// eslint-disable-next-line react/jsx-props-no-spreading
Expand All @@ -20,6 +32,10 @@ function Lottie({animation, ...props}: Props, ref: ForwardedRef<LottieView>) {
ref={ref}
style={[props.style, style]}
webStyle={style as CSSProperties}
onAnimationFailure={(error) => {
console.log('animation failure', error);
setIsError(true);
}}
/>
);
}
Expand Down
5 changes: 5 additions & 0 deletions web/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,11 @@
align-items: flex-start;
width: 100%;
}

.animation .error {
margin-left: auto;
margin-right: auto;
}
</style>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, interactive-widget=resizes-content">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Expand Down

0 comments on commit e20fa3b

Please sign in to comment.