Context API

Global bir state tanımı oluşturup bunu herhangi bir component üzerinde kullanıp veya bunun değerini değiştirmekle ilgili çalışmalar yapacağız.

//App.js
import LangContext, { LangContextProvider } from "./src/context/LangContext";
import { ThemeContextProvider } from "./src/context/ThemeContext";
import Router from "./src/Router";

function App() {
  return (
    <LangContextProvider>
      <ThemeContextProvider>
        <Router />
      </ThemeContextProvider>
    </LangContextProvider>
  );
}

export default App;

//src/Router.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

//screens
import Home from "./screens/Home";
import Settings from "./screens/Settings";

const Stack = createNativeStackNavigator();

const Router = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Router;

//src/screens/Home.js
import { View, Text, Button, StyleSheet } from "react-native";
import React, { useContext } from "react";
import ThemeContext from "../context/ThemeContext";
import LangContext from "../context/LangContext";

const Home = ({ navigation }) => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  const { lang, setLang } = useContext(LangContext);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={styles.text}>Active Theme: {theme}</Text>
      <Text style={styles.text}>Active Language: {lang}</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} />
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate("Settings")}
      />

      <Text style={{ marginTop: 14 }}>Change Language</Text>
      <View style={styles.buttons}>
        <Button title="tr-TR" onPress={() => setLang("tr-TR")} />
        <Button title="en-US" onPress={() => setLang("en-US")} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
  },
  buttons: {
    flexDirection: "row",
  },
});

export default Home;

//src/screens/Settings.js

import { View, Text, Button, StyleSheet } from "react-native";
import React, { useContext } from "react";
import ThemeContext from "../context/ThemeContext";
import LangContext from "../context/LangContext";

const Settings = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  const { lang, setLang } = useContext(LangContext);
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={styles.text}>Active Language: {lang}</Text>
      <Text style={styles.text}>Active Theme: {theme}</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} />

      <Text style={{ marginTop: 14 }}>Change Language</Text>
      <View style={styles.buttons}>
        <Button title="tr-TR" onPress={() => setLang("tr-TR")} />
        <Button title="en-US" onPress={() => setLang("en-US")} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
  },
  buttons: {
    flexDirection: "row",
  },
});

export default Settings;

//src/context/Langcontext.js
import { createContext, useState } from "react";
const LangContext = createContext();
export const LangContextProvider = ({ children }) => {
  const [lang, setLang] = useState("tr-TR");
  const values = {
    lang,
    setLang,
  };
  return <LangContext.Provider value={values}>{children}</LangContext.Provider>;
};
export default LangContext;

//src/context/ThemeContext.js

import { createContext, useState } from "react";

const ThemeContext = createContext();

export const ThemeContextProvider = ({ children }) => {
  const [theme, setTheme] = useState("dark");

  const toggleTheme = () => {
    setTheme((prev) => (prev === "dark" ? "light" : "dark"));
  };

  const values = {
    theme,
    toggleTheme,
  };

  return (
    <ThemeContext.Provider value={values}>{children}</ThemeContext.Provider>
  );
};

export default ThemeContext;

Aşağıdaki şekilde de kullanılabilir.

//src/context/Langcontext.js
import { createContext, useContext, useState } from "react";

const LangContext = createContext();

export const LangContextProvider = ({ children }) => {
  const [lang, setLang] = useState("tr-TR");

  const values = {
    lang,
    setLang,
  };

  return <LangContext.Provider value={values}>{children}</LangContext.Provider>;
};

export const useLang = () => {
  const context = useContext(LangContext);

  if (context === undefined) {
    throw new Error("useLang hook must be call inside ThemeContextProvider");
  }

  return context;
};

//src/context/ThemeContext.js

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

export const ThemeContextProvider = ({ children }) => {
  const [theme, setTheme] = useState("dark");

  const toggleTheme = () => {
    setTheme((prev) => (prev === "dark" ? "light" : "dark"));
  };

  const values = {
    theme,
    toggleTheme,
  };

  return (
    <ThemeContext.Provider value={values}>{children}</ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const context = useContext(ThemeContext);

  if (context === undefined) {
    throw new Error("useTheme hook must be call inside ThemeContextProvider");
  }

  return context;
};

//src/screens/Home.js
import { View, Text, Button, StyleSheet } from "react-native";
import React from "react";
import { useTheme } from "../context/ThemeContext";
import { useLang } from "../context/LangContext";

const Home = ({ navigation }) => {
  const { theme, toggleTheme } = useTheme();
  const { lang, setLang } = useLang();

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={styles.text}>Active Theme: {theme}</Text>
      <Text style={styles.text}>Active Language: {lang}</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} />
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate("Settings")}
      />

      <Text style={{ marginTop: 14 }}>Change Language</Text>
      <View style={styles.buttons}>
        <Button title="tr-TR" onPress={() => setLang("tr-TR")} />
        <Button title="en-US" onPress={() => setLang("en-US")} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
  },
  buttons: {
    flexDirection: "row",
  },
});

export default Home;

//src/screens/Settings.js

import { View, Text, Button, StyleSheet } from "react-native";
import React from "react";
import { useTheme } from "../context/ThemeContext";
import { useLang } from "../context/LangContext";

const Settings = () => {
  const { theme, toggleTheme } = useTheme();
  const { lang, setLang } = useLang();
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={styles.text}>Active Language: {lang}</Text>
      <Text style={styles.text}>Active Theme: {theme}</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} />

      <Text style={{ marginTop: 14 }}>Change Language</Text>
      <View style={styles.buttons}>
        <Button title="tr-TR" onPress={() => setLang("tr-TR")} />
        <Button title="en-US" onPress={() => setLang("en-US")} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
  },
  buttons: {
    flexDirection: "row",
  },
});

export default Settings;