Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-22 22:49:45 +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 {DDS} from '../../services/DeviceDetection';
import {openLinkInBrowser} from '../../utils/functions';
import {Modal} from 'react-native';
const features = [
{
@@ -70,11 +71,9 @@ const SplashScreen = () => {
const [isNext, setIsNext] = useState(true);
const opacity = useValue(0);
const translateY = useValue(20);
const translateY2 = useValue(0);
useEffect(() => {
Storage.read('introCompleted').then(async (r) => {
Storage.read('introCompleted').then(async r => {
requestAnimationFrame(() => {
if (!r) {
setVisible(true);
@@ -83,185 +82,175 @@ const SplashScreen = () => {
duration: 500,
easing: Easing.in(Easing.ease),
}).start();
timing(translateY, {
toValue: 0,
duration: 500,
easing: Easing.in(Easing.ease),
}).start();
}
});
});
}, []);
const hide = async () => {
timing(translateY2, {
toValue: dHeight * 2,
duration: 500,
easing: Easing.in(Easing.ease),
}).start();
await sleep(500);
setVisible(false);
};
return (
visible && (
<Animated.View
style={{
zIndex: 999,
...getElevation(10),
width: '100%',
height: '100%',
position: 'absolute',
backgroundColor: colors.bg,
transform: [
{
translateY: translateY2,
},
],
}}>
<Modal animationType="slide" statusBarTranslucent visible>
<Animated.View
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
padding: 12,
opacity: opacity,
transform: [
{
translateY: translateY,
},
],
backgroundColor: colors.bg,
}}>
<View>
<Carousel
ref={carouselRef}
data={features}
itemWidth={dWidth}
sliderWidth={dWidth}
loop={false}
shouldOptimizeUpdates
renderItem={({item, index}) => (
<View
style={{
height: '100%',
justifyContent: 'center',
}}>
<Animated.View
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
padding: 12,
opacity: opacity,
}}>
<View>
<Carousel
ref={carouselRef}
data={features}
itemWidth={dWidth}
sliderWidth={dWidth}
loop={false}
onSnapToItem={i => {
currentIndex = i;
}}
activeAnimationType="timing"
shouldOptimizeUpdates
renderItem={({item, index}) => (
<View
key={item.description}
style={{
paddingVertical: 5,
marginBottom: 10,
alignSelf: 'center',
height: '100%',
justifyContent: 'center',
}}>
<View
key={item.description}
style={{
flexWrap: 'wrap',
width: '100%',
alignItems: 'center',
paddingVertical: 5,
marginBottom: 10,
alignSelf: 'center',
}}>
{item.type === 'image' ? (
<Image
source={item.icon}
style={{
width: 170,
height: 170,
}}
/>
) : item.type === 'icon' ? (
<Icon color={item.color} name={item.icon} size={170} />
) : (
<SvgXml
xml={
item.icon
? item.icon(colors.accent)
: NOTE_SVG(colors.accent)
}
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
style={{
flexWrap: 'wrap',
width: '100%',
alignItems: 'center',
}}>
{item.type === 'image' ? (
<Image
source={item.icon}
style={{
width: 170,
height: 170,
}}
/>
) : item.type === 'icon' ? (
<Icon
color={item.color}
name={item.icon}
size={170}
/>
) : (
<SvgXml
xml={
item.icon
? item.icon(colors.accent)
: NOTE_SVG(colors.accent)
}
}}
/>
)}
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
style={{
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
position: 'absolute',
bottom: 25,
}}>
<View />
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
position: 'absolute',
bottom: 25,
}}>
<View />
<Button
fontSize={SIZE.md}
height={50}
width={isNext ? null : '100%'}
onPress={async () => {
if (isNext) {
carouselRef.current?.snapToItem(currentIndex + 1,true,true);
currentIndex++;
if (currentIndex === 4) {
setIsNext(false);
<Button
fontSize={SIZE.md}
height={50}
width={isNext ? null : '100%'}
onPress={async () => {
if (isNext) {
carouselRef.current?.snapToItem(
currentIndex + 1,
true,
true,
);
currentIndex++;
if (currentIndex === 4) {
setIsNext(false);
}
} else {
await hide();
await Storage.write('introCompleted', 'true');
}
} else {
await hide();
await Storage.write('introCompleted', 'true');
}
}}
style={{paddingHorizontal: 24}}
type="accent"
title={isNext ? 'Next' : 'Start taking notes'}
/>
</View>
}}
style={{paddingHorizontal: 24}}
type="accent"
title={isNext ? 'Next' : 'Start taking notes'}
/>
</View>
</Animated.View>
</Animated.View>
</Animated.View>
</Modal>
)
);
};