1

enter image description here

enter image description here

I take with useSelector the status of the theme type I need, which I find in settings.item.colorScheme.

I have a BottomSheet which allows me that clicking on the selected language to change it, this change changes the status of redux so also of settings taken with useSelector.

The problem is that the state inside the useCallback doesn't change, at least it only changes when the bottomSheet menu is closed and then reopened.

How can I do that inside what is defined inside useCallback see the updated status?

I tried to pass it as an argument to the useCallback, but it doesn't work.

Code:

  const dispatch = useDispatch();
  const settings = useSelector((state) => state.settings);
  const { present, dismiss } = useBottomSheetModal();

  const theme = [
    { title: 'Light', value: 'light' },
    { title: 'Dark', value: 'dark' }
  ];

  const bottomSheetTheme = useCallback(
    (newValue, id) => {
      present(
        <View style={{ flex: 1, backgroundColor }}>
          <Text>{settings.item.colorScheme}</Text>
          {theme.map(({ title, value }) => {
            return (
              <TouchableWithoutFeedback
                key={value}
                onPress={() => {
                  //dismiss();
                  changeButtonTheme(value);
                }}>
                <View
                  style={[
                    Layout.row,
                    Layout.rowHCenter,
                    Gutters.tinyVMargin,
                    Gutters.tinyHMargin,
                  ]}>
                  <View style={[Layout.fill]}>
                    <Text>{title}</Text>
                  </View>
                  {settings.item.colorScheme === value ? (
                    <Svgs.RadioButton size={32} color={backgroundColor} />
                  ) : (
                    <Svgs.RadioButtonEmpty size={32} color={backgroundColor} />
                  )}
                </View>
              </TouchableWithoutFeedback>
            );
          })}
        </View>,
        {
          snapPoints: ['25%'],
          animationDuration: 10,
          overlayComponent: BottomSheetOverlay,
          overlayOpacity: 0.5,
          dismissOnOverlayPress: true,
          //handleComponent: handle,
          //backgroundComponent: BlurredBackground,
          //onChange: handleChange,
        }
      );
    },
    [settings]
  );
Paul
  • 3,644
  • 9
  • 47
  • 113

0 Answers0