How to trigger function in Style object?

Question

import React from 'react';
import { View, Text } from 'react-native';

let globalIsTotal =false;
const component = ({ isTotal }) => {
  const { mainLabelStyle } = styles;

  globalIsTotal = isTotal;
  return (
    <View>
      <Text style={mainLabelStyle}>Hello World</Text>
    </View>
  );
};

const styles = {
  mainLabelStyle: {
    fontSize:28,
    flex: 1,
    fontWeight: () => {
      if(globalIsTotal===true){
        return 'bold';
      }
      return 'normal';
    }
  }
}

I'm trying to set the fontWeight of style depending on globalIsTotal value, but seems like the function is not being trigger. Wondering if this is the right way to handle such styling logic? This is a functional component which is reusable and props isTotal pass from caller

Dan · Accepted Answer · 2018-04-13 10:23:52Z

1

I would achieve this like so:

Remove fontWeight from the style object

const styles = {
  mainLabelStyle: {
    fontSize:28,
    flex: 1
  }
}

And add it like so:

<Text style={[mainLabelStyle, { fontWeight: globalIsTotal ? 'bold' : 'normal'}]}>Hello World</Text>

answered Apr 13, 2018 at 10:23

Dan

8,9229 gold badges46 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Reiche · Accepted Answer · 2018-04-13 10:22:02Z

1

You should use ternary expressions to trigger conditionals in objects, like:

mainLabelStyle: {
  fontSize:28,
  flex: 1,
  fontWeight: globalIsTotal ? 'bold' : 'normal'
}

answered Apr 13, 2018 at 10:22

Martin Reiche

1,6721 gold badge16 silver badges27 bronze badges

Comments

flix · Accepted Answer · 2018-04-13 10:23:59Z

0

Here's my option about your issue :

let globalIsTotal =false;
const component = ({ isTotal }) => {
  const { mainLabelStyle } = styles;

  globalIsTotal = isTotal;
  return (
    <View>
      <Text style={globalIsTotal==true ? [styles.mainLabelStyleBold] : [styles.mainLabelStyleNormal]}>Hello World</Text>
    </View>
  );
};

const styles = {
  mainLabelStyleNormal: {
    fontSize:28,
    flex: 1,
    fontWeight: 'normal'
  }
  mainLabelStyleBold: {
    fontSize:28,
    flex: 1,
    fontWeight: 'bold'
  }
}

answered Apr 13, 2018 at 10:23

flix

1,9835 gold badges39 silver badges76 bronze badges

Collectives™ on Stack Overflow

How to trigger function in Style object?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related