CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativeexpo
samuel
samuel

Reputation: 487

What is {...props} and how to get my function from other

I'm trying to learn react native and especially react navigation v5.

According to this topic: https://reactnavigation.org/docs/themes/#using-the-current-theme-in-your-own-components, I try to make a dark mode but I don't understand how to call my toggleTheme() function in the TouchableRipple.

My App.js :

const [isDarkTheme, setIsDarkTheme] = React.useState(false);

const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme;

function toggleTheme() {
    setIsDarkTheme(isDark => !isDark);
}

return (
    <PaperProvider theme={theme}>
        <NavigationContainer theme={theme}>
            <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
                    //{...other things...}
            </Drawer.Navigator>
        </NavigationContainer>
    </PaperProvider>
);

My DrawerContent.js :

export function DrawerContent(props) {
    const paperTheme = useTheme();

    //{...other things...}

    <DrawerContentScrollView {...props}>
        //{...other things...}
        <Drawer.Section title="Préférences">
                <TouchableRipple onPress={props.toggleTheme}>
                    <View style={styles.preferences}>
                        <Text>Dark Theme</Text>
                        <View pointerEvents="none">
                            <Switch value={paperTheme.dark} />
                        </View>
                    </View>
                </TouchableRipple>
    //{...other things...}

Accoding to the topic, If I call onPress={props.toggleTheme} the darktheme will appear, but this is not working, So how to call this function from App.js in DrawerContent.js

The toggle is moving if I set <Switch value={!paperTheme.dark} so useTheme(); seems to be working.

And last question, what is {...props}, I can't log it because he return out of memory.

Thanks for people who can help me to understand this!

Upvotes: 1

Views: 338

Answers (1)

developer
developer

Reputation: 728

Add it to: <DrawerContent {...props} />

e.g. <DrawerContent {...props} toggleTheme={toggleTheme} />

it will then appear as a function reference in the props of DrawerContent as props.toggleTheme

const [isDarkTheme, setIsDarkTheme] = React.useState(false);

const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme;

function toggleTheme() {
    setIsDarkTheme(isDark => !isDark);
}

return (
    <PaperProvider theme={theme}>
        <NavigationContainer theme={theme}>
            <Drawer.Navigator drawerContent={props => <DrawerContent {...props} toggleTheme={toggleTheme} />}>
                    //{...other things...}
            </Drawer.Navigator>
        </NavigationContainer>
    </PaperProvider>
);

Upvotes: 1

Related Questions