User GuideDeveloper GuideTechnology Partners
Developer Guide
Blog

Nudges - Handling Invisible Containers

Suggest Edits

If there is an invisible container, please follow the below steps for Product Experience SDK to ignore that container:

Steps for Android

Please follow the below steps for ignoring the invisible containers.

Step 1: Add a file named tags.xml in the values folder of resources.

Step 2: Add the following lines in tags.xml:

<resources>
    <item name="hansel_ignore_view" type="id"/>
</resources>

Step 3: Provide a nativeID to the invisible react-native container:

<View nativeID={'hansel_ignore_container'} style={styles.transparentView} pointerEvents="none" />

Step 4: Set the native tag to the container marked in the Step 3 above by adding the following code in the onCreate method of the application class:

Set<String> nativeIdSet = new HashSet<>();
nativeIdSet.add("hansel_ignore_container");
ReactFindViewUtil.addViewsListener(new ReactFindViewUtil.OnMultipleViewsFoundListener() {
    @Override
      public void onViewFound(final View view, String nativeID) {
      	view.setTag(R.id.hansel_ignore_view,true);
      }
  }, nativeIdSet);

Step for iOS

📘

Support for invisible container for iOS is available from smartech-reactnative-nudges 1.0.13 and iOS SDK 8.5.23 onwards

Step 1: Provide a nativeID to the invisible react-native container:

<View nativeID={'hansel_ignore_container'} style={styles.transparentView} pointerEvents="none" />

Step 2- Set the native tag to the container marked in the Step 3 above by adding the following code in the useEffect/componentDidMount or once the screen is loaded on the Javascript code of your React Native screen.

NativeModules.HanselRn.setNativeID()

Handling the navigation drawer overlay 3rd party library:

📘

Support for invisible container handling in the navigation drawer is available from smartech-reactnative-nudges 1.0.13 and iOS SDK 8.5.23 onwards

Step 1: Add the tag as the parent of NavigationContainer to invisible the drawer navigation overlay container with nativeID and testID props:

<View style={{flex:1}} testID={'4#1'} nativeID = {'hansel_ignore_view_overlay'}> 
</View>

For example: Below is a sample code

<View style = {{flex:1}} testID={'4#1'} nativeID = {'hansel_ignore_view_overlay'}>
      <NavigationContainer >
        <Drawer.Navigator >
          <Drawer.Screen />
          <Drawer.Screen />
        </Drawer.Navigator>
    </NavigationContainer>
    </View>

🚧

Note

If you are already using the tag around NavigationContainer or Drawer.Navigator, then you can simply add the testID and nativeID props to it. In this case, there is no need to add an extra tag.

Step 2: Set the native tag to the container marked in the Step 3 above
For Android: Add the following code in the onCreate method of the application class:

Set<String> nativeIdSet = new HashSet<>();
    nativeIdSet.add("hansel_ignore_view_overlay");
    nativeIdSet.add("hansel_ignore_view");

    ReactFindViewUtil.addViewsListener(new ReactFindViewUtil.OnMultipleViewsFoundListener() {
        @Override
        public void onViewFound(final View view, String nativeID) {
            if (nativeID.equals("hansel_ignore_view_overlay")) {
                String[] values = view.getTag().toString().split("#");
                int parentsLayerCount = Integer.parseInt(values[0]);
                int childLayerIndex;
                if (values.length < 2 || values[1].isEmpty()) {
                    childLayerIndex = 0;
                } else {
                    childLayerIndex = Integer.parseInt(values[1]);
                }
                HanselRn.setHanselIgnoreViewTag(view, parentsLayerCount, childLayerIndex);
            }else{
                view.setTag(io.hansel.react.R.id.hansel_ignore_view, true);
            }
        }
    }, nativeIdSet);

For iOS - Set the native tag to the container marked in the Step 1 above by adding the following code in the useEffect/componentDidMount or once the screen is loaded on the Javascript code of your React Native screen.

NativeModules.HanselRn.setNativeID()

Updated 5 months ago