Skip to content

Instantly share code, notes, and snippets.

@crylico
Last active January 20, 2021 15:23
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save crylico/d24ee57750fadc7e5f95 to your computer and use it in GitHub Desktop.
Save crylico/d24ee57750fadc7e5f95 to your computer and use it in GitHub Desktop.
DynamicType in React Native
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface DynamicType : NSObject <RCTBridgeModule>
@end
#import "DynamicType.h"
#import <UIKit/UIKit.h>
@implementation DynamicType
RCT_EXPORT_MODULE();
- (NSDictionary *)constantsToExport {
NSDictionary *dynamicSizes = @{ @"Headline" : @([UIFont preferredFontForTextStyle:UIFontTextStyleHeadline].fontDescriptor.pointSize),
@"Subheadline" : @([UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline].fontDescriptor.pointSize),
@"Body" : @([UIFont preferredFontForTextStyle:UIFontTextStyleBody].fontDescriptor.pointSize),
@"Caption1" : @([UIFont preferredFontForTextStyle:UIFontTextStyleCaption1].fontDescriptor.pointSize),
@"Caption2" : @([UIFont preferredFontForTextStyle:UIFontTextStyleCaption2].fontDescriptor.pointSize),
@"Footnote" : @([UIFont preferredFontForTextStyle:UIFontTextStyleFootnote].fontDescriptor.pointSize)};
return dynamicSizes;
}
@end
/* @flow */
'use strict';
var React = require('react-native');
var DynamicType = require('NativeModules').DynamicType;
var {
StyleSheet,
View,
Text
} = React;
var SampleComponent = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={[styles.message, {fontSize: DynamicType.Headline}]}>Headline</Text>
<Text style={[styles.message, {fontSize: DynamicType.Subheadline}]}>Sub</Text>
<Text style={[styles.message, {fontSize: DynamicType.Body}]}>Body</Text>
<Text style={[styles.message, {fontSize: DynamicType.Caption1}]}>Cap1</Text>
<Text style={[styles.message, {fontSize: DynamicType.Caption2}]}>Cap2</Text>
<Text style={[styles.message, {fontSize: DynamicType.Footnote}]}>Footnote</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
justifyContent: 'center'
},
message: {
textAlign: 'center'
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment