Nudges - Handling Invisible Containers
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 3 months ago