React Native FontFamily Bold and color globally not working

Question

I have an issue which the font-family not working on my app, especially when applying bold text, I've already placed all of my font in my android/app/src/main/assets/fonts and doing react-native link command

./constants/theme.js

import { Dimensions } from "react-native";
const { width, height } = Dimensions.get("window");
export const FONTS = {
        h1: { fontFamily: "Roboto-Black", fontSize: SIZES.h1, lineHeight: 36 },
        h2: { fontFamily: "Roboto-Bold", fontSize: SIZES.h2, lineHeight: 30 },
        h3: { fontFamily: "Roboto-Bold", fontSize: SIZES.h3, lineHeight: 22 },
        h4: { fontFamily: "Roboto-Bold", fontSize: SIZES.h4, lineHeight: 22 },
        body1: { fontFamily: "Roboto-Regular", fontSize: SIZES.body1, lineHeight: 36 },
        body2: { fontFamily: "Roboto-Regular", fontSize: SIZES.body2, lineHeight: 30 },
        body3: { fontFamily: "Roboto-Regular", fontSize: SIZES.body3, lineHeight: 22 },
        body4: { fontFamily: "Roboto-Regular", fontSize: SIZES.body4, lineHeight: 22 },
        body5: { fontFamily: "Roboto-Regular", fontSize: SIZES.body5, lineHeight: 22 },
    };

export const COLORS = {
    primary: "#7F5DF0",     // Light purple
    secondary: "#5D2DFD",   // Dark purple
    white: "#fff",
    black: "#000000",
    green: "#37E39F",
    red: "#F9A8BA",
    gray: "#6A6A6A",
    lightGray: "#dbdbdb",
    lightGray1: "#f5f6fa"
};  
export const SIZES = {
    // global sizes
    base: 8,
    font: 14,
    radius: 12,
    padding: 24,
    // font sizes
    h1: 30,
    h2: 22,
    h3: 16,
    h4: 14,
    body1: 30,
    body2: 22,
    body3: 16,
    body4: 14,
    body5: 12,
    // app dimensions
    width,
    height
};

const appTheme = { COLORS, SIZES, FONTS };
export default appTheme;

And when I return it when I use ...FONTS.h3 the text was not bold even though I declared bold text

 import {COLORS, FONTS} from '../constants';
 <View>
    <Text style={{...FONTS.h3, ...COLORS.green}}>Text with bold and green color</Text>
 </View>

./contants/index.js

import icons from "./icons";
import images from "./images";
import theme, { COLORS, SIZES, FONTS } from "./theme";

export { icons, images, theme, COLORS, SIZES, FONTS };