CODEWITHSUNDEEP
react-native
naderabdalghani
naderabdalghani

Reputation: 1189

How to pass component prop variable to an external style sheet?

I've made a custom component in which I want to pass different margin and font sizes, so I passed them as probs. The problem arose when I put the styling in a different file.

CustomButton.js:

import React from 'react';
import { Text, TouchableNativeFeedback, View, StyleSheet } from 'react-native';
import styles from './Styles';

const CustomButton = ({ onPress, children, marginSize, customFontSize, disabled }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableNativeFeedback onPress={onPress} disabled={disabled}>
      <View style={buttonStyle}>
        <Text style={textStyle}>
          {children}
        </Text>
      </View>
    </TouchableNativeFeedback>
  );
};

export default CustomButton;

Styles.js:

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  buttonStyle: {
    backgroundColor: '#38A1F3',
    borderRadius: 30,
    borderWidth: 1,
    borderColor: '#38A1F3',
    marginLeft: 5,
    marginRight: 5,
  },
  textStyle: {
    color: '#FFFF',
    fontSize: customFontSize,
    fontWeight: 'bold',
    paddingTop: 3,
    paddingBottom: 3,
    marginLeft: marginSize,
    marginRight: marginSize,
    textAlign: 'center',
  },
});

I know it won't work this way, as marginSize and customFontSize aren't defined anywhere in the Styles.js file, but I can't seem to find a solution

Upvotes: 2

Views: 1661

Answers (2)

wicky
wicky

Reputation: 978

Option 1 According to what you want to achieve, you can make your textStyle a function

  textStyle: (fontSize, marginHorizontal) => ({
    color: '#FFFF',
    fontSize,
    fontWeight: 'bold',
    paddingTop: 3,
    paddingBottom: 3,
    marginHorizontal,
    // if marginLeft and marginRight is always same, you can use marginHorizontal
    // (paddingTop and paddingBottom above can be paddingVertical too)
    textAlign: 'center',
  }),


//and then set your style like this
<Text style={textStyle(customFontSize, marginSize)}>
  {children}
</Text>


Option 2 Set default value in your Styles.js, and then replace it on CustomButton.js

<Text style={[textStyle, {fontSize: customFontSize, marginHorizontal: marginSize}]}>
  {children}
</Text>

Upvotes: 3

Cristian Tr
Cristian Tr

Reputation: 716

You can spread the styles you import from your styles.js file and add the properties you need after.

import React from 'react';
import { Text, TouchableNativeFeedback, View, StyleSheet } from 'react-native';
import styles from './Styles';

const CustomButton = ({ onPress, children, marginSize, customFontSize, disabled }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableNativeFeedback onPress={onPress} disabled={disabled}>
      <View style={buttonStyle}>
        <Text
          style={{
            ...textStyle, 
            marginLeft: marginSize,
            marginRight:marginSize,
            fontSize: customFontSize}}
        >
          {children}
        </Text>
      </View>
    </TouchableNativeFeedback>
  );
};

export default CustomButton;

Upvotes: 0

Related Questions