When needing to make a Scrollable View in a Canva app, you can wrap the view in a Scrollable Container component from the @canva/app-ui-kit set of components.
But, let’s say that for some reason you don’t want to use the Scrollable Container provided by Canva’s App SDK, you can use an alternative with React Native Web and the ScrollView component provided by it.
To make it work, you may first need to install React Native Web if you haven’t:
npm i react-native-webA minimal example would look like this:
import { Box, TextInput, Button, Text, Rows, TypographyCard } from "@canva/app-ui-kit";
import { ScrollView } from "react-native-web";
import "@canva/app-ui-kit/styles.css";
return(
<ScrollView style={{ maxHeight: '400px', overflowY: 'auto' }}>
<Rows spacing="1">
<Box
padding="2"
marginTop="2"
border="solid"
borderWidth="1"
background="secondary"
>
<Rows spacing="1">
<Text></Text>
</Rows>
</Box>
</Rows>
</ScrollView>
);