keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Polished animated container and homepage

Browse source
This commit is contained in:
Keannu Bernasol 2023-07-07 15:27:32 +08:00
parent 8ffb359604
commit 96df2f2f05
3 changed files with 31 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/components/AnimatedContainer/AnimatedContainer.tsx
View file

@ -9,22 +9,34 @@ export interface props {
export default function AnimatedContainer(props: props) { export default function AnimatedContainer(props: props) {
return ( return (
<View style={styles.container}> <MotiScrollView
<MotiScrollView contentContainerStyle={{
from={{ alignItems: "center",
opacity: 0, alignSelf: "center",
backgroundColor: colors.orange_1, justifyContent: "flex-start",
flex: 1, display: "flex",
}} flexDirection: "column",
animate={{ flex: 1,
opacity: 1, }}
backgroundColor: colors.blue_2, from={{
flex: 1, borderRadius: 0,
}} backgroundColor: colors.orange_2,
transition={{ type: "timing", duration: 300 }} paddingTop: 4,
> paddingBottom: 4,
{props.children} marginHorizontal: "4%",
</MotiScrollView> marginVertical: "5%",
</View> }}
animate={{
borderRadius: 15,
backgroundColor: colors.blue_2,
paddingTop: 16,
paddingBottom: 16,
marginHorizontal: "4%",
marginVertical: "5%",
}}
transition={{ type: "timing", duration: 300 }}
>
{props.children}
</MotiScrollView>
); );
} }

2
src/routes/Home/Home.tsx
View file

@ -47,7 +47,7 @@ export default function Home() {
}; };
function CustomMap() { function CustomMap() {
if (dist !== null && location !== null) { if (dist !== null && location !== null) {
if (dist <= 1) { if (dist >= 1) {
// Just switch this condition for map debugging // Just switch this condition for map debugging
return <MapView style={styles.map} initialRegion={ustpCoords} />; return <MapView style={styles.map} initialRegion={ustpCoords} />;
} else { } else {

2
src/styles.tsx
View file

@ -39,7 +39,7 @@ const styles = StyleSheet.create({
marginVertical: "5%", marginVertical: "5%",
width: "92%", width: "92%",
borderRadius: 15, borderRadius: 15,
backgroundColor: colors.blue_2, // backgroundColor: colors.blue_2,
alignItems: "center", alignItems: "center",
alignSelf: "center", alignSelf: "center",
paddingTop: 32, paddingTop: 32,