The status is not updated internally, only when you reopen the BottomSheetModal the status is updated.
import React, {
useState,
useEffect,
useCallback,
useMemo,
useRef,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { View, StyleSheet, Image, Dimensions } from 'react-native';
import { Text, Button, RadioButton } from 'react-native-paper';
import {
Common,
Fonts,
Gutters,
Layout,
Images,
Colors,
ColorsDarkMode,
} from '@/Theme';
import { useTranslation } from 'react-i18next';
import Settings from '@/Store/Settings/Init';
const { width: SCREEN_WIDTH } = Dimensions.get('screen');
import AppIntroSlider from 'react-native-app-intro-slider';
import {
BottomSheetModalProvider,
useBottomSheetModal,
BottomSheetOverlay,
} from '@gorhom/bottom-sheet';
import withModalProvider from './withModalProvider';
import BlurredBackground from './BlurredBackground';
const styles = StyleSheet.create({
slide: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
image: {
width: 320,
height: 320,
marginVertical: 32,
resizeMode: 'stretch',
},
text: {
color: 'rgba(255, 255, 255, 0.8)',
textAlign: 'center',
},
title: {
fontSize: 22,
color: 'white',
textAlign: 'center',
},
blurView: {
...StyleSheet.absoluteFillObject,
},
container: {
...StyleSheet.absoluteFillObject,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
},
androidContainer: {
backgroundColor: 'rgba(255,255,255, 0.95)',
},
indicator: {
alignSelf: 'center',
width: (8 * SCREEN_WIDTH) / 100,
height: 5,
borderRadius: 4,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
});
const IndexInstallationContainer = (props) => {
const { t } = useTranslation();
const dispatch = useDispatch();
const settings = useSelector((state) => state.settings);
const { present } = useBottomSheetModal();
const handlePresentPress = useCallback(() => {
present(
<View style={{ flex: 1, backgroundColor }}>
<Text>{settings.item.colorScheme}</Text>
<RadioButton.Group
onValueChange={(newValue) => changeButtonTheme(newValue)}
value={settings.item.colorScheme}>
<View style={(Layout.row, Layout.rowHCenter)}>
<RadioButton value="light" />
<Text>Light</Text>
</View>
<View style={(Layout.row, Layout.rowHCenter)}>
<RadioButton value="dark" />
<Text>Dark</Text>
</View>
</RadioButton.Group>
</View>,
{
snapPoints: ['20%'],
animationDuration: 300,
overlayComponent: BottomSheetOverlay,
overlayOpacity: 0.5,
dismissOnOverlayPress: true,
handleComponent: handle,
//backgroundComponent: BlurredBackground,
//onChange: handleChange,
}
);
}, [present, dispatch, settings]);
const slides = [
{
key: 'one',
title: t('welcome'),
text: '',
image: Images.logo,
backgroundColor: '#2196f3',
},
{
key: 'two',
title: t('change.language'),
text: '',
backgroundColor: '#ffc107',
},
{
key: 'three',
title: t('change.mode'),
text: '',
backgroundColor: '#4caf50',
},
];
const changeTheme = () => {
dispatch(
Settings.action({
colorScheme: settings.item.colorScheme === 'dark' ? 'ligth' : 'dark',
})
);
};
const changeButtonTheme = (colorScheme) => {
dispatch(Settings.action({ colorScheme }));
};
const openBottom = () => setState((prev) => ({ ...prev, open: !prev.open }));
const b = (
<Button
style={[Gutters.largeHMargin, Gutters.largeBMargin]}
raised
mode="contained"
onPress={handlePresentPress}>
{t('actions.change')}
</Button>
);
const _renderItem = ({ item }) => {
return (
<View style={[styles.slide, { backgroundColor: item.backgroundColor }]}>
{item.image && <Image source={item.image} style={styles.image} />}
<Text style={styles.title}>{item.title}</Text>
{item.key === 'three' && b}
<Text style={styles.text}>{item.text}</Text>
</View>
);
};
const _onDone = () => {
//console.log(props)
props.navigation.navigate('Login');
};
const [state, setState] = useState({
open: false,
});
const { open } = state;
const backgroundColor =
settings.item.colorScheme === 'dark'
? ColorsDarkMode.backgroundPrimary
: Colors.backgroundPrimary;
const handle = () => {
return (
<View
style={{
paddingHorizontal: 16,
paddingVertical: 5,
backgroundColor,
}}>
<View
style={[
styles.indicator,
{
backgroundColor:
settings.item.colorScheme === 'light'
? 'rgba(0, 0, 0, 0.25)'
: 'rgba(255, 255, 255, 0.25)',
},
]}
/>
</View>
);
};
return (
<>
<AppIntroSlider
renderItem={_renderItem}
data={slides}
onDone={_onDone}
nextLabel={t('next')}
doneLabel={t('done')}
/>
</>
);
};
export default withModalProvider(IndexInstallationContainer);