Interview Preparations

To create multiple apps within a single React Native app, each with a different color scheme, you can use a combination of theming and component styling. This allows you to customize the appearance of each "sub-app" independently. Below is a step-by-step guide:

1. Install Dependencies:

If you haven't already, install a theming library that allows you to switch themes dynamically. One such library is react-native-paper with the react-native-paper-theming package.

npm install react-native-paper react-native-paper-theming

2. Create Theme Files:

Create separate theme files for each sub-app. For example, you can have NikeTheme.js and ReebokTheme.js. Define the color schemes and any other styling variables in these theme files.

// NikeTheme.js
import { DefaultTheme } from "react-native-paper";
 
const NikeTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: "blue",
    accent: "orange",
    // Add other custom colors as needed
  },
};
 
export default NikeTheme;

// ReebokTheme.js
import { DefaultTheme } from "react-native-paper";
 
const ReebokTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: "red",
    accent: "yellow",
    // Add other custom colors as needed
  },
};
 
export default ReebokTheme;

3. ThemeProvider Component:

Create a ThemeProvider component that will manage the active theme for your entire app.

// ThemeProvider.js
import React, { createContext, useContext, useState } from "react";
import { Provider as PaperProvider } from "react-native-paper";
import NikeTheme from "./NikeTheme"; // Import your theme files
import ReebokTheme from "./ReebokTheme";
 
const ThemeContext = createContext();
 
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(NikeTheme); // Default to NikeTheme
 
  const toggleTheme = () => {
    setTheme((prevTheme) =>
      prevTheme === NikeTheme ? ReebokTheme : NikeTheme
    );
  };
 
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <PaperProvider theme={theme}>{children}</PaperProvider>
    </ThemeContext.Provider>
  );
};
 
const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};
 
export { ThemeProvider, useTheme };

4. Wrap Your App with the ThemeProvider:

In your App.js or the main entry point of your app, wrap your entire app with the ThemeProvider.

// App.js
import React from "react";
import { ThemeProvider } from "./ThemeProvider";
import MainApp from "./MainApp"; // Your main app component
 
const App = () => {
  return (
    <ThemeProvider>
      <MainApp />
    </ThemeProvider>
  );
};
 
export default App;

5. Use Themed Components:

Use the themed components provided by react-native-paper in your app. These components will automatically pick up the active theme from the ThemeProvider.

// ThemedComponent.js
import React from "react";
import { useTheme } from "./ThemeProvider";
import { Text, Button } from "react-native-paper";
 
const ThemedComponent = () => {
  const { theme, toggleTheme } = useTheme();
 
  return (
    <>
      <Text style={{ color: theme.colors.primary }}>Themed Text</Text>
      <Button mode="contained" onPress={toggleTheme}>
        Toggle Theme
      </Button>
    </>
  );
};
 
export default ThemedComponent;

Now, you can use the ThemeProvider to switch between the Nike and Reebok color schemes dynamically. Themed components will automatically reflect the active theme.

Note: This example uses react-native-paper for theming and components. If you're using a different theming library or UI components, adapt the approach accordingly.

Sso Threads