Proven Recipes for your React Native apps

import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";

const EmotionJSThemeProvider = (props: React.PropsWithChildren) => {
  const { theme } = useAppTheme();
  return <EmotionThemeProvider theme={theme}>{props.children}</EmotionThemeProvider>;
};

return (
  <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
+    <EmotionJSThemeProvider>
      <NavigationContainer ref={navigationRef} theme={navigationTheme} {...props}>
        <AppStack />
      </NavigationContainer>
+    </EmotionJSThemeProvider>
  </ThemeProvider>
);

import styled from "@emotion/native";

const MyTextComponent = styled.Text`
  margin: 10px;
  color: ${({ theme }) => theme.colors.text};
  background-color: ${({ theme }) => theme.colors.background};
`;

export const MyScreen = (props) => {
  return (
    <MyTextComponent>
      This text color and background will change when changing themes.
    </MyTextComponent>
  );
};

// Override Theme to get accurate typings for your project.
import type { Theme as AppTheme } from "app/theme";
import "@emotion/react";

declare module "@emotion/react" {
  export interface Theme extends AppTheme {}
}

const { setThemeContextOverride, themeContext } = useAppTheme();

return (
  <Button
    onPress={() => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
    }}
    text={`Switch Theme: ${themeContext}`}
  />
);