Implicit parameters in React Native - reactjs

Question

Hi everyone I have a doubt regarding the following Code.
import { StatusBar as ExpoStatusBar } from "expo-status-bar";
import React from "react";
import { ThemeProvider } from "styled-components/native";
import { Text } from "react-native";
import { Ionicons } from "#expo/vector-icons";
import { NavigationContainer } from "#react-navigation/native";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import {
useFonts as useOswald,
Oswald_400Regular,
} from "#expo-google-fonts/oswald";
import { useFonts as useLato, Lato_400Regular } from "#expo-google-fonts/lato";
import { theme } from "./src/infrastructure/theme";
import { RestaurantsScreen } from "./src/features/restaurants/screen/restaurants.screen";
import { SafeArea } from "./src/components/utility/safe-area.component";
import { RestaurantsContextProvider } from "./src/services/restaurants/restaurants.context";
const Tab = createBottomTabNavigator();
const TAB_ICON = {
Restaurants: "md-restaurant",
Map: "md-map",
Settings: "md-settings",
};
const createScreenOptions = ({ route }) => {
const iconName = TAB_ICON[route.name];
return {
tabBarIcon: ({ size, color }) => (
<Ionicons name={iconName} size={size} color={color} />
),
};
};
const Settings = () => (
<SafeArea>
<Text>Settings</Text>
</SafeArea>
);
const Map = () => (
<SafeArea>
<Text>Map</Text>
</SafeArea>
);
export default function App() {
const [oswaldLoaded] = useOswald({
Oswald_400Regular,
});
const [latoLoaded] = useLato({
Lato_400Regular,
});
if (!oswaldLoaded || !latoLoaded) {
return null;
}
return (
<>
<ThemeProvider theme={theme}>
<RestaurantsContextProvider>
<NavigationContainer>
<Tab.Navigator
screenOptions={createScreenOptions}
tabBarOptions={{
activeTintColor: "tomato",
inactiveTintColor: "gray",
}}
>
<Tab.Screen name="Restaurants" component={RestaurantsScreen} />
<Tab.Screen name="Map" component={Map} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
</NavigationContainer>
</RestaurantsContextProvider>
</ThemeProvider>
<ExpoStatusBar style="auto" />
</>
);
}
In particular form my comprehension I assumed that the function createScreenOptions
const createScreenOptions = ({ route }) => {
const iconName = TAB_ICON[route.name];
return {
tabBarIcon: ({ size, color }) => (
<Ionicons name={iconName} size={size} color={color} />
),
};
};
that is called here :
<Tab.Navigator
screenOptions={createScreenOptions}
tabBarOptions={{
activeTintColor: "tomato",
inactiveTintColor: "gray",
}}
>
uses the parameter route .
I have a doubt regarding the following code. In particular, I assume that the function createScreenOptions uses the parameter route, but I am unable to figure out how it is passed to the function. Can someone explain how the route parameter is passed to the createScreenOptions function?
Thank you so much.

Answer 1

This is a common pattern with functions passed to props. The components have information at runtime that you need; you want to do something at runtime that depends on that information. You can't know that information ahead of time! Only the component will know that, at runtime. That's why you give the component a function to run, and the component runs the function with that information.
An easy case to think about is the onChangeText prop of a TextInput. You want to have the text input do something when that text changes. The prop has this signature:
onChangeText?: ((text: string) => void)
so you'd give it a callback like
<TextInput
onChangeText={(text) => console.log(text)}
Let's say that internally, the text input stores your function in a variable called onChangeText. The text input knows what text it has inside of it and when it changes. Whenever it changes, it runs onChangeText(text), and you get your log.
The same is true for react-navigation. It knows what route it's on at runtime. The screenOptions prop has this signature:
screenOptions?: ScreenOptions | ((props: {
route: RouteProp<ParamList>;
navigation: any;
}) => ScreenOptions)
which tells us that you can give it an object of type ScreenOptions, or a function that takes in the route and navigation from the library, and returns a ScreenOptions object.
If you give the prop a function, like you have, ideally it runs that function when it's needed and with the information the function needs.