2

I am developing a hybrid app react native + Android. I want consistent font size throughout the app. So I want to access the font size declared in dimen.xml of Android, where I have created stubs for different dimensions of different devices. I can expose it via Native Modules like this

@ReactMethod
public float getFontSize(Callback callback){
    callback.invoke(mContext.getResources().getDimension(R.dimen.text_h1));
    return mContext.getResources().getDimension(R.dimen.text_h1);
}

and I can access it from react native like this

NativeModules.Utilities.getFontSize((textsize)=>console.log(textsize))

But then How can I add it to my following style?

TextStyleH1: {
    ...Platform.select({
      ios: {
        fontFamily: "PFEncoreSansPro-Book",
      },
      android: {
        fontFamily: "pfencoresanspro_book",
      },
    }),
    fontSize: 18, // I want to change to textsize returned from NativeModule
  },

Clarification

My styles are defined in styles.js which has 

const styles = StyleSheet.create({
   ...
});

because I want it to be reusable as I have 14 diff styles of text and have lot of <Text /> in my components. So I want to change the fontSize inside styles.js only (if possible)

Raj Suvariya
  • 1,592
  • 3
  • 14
  • 36

1 Answers1

1

You have to add it by appending style:

componentWillMount() {        
    NativeModules.Utilities.getFontSize((textsize)=>this.setState({textsize}));
}

render() {
    return (
        <Text style={[styles.TextStyleH1, {
            fontSize: this.state.textsize
        }]}>
            Sample Text
        </Text>
    );
}
Val
  • 21,938
  • 10
  • 68
  • 86
  • But in this case, I will have to do this every time I render the . I don't want to do it as I want to keep my styles separate and reusable – Raj Suvariya Jul 31 '17 at 09:34
  • Also, I have 14 diff sizes of fonts. If I use your method then I will have 14 states in every component just for textSize – Raj Suvariya Jul 31 '17 at 09:35
  • @RajSuvariya Your styles are already separate and reusable -- except of the `fontSize` part. it's a dynamic value. – Val Jul 31 '17 at 09:37
  • Yes but isn't there any way to change fontsize inside my styles.js file? – Raj Suvariya Jul 31 '17 at 09:39
  • If you have so many different size of fonts, I suggest to fetch everything from `NativeModules` inside of a separate static class. – Val Jul 31 '17 at 09:41
  • when you call `StyleSheet.create`, react-native will compact them into immutable values. you can see them by `console.log(styles.textstyle)` -- will show something like `_11` `_22` – Val Jul 31 '17 at 09:45
  • I want to fetch fontsize from NativeModule but How can I then change the styles defined in styles.js because as you said they are immutable – Raj Suvariya Jul 31 '17 at 10:00
  • by *appending style* --- because you can never change an immutable value. please have a look on my answer again =) – Val Jul 31 '17 at 10:29
  • Bro I got it but that is not the correct way as I need to override every time I use the style. Anyway, I figured out other way and I am gonna post the answer very soon. – Raj Suvariya Jul 31 '17 at 13:15
  • good to know you solved your problem =) share what you found please, so we can learn and advance from a better answer. – Val Aug 01 '17 at 01:56