making re-useable theme component

making components folder in the root folder. inside componens create → ThemedView.jsx

Learning-Concepts

// ./components/ThemedView.jsx

import { View, useColorScheme } from "react-native";
import { Colors } from "../constants/Colors";   // colors = { ..., light:{}, dark:{} }

const ThemedView = ({ style, children, ...props }) => {  
  const colorScheme = useColorScheme();
  const theme = Colors[colorScheme] ?? Colors.light;  // if Colors[ light/dark ] else (in-case-of-null) -> Colors[light]
  return (
    <View style={[{ backgroundColor: theme.background }, style]} {...props}> 
      {childern}
    </View>
  );
};

export default ThemedView;

Shorter way - ChildrenProp-Shortcut,

a shorter way to do this when we just have a single component inside the template here.

*import { View, useColorScheme } from "react-native";
import { Colors } from "../constants/Colors";*

c*onst ThemedView* = ({ style, ...props }) => {  // Removed children from here
  *const colorScheme = useColorScheme();
  const theme = Colors[colorScheme] ?? Colors.light;*
  *return (*
    <View style={[{ backgroundColor: theme.background }, style]} {...props} />
  *);                 // made this view component -> self-closing
};                  // And when we do this, React automatically 
                   // renders the children in the same way. So we don't have
                  // to manually output them.

export default ThemedView;*

React Example

then import this in ./app/index.jsx . and wrap this instead of View

...
*const Home = () => {
  return (*
    <View style={styles.container}>
    ...
    </View>
  *);
};

export default Home;
...*

*import ThemedView from "../components/ThemedView";
...
const Home = () => {
  return (*
    <ThemedView style={styles.container}>
     ...
    </ThemedView>
  *);
};

export default Home;
...*

the background turned to that custome color which we set earlier.

Now it would be custom-white in Light and custom-dark in Dark mode.

then we add two more customed components → ThemedLogo and ThemedCard

// ./components/ThemedLogo.jsx
import { Image, useColorScheme } from "react-native";
// images
import DarkLogo from "../assets/img/logo_dark.png ";
import LightLogo from "../assets/img/logo_light.png";
const ThemedLogo = ({ ...props }) => {
  const colorScheme = useColorScheme();

  const logo = colorScheme == "dark" ? DarkLogo : LightLogo;

  return <Image source={logo} {...props} />;
};
export default ThemedLogo;