TouchableOpacity has been incorporated into all of my components, linked to both text and icons. In a few cases, I've noticed an odd flicker whenever the components render. I looked to see if the bottom button component was being re-rendered several times, but it isn't. I can still see the flutter even if it is just rendered once. This problem occurs in TouchableOpacity's Icon and Text situations. I looked at the possibility that there might be a problem with absolute placement. However, the button continues to flicker even when the absolute placement is removed. There is a Flatlist with the Button component in both conditions. I've removed Flatlist, but the problem persists.

Sharing the code sample:

index.tsx

import React, {useCallback} from 'react';
import {FlatList, View} from 'react-native';
import ActionButton from './Components/ActionButton';
import styles from './Styles';
import useWorkspacesHook from './Hooks/workspacesHook';

export default function index() {
  const {.... }=useWorkspacesHook();
  ....
  return (
    <View style={styles.mainContainer}>
      <FlatList
        data={workSpaces}
        renderItem={itemToRender}
        keyExtractor={keyExtractor}
        maxToRenderPerBatch={5}
      />
      <ActionButton
        editMode={enableEdit}
        enableEditMode={() => setEnableEdit(true)}
        enableSaveMode={() => setOpenAdd(true)}
        deleteEnabled={enableDelete}
        deleteWorkSpace={deleteSelected}
        closeEditDelete={closeEditSaveModal}
      />
    </View>
  );
}

Styles for index.tsx -- maincontainer

  mainContainer: {flex: 1, padding: 16},

ActionButton.tsx

import React from 'react';
import {Icon} from '@rneui/base';
import {TouchableOpacity, View} from 'react-native';
import styles from '../Styles';

export default function ActionButton({
  editMode,
  deleteEnabled,
  enableEditMode,
  enableSaveMode,
  closeEditDelete,
  deleteWorkSpace,
}: ActionButtonProps) {
  return (
    <View style={styles.buttonContainer}>
      {!editMode ? (
        <>
          <TouchableOpacity style={styles.iconButton} onPress={enableEditMode}>
            <Icon name="edit" color="white" size={20} />
          </TouchableOpacity>
          <TouchableOpacity style={styles.iconButton} onPress={enableSaveMode}>
            <Icon name="add" color="white" size={20} />
          </TouchableOpacity>
        </>
      ) : (
        <View>
          <TouchableOpacity style={styles.iconButton} onPress={closeEditDelete}>
            <Icon name="close" color="white" size={20} />
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.iconButton,
              !deleteEnabled && styles.disableIconButton,
            ]}
            disabled={!deleteEnabled}
            onPress={deleteWorkSpace}>
            <Icon name="delete" color="white" size={20} />
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}

Styles for ActionButton component

buttonContainer: {
    position: 'absolute',
    flexDirection: 'column',
    right: 20,
    bottom: 0,
  },
  iconButton: {
    width: 50,
    height: 50,
    backgroundColor: "blue",
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  disableIconButton: {
    backgroundColor: "some-light-grey",
  },

I have tried recording the video, but converting it to gif is making it too slow to miss out the flicker.

If anyone has come across something similar, any help would be appreciated since this is causing a very bad user experience.

Things that I have tired. Removed the Flatlist, removed the absolute positioning, tried with TouchableHeighlight Nothing worked.