Closed AlphaJuliettOmega closed 3 years ago
Hi @AlphaJuliettOmega
Regarding this..
ThemeManager.setComponentTheme('Text', {
fontFamily: 'Red Hat Display',
customTypography: true, // if you loaded a custom typography
color: '#fff'
});
This snippet won't work, Text
doesn't have a fontFamily
prop.
If anything, you want to set the style
prop with the fontFamily property.
ThemeManager.setComponentTheme('Text', {
style: styles.defaultTextStyle
});
const styles = StyleSheet.create({
defaultTextStyle: {
fontFamily: 'Red Hat Display',
color: '#fff'
}
})
Regardless, loading a custom typography and enable it by default in ThemeManager, doesn't seem like a hack to me. You can load the typographies as you did and then...
ThemeManager.setComponentTheme('Text', {
body: true
});
or
ThemeManager.setComponentTheme('Text', {
style: Typography.body
});
If you're going with setting a default style, I suggest doing the following:
ThemeManager.setComponentForcedTheme('Text', (props) => {
return {
style: [Typography.body, props.style]
}
});
This will allow merging a style that being passed with the default one
Good Luck!
@ethanshar Its didn't work.
Hi @arjunghimire Can you share what you did? If you have a link to your code even better.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
This doesn't work.
I've tried out all that I can do, setting a default font family is fundamental for UI libraries, why is it almost impossible if not completely impossible for RNUiLib?
I've tried this:
import { purple, text } from 'colors';
import { StyleSheet } from 'react-native';
import { ThemeManager } from 'react-native-ui-lib';
const styles = StyleSheet.create({
defaultTextStyle: {
fontFamily: 'Roboto',
color: 'pink'
}
});
ThemeManager.setComponentTheme('Button', {
backgroundColor: purple,
fontFamily: 'Roboto',
fontWeight: '600',
customTypography: true
});
ThemeManager.setComponentTheme('Text', {
style: styles.defaultTextStyle
});
and this:
import { purple, text } from 'colors';
import { ThemeManager } from 'react-native-ui-lib';
ThemeManager.setComponentTheme('Button', {
backgroundColor: purple,
fontFamily: 'Roboto',
fontWeight: '600',
customTypography: true
});
ThemeManager.setComponentTheme('Text', {
style: {
fontFamily: 'Roboto',
color: 'pink'
}
});
and this:
import { purple, text } from 'colors';
import { ThemeManager } from 'react-native-ui-lib';
ThemeManager.setComponentTheme('Button', {
backgroundColor: purple,
fontFamily: 'Roboto',
fontWeight: '600',
customTypography: true
});
ThemeManager.setComponentTheme('Text', {
fontFamily: 'Roboto', // font family doesn't work
color: 'pink' // this works for the color
});
to no avail. Can we add "adding default font family" on the documentation?
Hi @aprilmintacpineda
It looks like you're setting the Button theme in a wrong way.
The setComponentTheme
only accepts the component props, in your case there are no fontFamily
or fontWeight
props on the Button component
Try settings it like this
ThemeManager.setComponentTheme('Button', {
backgroundColor: purple,
labelStyle: {
fontFamily: 'Roboto',
fontWeight: '600',
}
});
Isn't it possible to have modifiers when using the following approach?
ThemeManager.setComponentTheme('Text', (props) => {
return {
style: [Typography.body, props.style]
}
});
It does work with modifiers if using the following format:
ThemeManager.setComponentTheme('Text', (props) => {
return {
body: true
}
});
The second approach has the disantvantage of not being able to apply body: true to some props other than style i think: For example in a button where i need to address the labelStyle:
ThemeManager.setComponentTheme('Button', props => {
return {
labelStyle: [Typography.button, props.labelStyle]
};
});
Or is it somehow possible like with:
ThemeManager.setComponentTheme('Button', props => {
return {
labelStyle: {
body: true
}
};
});
Nevermind, it seems to work with overriding the buttonlabel style and have other modifiers on the button:
<Button bg-primary labelStyle={{ fontSize: 10 }} label="hello" />
Why wouldn't this work?
ThemeManager.setComponentTheme('TextField', props => {
return {
preset: 'default',
fieldStyle: { backgroundColor: 'red', borderBottomWidth: 0, paddingBottom: 2 },
labelStyle: { fontSize: FONT_SIZES[14] },
validationMessageStyle: { fontSize: FONT_SIZES[14] },
labelColor: { focus: '', error: Colors.$textDangerLight },
containerStyle: {
backgroundColor: Colors.gray6,
borderRadius: BORDER_RADIUS['100']
},
style: {
paddingLeft: 20,
backgroundColor: Colors.gray6,
borderRadius: BORDER_RADIUS[40],
height: 45
},
color: Colors.gray6,
placeholderTextColor: Colors.gray3
};
});
Search for Font in the Docs yields 0 results.
I'm guessing the place to look would be Theme Manager (where I'm trying to implement a font change)
This documentation for the Theme Manager does not mention fonts except for the standard thingos that only change font size: https://wix.github.io/react-native-ui-lib/foundation/theme-manager
I have a font in my project, 'Red Hat Display.ttf' as well as the snippet:
As well as:
React Native 0.63.3 react-native-ui-lib: "^5.17.3",
The font doesn't change at all. 'customTypography:true' looks like a hack to me, isn't mentioned in the docs but it's in the only other thread about fonts, available here: https://github.com/wix/react-native-ui-lib/issues/198
Any advice regarding changing the font of all text in the project would be appreciated.