Shoutem change default fontFamily not work

Question

im newbie in react native! I'm used shoutem/ui in my project. I have problem when modify default fontFamily. here is my code, please check then help me some solution to handle this. thanks so much guys.

const theme = _.merge(getTheme(), {
    defaultFont: {
        fontFamily: 'Rubik-Italic',
      },
    'shoutem.ui.NavigationBar': {
        '.clear': {
            container: {
                backgroundColor: params.primaryColor,
                borderBottomColor: 'transparent',
                position: 'relative',
            },
            'shoutem.ui.Title': {
                color: 'white',
                fontSize: 16,
            },
        },
        '.normal': {
            container: {
                position: 'relative'
            },
            'shoutem.ui.Button': {
                'shoutem.ui.Icon': {
                    color: params.colorTextAlpha,
                },
                'shoutem.ui.Text': {
                    color: params.colorTextAlpha,
                },
            },
            'shoutem.ui.Title': {
                color: params.colorText,
            },
        }
    },
    'shoutem.ui.Row': {
        '.fix': {
            paddingHorizontal: 10,
            paddingVertical: 10,
        }
    }
});

Describe the problem, just saying you have a problem doesn't really help us help you. — Vladimir Vdović, Sep 05 '17 at 12:27
i do above code but all component in my app still not work with this fonts. I has using to connect them to all component in my project — Chu Việt Hưng, Sep 05 '17 at 13:06

score 2 · Accepted Answer · answered Sep 05 '17 at 15:13

What you want to do is override the theme variables.

Import the default theme variables and the getTheme function:

import {
  getTheme,
  defaultThemeVariables,
} from '@shoutem/ui';

Then define your custom variables:

const myThemeVariables = {
...defaultThemeVariables,
  title: {  fontFamily: 'MyFont' },
};

And then define your custom theme that uses those variables:

const myTheme = getTheme(myThemeVariables);

There is no more defaultFont setting you can override, so you'll have to be specific unfortunately.

Furthermore, you have to import the StyleProvider:

import { StyleProvider } from '@shoutem/theme';

And use it to control the style of your components:

render() {
    return (
      <StyleProvider style={myTheme}>
        // your components here
      </StyleProvider>
    );
  }
}

Thanks so much bro. It work for me. U saving my day. – Chu Việt Hưng Sep 05 '17 at 15:22 — Chu Việt Hưng, Sep 05 '17 at 15:22

Shoutem change default fontFamily not work

1 Answers1