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

Made AnimatedContainer scrollable

Browse source
This commit is contained in:
Keannu Bernasol 2023-07-07 14:36:01 +08:00
parent 36f083c898
commit 5729eed175
2 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,13 +9,22 @@ export interface props {
export default function AnimatedContainer(props: props) { export default function AnimatedContainer(props: props) {
return ( return (
<MotiView <View style={styles.container}>
style={styles.container} <MotiScrollView
from={{ opacity: 0, backgroundColor: colors.orange_1 }} from={{
animate={{ opacity: 1, backgroundColor: colors.blue_2 }} opacity: 0,
transition={{ type: "timing", duration: 300 }} backgroundColor: colors.orange_1,
> flex: 1,
{props.children} }}
</MotiView> animate={{
opacity: 1,
backgroundColor: colors.blue_2,
flex: 1,
}}
transition={{ type: "timing", duration: 300 }}
>
{props.children}
</MotiScrollView>
</View>
); );
} }

6
src/styles.tsx
View file

@ -32,7 +32,8 @@ const styles = StyleSheet.create({
width: "100%", width: "100%",
}, },
container: { container: {
marginTop: "5%", flex: 1,
marginVertical: "5%",
width: "92%", width: "92%",
borderRadius: 15, borderRadius: 15,
backgroundColor: colors.blue_2, backgroundColor: colors.blue_2,
@ -108,8 +109,9 @@ const styles = StyleSheet.create({
marginVertical: 6, marginVertical: 6,
}, },
map: { map: {
height: "50%", height: 512,
width: "90%", width: "90%",
alignSelf: "center",
}, },
}); });