search

kuttz / SecureYourView

Sample project demonstrate how create a view that will secure from screenshots or screen recording.
32 stars 2 forks source link

How to configure for React-Native Apps #2

Closed Praveencena88 closed 5 months ago

Praveencena88 commented 1 year ago

Hi @kuttz we are using react-native to create iOS app and i'm new to swift code, can you help me in providing necessary information about configuring this screenshot disabler to the react-native app.

kuttz commented 1 year ago

@Praveencena88 I am not familiarise with react-native environment. Any way I am happy to help.

Praveencena88 commented 1 year ago

Can you guide me by saying what are the necessary code to be added to disable the screenshot

kuttz commented 1 year ago

There is no proper implementation available in iOS to prevent user from recording a specific view. But in iOS UITextField is used to input data from keyboard, it has a property called isSecureTextEntry, if it's enabled system will not let record or capture anything that render in the text field. So we can use this behaviour of the UITextField to achieve our goal.

  1. Create a isSecureTextEntry enabled UITextField 
    let field = UITextField()
field.isSecureTextEntry = true
  2. Add it to the view that we need to make secure. (self is the view reference here) 
    self.addSubview(field)
field.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
field.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
  3. Replace the view layer with the text field's layer. 
    self.layer.superlayer?.addSublayer(field.layer)
field.layer.sublayers?.first?.addSublayer(self.layer)

    Now it's ready. In which view the react-native UI renders ? If we create some thing like this view to use with react-native can we add more react components over it ? you have to find out.