gbumps / react-native-screenguard

A Native screenshot blocking library for React-Native developer, with background customizable after captured. Screenshot detector are also supported.
https://gbumps.github.io/react-native-screenguard/
MIT License
231 stars 28 forks source link

(beta) registerWithImage not working on iOS #37

Closed nhhynd closed 11 months ago

nhhynd commented 11 months ago

Only worked "backgroundColor" I can't see the image

System:
  OS: macOS 13.6.3
  CPU: (10) arm64 Apple M1 Max
  Memory: 4.70 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.5.0
    path: /opt/homebrew/bin/node
  Yarn: Not Found
  npm:
    version: 10.2.4
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 34.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.11005911
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.0
    wanted: 0.72.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false
gbumps commented 11 months ago

Have you install the beta version yet ? Cause this is for beta version only!

Reference

nhhynd commented 11 months ago

Have you install the beta version yet ? Cause this is for beta version only!

Reference

I've installed v1.0.4-beta

gbumps commented 11 months ago

Please make sure the image url is correct and works normally. I've tested all images, still work fine though.

Or describe more detailed on how you've implemented it here, image or screen recording of how the issue occurred.

And one more thing is the url must be a network image url https://, as local url isn't supported yet. I'll try to implement it at the next update soon.

nhhynd commented 11 months ago

Please make sure the image url is correct and works normally. I've tested all images, still work fine though.

Or describe more detailed on how you've implemented it here, image or screen recording of how the issue occurred.

And one more thing is the url must be a network image url https://, as local url isn't supported yet. I'll try to implement it at the next update soon.

I excuted command "npx react-native@latest init AwesomeProject" and "npm install react-native-screenguard@beta --save"

env iOS: 16.1.2 iPhone 11 Pro Max

my App.tsx code

import React from 'react';
import {
  Text,
  View,
} from 'react-native';
import ScreenGuardModule from 'react-native-screenguard';

function App(): React.JSX.Element {
  React.useEffect(() => {
    const data = {
      height: 150,
      width: 200,
      uri: 'https://www.icegif.com/wp-content/uploads/2022/09/icegif-386.gif',
      backgroundColor: '#d31e1e',
      alignment: 5 // Alignment.centerRight
    };

    ScreenGuardModule.registerWithImage(
    data,
    () => {
      console.log('123');
    });
  }, []);

  return (
    <View style={{flex: 1, backgroundColor: '#fff'}}>
      <Text>sadfasdfasdfda</Text>
    </View>
  );
}

export default App;

backgroundColor worked for me, but I couldn't see the image.

Thank you for your hard work.

gbumps commented 11 months ago

Well, I've checked for both iOS 17 and iOS 16.1. All worked as expected. Maybe you should double check the internet connection, or try with a smaller image size (< 1 MB), try with PNG or JPEG......

This is my test

https://github.com/gbumps/react-native-screenguard/assets/16846439/4693ea48-46d5-4d23-8e4f-9744c1413583

Thanks to your issue, I've discovered another problem with the GIF image. Seems like it's not animated but stand still like a normal image.

Also, a lot of options for controlling the image will be introduced on next beta released.