dimitar/mobilemk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
Dimitar765 2024-12-23 18:02:37 +01:00
parent 7c686d34a9
commit c5c49ef186
2 changed files with 33 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
app/(tabs)/index.tsx
View File

@ -1,63 +1,30 @@
import { Image, StyleSheet, Platform } from 'react-native'; import { Image, StyleSheet, Platform } from "react-native";
import { HelloWave } from '@/components/HelloWave'; import { HelloWave } from "@/components/HelloWave";
import ParallaxScrollView from '@/components/ParallaxScrollView'; import ParallaxScrollView from "@/components/ParallaxScrollView";
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from "@/components/ThemedView";
export default function HomeScreen() { export default function HomeScreen() {
return ( return (
<ParallaxScrollView <ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }} headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
headerImage={ headerImage={
<Image <Image
source={require('@/assets/images/partial-react-logo.png')} source={require("@/assets/images/partial-react-logo.png")}
style={styles.reactLogo} style={styles.reactLogo}
/> />
}> }
<ThemedView style={styles.titleContainer}> >
<ThemedText type="title">Welcome!</ThemedText> <ThemedText>Welcome to Mobile.mk</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText>
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
Press{' '}
<ThemedText type="defaultSemiBold">
{Platform.select({
ios: 'cmd + d',
android: 'cmd + m',
web: 'F12'
})}
</ThemedText>{' '}
to open developer tools.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
<ThemedText>
Tap the Explore tab to learn more about what's included in this starter app.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
<ThemedText>
When you're ready, run{' '}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
</ThemedText>
</ThemedView>
</ParallaxScrollView> </ParallaxScrollView>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
titleContainer: { titleContainer: {
flexDirection: 'row', flexDirection: "row",
alignItems: 'center', alignItems: "center",
gap: 8, gap: 8,
}, },
stepContainer: { stepContainer: {
@ -69,6 +36,6 @@ const styles = StyleSheet.create({
width: 290, width: 290,
bottom: 0, bottom: 0,
left: 0, left: 0,
position: 'absolute', position: "absolute",
}, },
}); });

34
components/ParallaxScrollView.tsx
View File

@ -1,17 +1,17 @@
import type { PropsWithChildren, ReactElement } from 'react'; import type { PropsWithChildren, ReactElement } from "react";
import { StyleSheet } from 'react-native'; import { StyleSheet } from "react-native";
import Animated, { import Animated, {
interpolate, interpolate,
useAnimatedRef, useAnimatedRef,
useAnimatedStyle, useAnimatedStyle,
useScrollViewOffset, useScrollViewOffset,
} from 'react-native-reanimated'; } from "react-native-reanimated";
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from "@/components/ThemedView";
import { useBottomTabOverflow } from '@/components/ui/TabBarBackground'; import { useBottomTabOverflow } from "@/components/ui/TabBarBackground";
import { useColorScheme } from '@/hooks/useColorScheme'; import { useColorScheme } from "@/hooks/useColorScheme";
const HEADER_HEIGHT = 250; const HEADER_HEIGHT = 150;
type Props = PropsWithChildren<{ type Props = PropsWithChildren<{
headerImage: ReactElement; headerImage: ReactElement;
@ -23,7 +23,7 @@ export default function ParallaxScrollView({
headerImage, headerImage,
headerBackgroundColor, headerBackgroundColor,
}: Props) { }: Props) {
const colorScheme = useColorScheme() ?? 'light'; const colorScheme = useColorScheme() ?? "light";
const scrollRef = useAnimatedRef<Animated.ScrollView>(); const scrollRef = useAnimatedRef<Animated.ScrollView>();
const scrollOffset = useScrollViewOffset(scrollRef); const scrollOffset = useScrollViewOffset(scrollRef);
const bottom = useBottomTabOverflow(); const bottom = useBottomTabOverflow();
@ -34,11 +34,15 @@ export default function ParallaxScrollView({
translateY: interpolate( translateY: interpolate(
scrollOffset.value, scrollOffset.value,
[-HEADER_HEIGHT, 0, HEADER_HEIGHT], [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75] [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
), ),
}, },
{ {
scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]), scale: interpolate(
scrollOffset.value,
[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
[2, 1, 1],
),
}, },
], ],
}; };
@ -50,13 +54,15 @@ export default function ParallaxScrollView({
ref={scrollRef} ref={scrollRef}
scrollEventThrottle={16} scrollEventThrottle={16}
scrollIndicatorInsets={{ bottom }} scrollIndicatorInsets={{ bottom }}
contentContainerStyle={{ paddingBottom: bottom }}> contentContainerStyle={{ paddingBottom: bottom }}
>
<Animated.View <Animated.View
style={[ style={[
styles.header, styles.header,
{ backgroundColor: headerBackgroundColor[colorScheme] }, { backgroundColor: headerBackgroundColor[colorScheme] },
headerAnimatedStyle, headerAnimatedStyle,
]}> ]}
>
{headerImage} {headerImage}
</Animated.View> </Animated.View>
<ThemedView style={styles.content}>{children}</ThemedView> <ThemedView style={styles.content}>{children}</ThemedView>
@ -71,12 +77,12 @@ const styles = StyleSheet.create({
}, },
header: { header: {
height: HEADER_HEIGHT, height: HEADER_HEIGHT,
overflow: 'hidden', overflow: "hidden",
}, },
content: { content: {
flex: 1, flex: 1,
padding: 32, padding: 32,
gap: 16, gap: 16,
overflow: 'hidden', overflow: "hidden",
}, },
}); });