Is it possible show an ActivityIndicator in the header when asyncstorage?

Question

I want to know if it's possible to show an ActivityIndicator in the header of the Stack navigator everytimes I change the storage using the Jotai library?

Answer 1

Yes, you can you can use navigation.setOption to achieve such behavior

here an example

const HomeScreen = ({navigation}) => {

  const [count, setCount] = useAtom(countAtom);
  const [isLoading,setIsLoading] = useState(false)


   const renderHeaderRight = React.useCallback(() => {

    return (
      <Pressable onPress={undefined}>
        {isLoading ? <ActivityIndicator /> :  <Text style={{marginHorizontal:12}}>
          clear
        </Text>}
       
      </Pressable>
    );
  }, [isLoading]);


   useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: renderHeaderRight,
    });
  }, [navigation, renderHeaderRight]);


  const onPressCount =  async () => {
    setCount((c) => c + 1);
    setIsLoading(true);
    await sleep(500);
    setIsLoading(false);
  }

  return (
    <View>
      <Text>Home Screen</Text>
      <Text>{count}</Text>
      <Button onPress={onPressCount} title='press me' />
    </View>
  );
};

you can find more options for navigation in docs