Setting font size dynamically in react text component












0















I am trying to set up following layout in my RN application



layout



The following code gets this up and running:



import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l ->
</Text>
<Text style={styles.largeParagraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
largeParagraph: {
margin: 24,
fontSize: 30,
fontWeight: 'bold',
textAlign: 'center',
},
});


The requirement is that the first and the second text components should take up one line each. I have tried using a combination of adjustsFontSizeToFit and numberOfLines={1} to achieve this which works.



However, both text inputs must have the same font size in the end after all the adjustments which should be the minimum of the font size after adjustsFontSizeToFit was applied to both the components. I have looked through the RB documentation but to no avail.



What would the most React Native way to accomplish this?










share|improve this question























  • style={getStyle(24)} then your getStyle function looks like getStyle(fontSize){ return {margin: 24, fontSize: fontSize, fontWeight: 'bold', textAlign: 'center',}; }

    – user1941070
    Nov 27 '18 at 20:26


















0















I am trying to set up following layout in my RN application



layout



The following code gets this up and running:



import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l ->
</Text>
<Text style={styles.largeParagraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
largeParagraph: {
margin: 24,
fontSize: 30,
fontWeight: 'bold',
textAlign: 'center',
},
});


The requirement is that the first and the second text components should take up one line each. I have tried using a combination of adjustsFontSizeToFit and numberOfLines={1} to achieve this which works.



However, both text inputs must have the same font size in the end after all the adjustments which should be the minimum of the font size after adjustsFontSizeToFit was applied to both the components. I have looked through the RB documentation but to no avail.



What would the most React Native way to accomplish this?










share|improve this question























  • style={getStyle(24)} then your getStyle function looks like getStyle(fontSize){ return {margin: 24, fontSize: fontSize, fontWeight: 'bold', textAlign: 'center',}; }

    – user1941070
    Nov 27 '18 at 20:26
















0












0








0








I am trying to set up following layout in my RN application



layout



The following code gets this up and running:



import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l ->
</Text>
<Text style={styles.largeParagraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
largeParagraph: {
margin: 24,
fontSize: 30,
fontWeight: 'bold',
textAlign: 'center',
},
});


The requirement is that the first and the second text components should take up one line each. I have tried using a combination of adjustsFontSizeToFit and numberOfLines={1} to achieve this which works.



However, both text inputs must have the same font size in the end after all the adjustments which should be the minimum of the font size after adjustsFontSizeToFit was applied to both the components. I have looked through the RB documentation but to no avail.



What would the most React Native way to accomplish this?










share|improve this question














I am trying to set up following layout in my RN application



layout



The following code gets this up and running:



import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l ->
</Text>
<Text style={styles.largeParagraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
largeParagraph: {
margin: 24,
fontSize: 30,
fontWeight: 'bold',
textAlign: 'center',
},
});


The requirement is that the first and the second text components should take up one line each. I have tried using a combination of adjustsFontSizeToFit and numberOfLines={1} to achieve this which works.



However, both text inputs must have the same font size in the end after all the adjustments which should be the minimum of the font size after adjustsFontSizeToFit was applied to both the components. I have looked through the RB documentation but to no avail.



What would the most React Native way to accomplish this?







reactjs react-native






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 27 '18 at 19:40









icodericoder

413




413













  • style={getStyle(24)} then your getStyle function looks like getStyle(fontSize){ return {margin: 24, fontSize: fontSize, fontWeight: 'bold', textAlign: 'center',}; }

    – user1941070
    Nov 27 '18 at 20:26





















  • style={getStyle(24)} then your getStyle function looks like getStyle(fontSize){ return {margin: 24, fontSize: fontSize, fontWeight: 'bold', textAlign: 'center',}; }

    – user1941070
    Nov 27 '18 at 20:26



















style={getStyle(24)} then your getStyle function looks like getStyle(fontSize){ return {margin: 24, fontSize: fontSize, fontWeight: 'bold', textAlign: 'center',}; }

– user1941070
Nov 27 '18 at 20:26







style={getStyle(24)} then your getStyle function looks like getStyle(fontSize){ return {margin: 24, fontSize: fontSize, fontWeight: 'bold', textAlign: 'center',}; }

– user1941070
Nov 27 '18 at 20:26














1 Answer
1






active

oldest

votes


















0














the solution is to use an array of styles in the property:



<Text style={[styles.paragraph, {fontSize: this.state.dynamicSize}]}>





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53506958%2fsetting-font-size-dynamically-in-react-text-component%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    the solution is to use an array of styles in the property:



    <Text style={[styles.paragraph, {fontSize: this.state.dynamicSize}]}>





    share|improve this answer




























      0














      the solution is to use an array of styles in the property:



      <Text style={[styles.paragraph, {fontSize: this.state.dynamicSize}]}>





      share|improve this answer


























        0












        0








        0







        the solution is to use an array of styles in the property:



        <Text style={[styles.paragraph, {fontSize: this.state.dynamicSize}]}>





        share|improve this answer













        the solution is to use an array of styles in the property:



        <Text style={[styles.paragraph, {fontSize: this.state.dynamicSize}]}>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 2 '18 at 2:02









        Eugenio GaliotoEugenio Galioto

        33




        33
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53506958%2fsetting-font-size-dynamically-in-react-text-component%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

            Calculate evaluation metrics using cross_val_predict sklearn

            Insert data from modal to MySQL (multiple modal on website)