React-native-ui-kitten: How to override default font

[103cuong]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [x] feature request

Issue description

Current behavior:
I can't use a third font as a default font for UI Kitten.

Expected behavior:
I can use a third font as a default font for UI Kitten.

[artyorsh]

Hi! Currently, you can do this with custom mapping

import React from 'react';
import { mapping, light as theme } from '@eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';

const strictTheme = { ['text-font-family']: 'OpenSans' }; // <-- Your Font
const customMapping = { strict: strictTheme };

const App = () => (
  <ApplicationProvider
    mapping={mapping}
    theme={theme}
    customMapping={customMapping}
  />
);

export default App;

[103cuong]

Thanks 🙏 @artyorsh .

[103cuong]

Hey @artyorsh, I tried your solution but this only applies for <Text category='p1' />, another component has text not applied. How to resolve for this case?

import React from 'react';
import { mapping, light as theme } from '@eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';

const customMapping = {
  ...mapping,
  strict: {
    ...mapping.strict,
    'text-font-family': 'dosis-regular'
  }
};

const App = () => (
  <ApplicationProvider
    mapping={customMapping}
    theme={theme}
  />
);

export default App;

[artyorsh]

@cuongw just follow my code. You do not need to merge it with default mapping since this will be done by UI Kitten

[SimonHausdorf]

@artyorsh you have a little typo in your snippet:

const customMapping = { strict: scrictTheme };

should be

const customMapping = { strict: strictTheme };

[jgutierro]

Hello,

What about use different font weight?

this is my custom-mapping.json

{ "strict": { "text-font-family": "Montserrat" } }

Then in my App.js
await Font.loadAsync({ Montserrat: require('./assets/fonts/Montserrat-Medium.ttf') })

But all my <Text> elements show with Montserrat-Medium.ttf font.

How can I set up different weights?

Thank you

[artyorsh]

@jgutierro shows medium because you load medium? 🤔What do you expect?

[jgutierro]

@artyorsh as I said in my last question: How can I set up different weights?

[jgutierro]

For example I would like to show a bold version of Montserrat all over <Text category='label'>

[artyorsh]

You may use custom mapping and add fontFamily for each category variant.
See the original implementation here

[jgutierro]

Thank you so much Artur!