Scrollview does not Work on Android when using a container with Skia

[raulgonzalezdev]

Hi Comuinidad, first let me congratulate you for such a great job with this framework, I have been testing and you can really do amazing things with these libraries, I saw an example published by Mr. William Candillon, and I have been testing to learn the proper use of his library, but I have noticed that in Android when I use some of the skia libraries, I can't see any of the skia libraries, but I can't see any of the skia libraries in Android.
import { Canvas, Fill, Text, rect, rrect, Box, BoxShadow, Paint } from "@shopify/react-native-skia";

combined with a react-navite scrollview this on android does not scroll, I have tried either way and have not been able to get it to work, however I have seen this example work on iOs and it works perfectly.

I attach part of the code to see if you can help me.

//in this fragment I use the ScrollView but before a figure is drawn in the Clock component
`
import { View, useWindowDimensions, ScrollView, Text , SafeAreaView} from "react-native";
import AlarmContainer from "../Alarm/AlarmContainer";
import Clock from "../Clock/Clock";

export default function Reloj() {
const { width, height } = useWindowDimensions();
return (
<>

<ScrollView nestedScrollEnabled={true} contentContainerStyle={{flex: 1, justifyContent: 'flex-end', marginBottom: 5, height:height}}>
<AlarmContainer alarm={"07: 30"}/>
<AlarmContainer alarm={"09: 40"}/>
<AlarmContainer alarm={"22: 00"}/>

</>
);
}

import { View, Image } from "react-native";
import ClockBack from "./ClockBack";

export default function Clock() {
return (


<Image source={require('../../../assets/1.png')}
style={{ width: 92, height: 85, position: 'absolute', top: 120, left: 155 }}
/>

)
}

import { View, useWindowDimensions } from "react-native";
import { Canvas, Fill, Text, rect, rrect, Box, BoxShadow, Paint } from "@shopify/react-native-skia";

export default function ClockBack() {
const { width, height } = useWindowDimensions();
return (
<Canvas style={{ width: width, height: height, zIndex: -1, position: 'absolute' }}>

<Box box={rrect(rect(width / 2 - 100, 70, 200, 200), 100, 100)} color="#E6E9EF">

<Box box={rrect(rect(width / 2 - 87.5, 84, 175, 175), 100, 100)} color="#EEF0F5">

<Box box={rrect(rect(width / 2 - 2.5, 100, 5, 15), 10, 10)} color="#30"/>
<Box box={rrect(rect(width / 2 - 2.5, 230, 5, 15), 10, 10)} color="#30"/>
<Box box={rrect(rect(width / 2 - 70, 170, 15, 5), 10, 10)} color="#30"/>
<Box box={rrect(rect(width / 2 + 60, 170, 15, 5), 10, 10)} color="#30"/>

);
}

import { useState } from 'react';
import { Switch, View, Text } from "react-native";
import AlarmBack from "./AlarmBack";

export default function AlarmContainer({ alarm }) {
const [alarmOn, setAlarmOn] = useState(false);
return (

    <View style={{marginBottom: 50}}>
        

        <AlarmBack />
        <View style={{flexDirection: 'row', width: '100%', justifyContent: 'space-around', alignItems: 'center', marginTop: 15}}>
            <Text style={{fontSize: 32, fontWeight: '500', color: 'gray'}}>{alarm}</Text>
            <Switch value={alarmOn} onValueChange={() => setAlarmOn(!alarmOn)} />
        </View>
        
    </View>
   
)

}

import { View, useWindowDimensions } from "react-native";
import { Canvas, rect, rrect, Box, BoxShadow, } from "@shopify/react-native-skia";

export default function AlarmBack() {
const { width, height } = useWindowDimensions();
return (
<View style={{position: 'absolute'}}>
<Canvas style={{ width: width, height: 100 }}>
<Box box={rrect(rect(width / 2 - 160, 0, 320, 75), 20, 20)} color="#EEF0F5">





);
}
`

I want to point out that all the skia effects look fantastic and I would like to implement this great library in my projects, unfortunately I do not have the Mac technology to develop so I do it on Linux ubuntu and test the applications on Android both in the emulator and on android phones, if you could try and see if it is some order in the arrangement of the elements would be fantastic.

[wcandillon]

Could the issue be simply the positioning of the parent view of the Canvas (position: 'absolute). If you are still having the issue, a small reproducible example would be fantastic.

[raulgonzalezdev]

Thanks, Williams, for replying, I did what you indicated I removed the value 'absolute' from but it still doesn't work I leave you the link to the repository to see if you could verify.

https://github.com/gqcryptoraul/clock-neumorphic

As I said before, in IOS works perfectly, and if I make a ScrollView outside the containers that use Skia if it works without the beauty that applies this great framework, that's why I'm so interested in learning.

Another thing this time a suggestion that I imagine you are already working on it, many of your example videos in your channel, the repositories use deprecated versions of Expo and there is also this library of yours (react-native-redash), but in the documentation does not indicate by which methods have been replaced some functions in the new version compatible with Expo.

I am very interested in using these effects in my projects and I would like to subscribe to your paid site, to have access to this great knowledge platform. Although I have a lot in the Tech world, I am relatively new to these platforms and it would be great to learn from the best.

I apologize for the length of the text, hehehehehe, I am Venezuelan and it is common in my country to try to explain many times the same thing, hehehehe.

Sincerely, Raul Gonzalez