1

how can I change the font family of react-native-paper BottomNavigation label, like setting in the below example?

enter image description here

import * as React from "react";
import { BottomNavigation } from "react-native-paper";
import AllRiddles from "./screens/AllRiddles";
import { SafeAreaProvider } from "react-native-safe-area-context";
import Settings from "./screens/Settings";
import { colors } from "./constants/colors";
import {
    Provider as PaperProvider,
    MD3DarkTheme as DefaultTheme,
} from "react-native-paper";
import Bookmarks from "./screens/Bookmarks";
import { StatusBar } from "expo-status-bar";

const AllRiddlesRoute = () => <AllRiddles></AllRiddles>;
const BookmarksRoute = () => <Bookmarks></Bookmarks>;
const SettingsRoute = () => <Settings></Settings>;

const App = () => {
    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        {
            key: "riddles",
            title: "چیستان‌ها",
            focusedIcon: "head-question",
            unfocusedIcon: "head-question-outline",
        },
        {
            key: "bookmarks",
            title: "نشان شده",
            focusedIcon: "bookmark-multiple",
            unfocusedIcon: "bookmark-multiple-outline",
        },
        {
            key: "settings",
            title: "Settings",
            focusedIcon: "cog",
            unfocusedIcon: "cog",
        },
    ]);

    const renderScene = BottomNavigation.SceneMap({
        riddles: AllRiddlesRoute,
        settings: SettingsRoute,
        bookmarks: BookmarksRoute,
    });

    return (
        <SafeAreaProvider>
            <StatusBar style="light"></StatusBar>
            <PaperProvider theme={theme}>
                <BottomNavigation
                    navigationState={{ index, routes }}
                    onIndexChange={setIndex}
                    renderScene={renderScene}
                    shifting={true}
                    barStyle={{ backgroundColor: colors.primary800 }}
                    // activeColor="white"
                    inactiveColor={colors.gray100}
                />
            </PaperProvider>
        </SafeAreaProvider>
    );
};

export default App;

I think it can be done with renderLabel prop but I don't know how to implement it [here][2] is the official docs

[2]: https://callstack.github.io/react-native-paper/docs/components/BottomNavigation#:~:text=as%20tab%20icon.-,renderLabel,-Type%3A%20(props

Vahid
  • 97
  • 1
  • 7

1 Answers1

0

Use the renderLabel prop and return an element.

import { BottomNavigation, Text } from 'react-native-paper';

<BottomNavigation
    navigationState={{ index, routes }}
    onIndexChange={setIndex}
    renderScene={renderScene}
    shifting={true}
    barStyle={{ backgroundColor: colors.primary800 }}
    inactiveColor={colors.gray100}
    renderLabel={(props: {
      route: any;
      focused: boolean;
      color: string;
    }): React.ReactNode => (
      <Text
        variant="bodySmall"
        style={{ width: '100%', textAlign: 'center', color: props.color }}
      >
        {props.route.title}
      </Text>
    )}
  />
net892z
  • 61
  • 4