Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 06:59:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

convert SplashScreen to a Modal

Browse Source
This commit is contained in:
ammarahm-ed
2021-04-10 08:59:08 +05:00
parent 221ce526c1
commit 7d1c8cfc90
1 changed files with 142 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
apps/mobile/src/components/SplashScreen/index.js
View File

@@ -24,6 +24,7 @@ import Paragraph from '../Typography/Paragraph';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {DDS} from '../../services/DeviceDetection'; import {DDS} from '../../services/DeviceDetection';
import {openLinkInBrowser} from '../../utils/functions'; import {openLinkInBrowser} from '../../utils/functions';
import {Modal} from 'react-native';
const features = [ const features = [
{ {
@@ -70,11 +71,9 @@ const SplashScreen = () => {
const [isNext, setIsNext] = useState(true); const [isNext, setIsNext] = useState(true);
const opacity = useValue(0); const opacity = useValue(0);
const translateY = useValue(20);
const translateY2 = useValue(0);
useEffect(() => { useEffect(() => {
Storage.read('introCompleted').then(async (r) => { Storage.read('introCompleted').then(async r => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (!r) { if (!r) {
setVisible(true); setVisible(true);
@@ -83,185 +82,175 @@ const SplashScreen = () => {
duration: 500, duration: 500,
easing: Easing.in(Easing.ease), easing: Easing.in(Easing.ease),
}).start(); }).start();
timing(translateY, {
toValue: 0,
duration: 500,
easing: Easing.in(Easing.ease),
}).start();
} }
}); });
}); });
}, []); }, []);
const hide = async () => { const hide = async () => {
timing(translateY2, {
toValue: dHeight * 2,
duration: 500,
easing: Easing.in(Easing.ease),
}).start();
await sleep(500);
setVisible(false); setVisible(false);
}; };
return ( return (
visible && ( visible && (
<Animated.View <Modal animationType="slide" statusBarTranslucent visible>
style={{
zIndex: 999,
...getElevation(10),
width: '100%',
height: '100%',
position: 'absolute',
backgroundColor: colors.bg,
transform: [
{
translateY: translateY2,
},
],
}}>
<Animated.View <Animated.View
style={{ style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
justifyContent: 'center', backgroundColor: colors.bg,
alignItems: 'center',
padding: 12,
opacity: opacity,
transform: [
{
translateY: translateY,
},
],
}}> }}>
<View> <Animated.View
<Carousel style={{
ref={carouselRef} width: '100%',
data={features} height: '100%',
itemWidth={dWidth} justifyContent: 'center',
sliderWidth={dWidth} alignItems: 'center',
loop={false} padding: 12,
shouldOptimizeUpdates opacity: opacity,
renderItem={({item, index}) => ( }}>
<View <View>
style={{ <Carousel
height: '100%', ref={carouselRef}
justifyContent: 'center', data={features}
}}> itemWidth={dWidth}
sliderWidth={dWidth}
loop={false}
onSnapToItem={i => {
currentIndex = i;
}}
activeAnimationType="timing"
shouldOptimizeUpdates
renderItem={({item, index}) => (
<View <View
key={item.description}
style={{ style={{
paddingVertical: 5, height: '100%',
marginBottom: 10, justifyContent: 'center',
alignSelf: 'center',
}}> }}>
<View <View
key={item.description}
style={{ style={{
flexWrap: 'wrap', paddingVertical: 5,
width: '100%', marginBottom: 10,
alignItems: 'center', alignSelf: 'center',
}}> }}>
{item.type === 'image' ? ( <View
<Image style={{
source={item.icon} flexWrap: 'wrap',
style={{ width: '100%',
width: 170, alignItems: 'center',
height: 170, }}>
}} {item.type === 'image' ? (
/> <Image
) : item.type === 'icon' ? ( source={item.icon}
<Icon color={item.color} name={item.icon} size={170} /> style={{
) : ( width: 170,
<SvgXml height: 170,
xml={ }}
item.icon />
? item.icon(colors.accent) ) : item.type === 'icon' ? (
: NOTE_SVG(colors.accent) <Icon
} color={item.color}
width={250} name={item.icon}
height={250} size={170}
/> />
)} ) : (
<SvgXml
{item.title && ( xml={
<Heading item.icon
size={SIZE.xl} ? item.icon(colors.accent)
style={{ : NOTE_SVG(colors.accent)
textAlign: 'center',
alignSelf: 'center',
marginTop: 10,
}}>
{item.title}
</Heading>
)}
{item.description && (
<Paragraph
size={SIZE.md}
color={colors.icon}
textBreakStrategy="balanced"
style={{
fontWeight: 'normal',
textAlign: 'center',
alignSelf: 'center',
maxWidth: DDS.isTab ? 350 : '80%',
}}>
{item.description}
</Paragraph>
)}
{item.link && (
<Button
title="Learn more"
fontSize={SIZE.md}
onPress={() => {
try {
openLinkInBrowser(item.link, colors);
} catch (e) {
console.log(e, 'ERROR');
} }
}} width={250}
/> height={250}
)} />
)}
{item.title && (
<Heading
size={SIZE.xl}
style={{
textAlign: 'center',
alignSelf: 'center',
marginTop: 10,
}}>
{item.title}
</Heading>
)}
{item.description && (
<Paragraph
size={SIZE.md}
color={colors.icon}
textBreakStrategy="balanced"
style={{
fontWeight: 'normal',
textAlign: 'center',
alignSelf: 'center',
maxWidth: DDS.isTab ? 350 : '80%',
}}>
{item.description}
</Paragraph>
)}
{item.link && (
<Button
title="Learn more"
fontSize={SIZE.md}
onPress={() => {
try {
openLinkInBrowser(item.link, colors);
} catch (e) {
console.log(e, 'ERROR');
}
}}
/>
)}
</View>
</View> </View>
</View> </View>
</View> )}
)} />
/> </View>
</View>
<View <View
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
width: '100%', width: '100%',
position: 'absolute', position: 'absolute',
bottom: 25, bottom: 25,
}}> }}>
<View /> <View />
<Button <Button
fontSize={SIZE.md} fontSize={SIZE.md}
height={50} height={50}
width={isNext ? null : '100%'} width={isNext ? null : '100%'}
onPress={async () => { onPress={async () => {
if (isNext) { if (isNext) {
carouselRef.current?.snapToItem(currentIndex + 1,true,true); carouselRef.current?.snapToItem(
currentIndex++; currentIndex + 1,
if (currentIndex === 4) { true,
setIsNext(false); true,
);
currentIndex++;
if (currentIndex === 4) {
setIsNext(false);
}
} else {
await hide();
await Storage.write('introCompleted', 'true');
} }
} else { }}
await hide(); style={{paddingHorizontal: 24}}
await Storage.write('introCompleted', 'true'); type="accent"
} title={isNext ? 'Next' : 'Start taking notes'}
}} />
style={{paddingHorizontal: 24}} </View>
type="accent" </Animated.View>
title={isNext ? 'Next' : 'Start taking notes'}
/>
</View>
</Animated.View> </Animated.View>
</Animated.View> </Modal>
) )
); );
}; };