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]
);