Is There a way for pass the useState hook value out side body of the function?

Question

That's the code I wrote to describe my issue,

import React, { useState } from "react";
import { StyleSheet, View, Text, Button } from "react-native";

function HookProblem() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <View style={{ backgroundColor: darkMode ? "black" : "gray", flex: 1 }}>
      <Text style={{ color: darkMode ? "white" : "black" }}>
        {darkMode ? "That's Dark Mode" : "That's Light Mode"}
      </Text>
      <Button title="Dark Mode" onPress={() => setDarkMode(true)} />
      <Button title="Light Mode" onPress={() => setDarkMode(false)} />
    </View>
  );
}

const styles = StyleSheet.create({
  con: {
    backgroundColor: "yellow",
    flex: 1,
  },
});
export default HookProblem;

There is no problem until now and everything works very well, but the problem appears when I want to make styleSheet instead of style inline object,

Here

import React, { useState } from "react";
import { StyleSheet, View, Text, Button } from "react-native";



function HookProblem() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <View style={styles.con}>
      <Text style={styles.text}>
        {darkMode ? "That's Dark Mode" : "That's Light Mode"}
      </Text>
      <Button title="Dark Mode" onPress={() => setDarkMode(true)} />
      <Button title="Light Mode" onPress={() => setDarkMode(false)} />
    </View>
  );
}

const styles = StyleSheet.create({
  con: {
    backgroundColor: darkMode ? "black" : "gray",
    flex: 1,
  },
  text: {
    color: darkMode ? "white" : "black",
  },
});
export default HookProblem;

ReferenceError: darkMode is not defined, I want to solve this problem if it possible, I want to do something like passing the darkMode boolean outside of the body of the function. Is that possible?

score 3 · Accepted Answer · answered Feb 11 '21 at 15:11

You should be able to call the const styles in the render and create a custom hook function, like so:

import React, { useState } from "react";
import { StyleSheet, View, Text, Button } from "react-native";

function useStyles(darkMode) {
  return StyleSheet.create({
    con: {
      backgroundColor: darkMode ? "black" : "gray",
      flex: 1,
    },
    text: {
      color: darkMode ? "white" : "black",
    },
  });
}

function HookProblem() {
  const [darkMode, setDarkMode] = useState(false);
  const styles = useStyles(darkMode);

  return (
    <View style={styles.con}>
      <Text style={styles.text}>
        {darkMode ? "That's Dark Mode" : "That's Light Mode"}
      </Text>
      <Button title="Dark Mode" onPress={() => setDarkMode(true)} />
      <Button title="Light Mode" onPress={() => setDarkMode(false)} />
    </View>
  );
}

export default HookProblem;

score 0 · Answer 2 · answered Feb 11 '21 at 14:46

0

Short answer, it’s not possible to define a variable inside a function and access it outside that scope.

You should research how to create themes for a react app. I admit, I haven’t personally done this but my understanding is the theme is usually defined as a context for the whole app.

I’m not saying that’s the best way to do it, it’s just what I’ve seen online.

answered Feb 11 '21 at 14:46

christo8989

6,442
5
37
43

I know that there are better ways to do a dark theme for example useTheme form react-navigation. but I try to be very good at dealing with the state, Thanks ^_^ – Feb 11 '21 at 14:52

Is There a way for pass the useState hook value out side body of the function?

2 Answers2