Android crash : Trying to remove a view index above child count

[ghost]

I am using latest version of this library in React Native. It works well in iOS but crashes with following error in Android

2020-10-16 18:40:53.307 4429-4429/com.project.android E/unknown:ReactNative: Exception in native call
    com.facebook.react.uimanager.IllegalViewOperationException: Trying to remove a view index above child count 25 view tag: 2307
     detail: View tag:2307
      children(23): [
    2167,2175,2177,2179,2187,2189,2623,2207,2209,2217,2219,2223,2229,2249,2633,2265,
    2267,2637,2275,2277,2279,2287,2433,
     ],
      indicesToRemove(1): [
    25,
     ],
      tagsToDelete(1): [
    2433,
     ]

Usage

I am simply calling the toast hook on a button click

const Component = (props) => {
    const { toast } = useToast();

    const handleClick = useCallback(() => {
        toast({
          message: 'Button Clicked',
          intent: 'ERROR',
          hideIcon: true,
          bg: colors.LIGHT_GREY,
          closeButtonBgColor: 'transparent',
        });
    }), [toast])
    return <Button onClick={handleClick} />
} 

Android build settings

ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
        supportLibVersion = "29.0.2"
        ndkVersion = "21.3.6528147"
        kotlin_version = "1.3.72"
        gradleVersion = '4.0.1'
        googleServicesVersion = "4.3.3"
    }

[jeanverster]

Hi @Mohammedatif, thanks for brining this up! I will check it out and get back to you 👌

[jeanverster]

Hi @Mohammedatif I've had a look and tried to recreate the issue using a fresh RN app and have been unable to replicate the issue.. Do you think it would be possible to send a minimal reproduction for me to have a look at?

[ghost]

Hi @jeanverster
On further investigation I figured out that this crash is happening on the screens that has scrollview or lists in them.
Screens simple UI seems to be working fine.

Attaching a sample code (extracted from the code that is crashing in the project) to replicate the issue. Clicking on the button shows the toast and then crashes in Android.

import React from 'react';
import { StyleSheet, ScrollView, Button } from 'react-native';

import { useToast } from 'react-native-styled-toast';

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    paddingLeft: 20,
    paddingRight: 12,
    paddingTop: 30,
  },
});

const contactDetails = ['Text1', 'Text2', 'Text3', 'Text4'];

const ContactDetails = () => {
  const { toast } = useToast();

  const handleClick = (index) => {
    toast({
      message: `Current index clicked ${index}`,
      intent: 'ERROR',
      hideIcon: true,
      bg: '#bdbdbd',
      closeButtonBgColor: 'transparent',
    });
  };

  return (
    <ScrollView style={styles.container}>
      {contactDetails.map((contactDetail, index) => {
        return <Button key={index} title={contactDetails} onPress={() => handleClick(index)} />;
      })}
    </ScrollView>
  );
};

export default ContactDetails;

Please let me know if further information is required for debugging the issue.

Thanks

[jeanverster]

Great, thanks! Will try with the above code and get back to you 👍