How to convey the props style for a specific component in a native reaction

I tried to create a button with special styles for her. I had more than 3 properties like justifyContent, alignItems, backgroundColor and height. I wanted to pass the style from another component to this, so that the backgroundColor property of the button changes.

My code is:

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

const Button = ({ buttonName, csCode }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity style={{ buttonStyle, backgroundColor: [csCode] }}>
      <Text style={textStyle}>
      {buttonName}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#ffffff',
    fontSize: 35,
    fontWeight: '600',

  },
  buttonStyle: {
    justifyContent: 'center',
    alignSelf: 'stretch',
    height: '20%',
  }
};

export { Button };

Here, the Style button does not apply to buttons; instead, only backgroundColor support is applied. Any help?

Thank.

+9
source share
1 answer

If you want to use styles from styles and inline styles together, put them in an array as follows:

<TouchableOpacity style={[buttonStyle, {backgroundColor: csCode }]}>
  ...
</TouchableOpacity>
+11
source

Source: https://habr.com/ru/post/1691831/


All Articles