Instabug / Instabug-React-Native

In-app feedback and bug reporting tool for React Native
https://instabug.com/platforms/react-native
MIT License
312 stars 99 forks source link

Adding Private View not working as expected in Android #806

Closed geyserz closed 2 years ago

geyserz commented 2 years ago

Steps to Reproduce the Problem

  1. Using the react native cli, create a new project
  2. In the main App.js initialize instabug
  3. create an input field and assign a ref to that input
  4. Using the function addPrivateView that those refs
  5. Run the app and try to record a video.

Expected Behavior

Both ios and android should hide the content of those inputs.

Actual Behavior

iOS: works as expected. Android: no data obfuscation happens; inputs entries are showing in the recording.

Instabug integration code

const App: () => Node = () => {
  const [text, onChangeText] = React.useState('');
  const [number, onChangeNumber] = React.useState(null);

  const text1Ref = useRef();
  const text2Ref = useRef();

  useEffect(() => {
    Instabug.start('token', [Instabug.invocationEvent.shake]);

    Instabug.addPrivateView(text1Ref.current);
    Instabug.addPrivateView(text2Ref.current);
    // Also adding both refs in the same call Instabug.addPrivateView(ref1, ref2), as the docs said, doesn't work either; the second input does not show as private
  }, []);

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        ref={text1Ref}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
        ref={text2Ref}
      />
      <Pressable
        onPress={() => Instabug?.show()}
        style={{
          backgroundColor: 'gray',
          margin: 12,
          borderWidth: 1,
          padding: 10,
          borderRadius: 5,
          alignItems: 'center',
        }}>
        <Text>Open Instabug</Text>
      </Pressable>
    </SafeAreaView>
  );
};

SDK Version

instabug-reactnative: 11.3.0 note: I was able to replicate this in 11.2.0 as well

React Native, iOS and Android Versions

RN: 0.70.1 note: I was able to replicate this in 0.69.0 as well

Device Model

iPhone 14 Pro Max Pixel 4 Android 13

[Optional] Project That Reproduces the Issue

rn-instabug-privateview

Video

https://user-images.githubusercontent.com/13068681/195450103-a450a7e7-18d5-4303-9355-3488bbe2cd7e.mov

DavidMina96 commented 2 years ago

@geyserz thanks a lot for reporting this and providing very detailed issue reproduction steps along with a sample project.

I'd like to clarify that it's currently the expected behaviour that private views don't work with screen recordings on Android due to limitations with media projection.

Please feel free to re-open the issue if you have any further inquiries at all.

geyserz commented 2 years ago

Hi @DavidMina96, since this is a limitation of the library, do you have any suggestion on how I can protect credit card fields in android?

DavidMina96 commented 2 years ago

@geyserz Well, as the limitation is only with screen recordings, I wonder if disabling this attachment type only on Android would be an option for you.