@react-native-community/blur doesn't correctly on Android

Question

On Android elements wrapped in BlurVIew don't positioning right. It works on iOS devices fine. But on Android, elements wrapped in <BlurView>{children}</BlurView> run into each other. Screenshot is below

Sometimes when I change something in styles in dev mode, it works correctly, but when I build apk, bug appears again.

How can I fix it on Android?

Code

const BottomNavigationTabs: React.FC<BottomTabBarProps> = ({
  descriptors,
  state,
  navigation,
}) => {
  const focusedOptions = descriptors[state.routes[state.index].key].options;

  return (
    <>
        <BlurView blurType="light"
          blurAmount={15} style={{ height: 85, width: '100%', position: 'absolute', bottom: 0, }}>
        <View style={{ display: 'flex', flexDirection: 'row', position: 'absolute', bottom: 0, justifyContent: 'space-between' }}>
        {state.routes.map((route, index) => {
          const { options } = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;

          const isFocused = state.index === index;
          const focusedColor = isFocused ? colors.text1 : colorsOld.black;

          //Weird snippet, to render passed icon just call function with any return value, then just set color
          const icon =
            options.tabBarIcon &&
            React.cloneElement(
              //@ts-ignore
              options.tabBarIcon((props: any) => props),
              { color: focusedColor }
            );

          const onPress = () => {
            const event = navigation.emit({
              type: "tabPress",
              target: route.key,
              canPreventDefault: true,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: "tabLongPress",
              target: route.key,
            });
          };

          const tabBtn = (
            <TouchableOpacity
              accessibilityRole="button"
              accessibilityState={isFocused ? { selected: true } : {}}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              style={styles.tabButton}
              onLongPress={onLongPress}
              activeOpacity={0.7}
              key={route.key}
            >
              <View style={styles.tabItem}>
                <View style={styles.tabItemIcon}>{icon}</View>
                <Text style={{ ...styles.tabItemLabel, color: focusedColor }}>
                  {label}
                </Text>
              </View>
            </TouchableOpacity>
          );
          return tabBtn;
        })}
        </View>
        </BlurView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 9,
    paddingBottom: 15,
  },
  tabButton: {
    paddingTop: 8,
    paddingBottom: 15,
    paddingHorizontal: 10,
    borderRadius: 10,
    zIndex: 10000
  },
  tabsContainer: {
    backgroundColor: colors.secondaryBg(0.5),
    width: "100%",
    left: 0,
    bottom: 0,
    zIndex: 999,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
  },
  tabItem: {
    justifyContent: "center",
    alignItems: "center",
  },
  tabItemIcon: {
    marginBottom: 6,
  },
  tabItemLabel: {
    fontSize: 12,
    fontFamily: "Inter-Medium",
  },
});