local image path not working

[CojocaruCristi]

is a way to put the path of the local image for the scratch background instead of the URL ?

[abhisekpadhi]

Image.resolveAssetSource will resolve a local image path into this object {uri, width, height}. uri can be used for imageUrl prop in ScratchView.

Working example with RN 0.66.4 and ScratchView 1.2.1:

// @ts-ignore
import cardBg from './path/to/local/image/scratchCardBg.png';

const [scratched, setScratched] = useState(false);

...

<View style={styles.container}>
            <Text style={{fontFamily: FONTS.bodyBold, fontSize: 62, marginBottom: 20}}> ₹10 </Text>
            <Text style={{fontFamily: FONTS.body, fontSize: 16}}> CASHBACK RECEIVED </Text>
            {!scratched ? (
                <ScratchView
                    id={1} // ScratchView id (Optional)
                    brushSize={40} // Default is 10% of the smallest dimension (width/height)
                    threshold={30} // Report full scratch after 70 percentage, change as you see fit. Default is 50
                    fadeOut={false} // Disable the fade out animation when scratch is done. Default is true
                    placeholderColor="#AAAAAA" // Scratch color while image is loading (or while image not present)
                    imageUrl={Image.resolveAssetSource(cardBg).uri} // A url to your image (Optional)
                    resizeMode="cover" // Resize the image to fit or fill the scratch view. Default is stretch
                    onScratchProgressChanged={onScratchProgressChanged} // Scratch progress event while scratching
                    onScratchDone={onScratchDone} // Scratch is done event
                />
            ) : (
                <Text>Scratched</Text>
            )}
        </View>

...

const styles = StyleSheet.create({
    container: {
        width: 300,
        height: 300,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ffc1c1',
        borderRadius: 10,
    },
});