SketchCanvas not displayed because it is too large to fit into a software layer (or drawing cache),

[metinilhan]

` <ScrollView ref={(ref) => { scrollRef = ref; }} scrollEnabled={selectedEditorButton === 0} style={{ ...QuestionWidthStyle }} contentContainerStyle={{ flexGrow: 1, padding: FontSize.size15, }}

{/ In order to prevent canvas to be on top of all views, they added this view. If canvas is on top, scroll behavior is disrupted. /}

      {selectedEditorButton === 0 && (
        <View
          style={{
            height: '100%',
            width: '100%',
            position: 'absolute',
            top: 0,
            left: 0,
            zIndex: 4,
          }}
        />
      )}

{!loading? <FastImage onLoadEnd={() => { setDraw(); setLoading(false); }} style={{ ...styleSheet.imageStyle, width: '100%', height: undefined, aspectRatio: getImageAspectRatio(question.mainImage), }} onError={(error) => { alert(error.message); }} source={{ uri: question.mainImage.Url ? question.mainImage.Url : placeholderUrl, }} resizeMode={FastImage.resizeMode.contain} /> :null} <SketchCanvas ref={(ref) => (canvas = ref)} style={{ zIndex: selectedEditorButton === 0 ? 0 : 1, position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, }} strokeColor={color} strokeWidth={ selectedEditorButton === 1 ? penThickness : eraserThickness } touchEnabled={selectedEditorButton !== 0} touch onStrokeStart={onStrokeStart} /> `