CODEWITHSUNDEEP
reactjsreact-nativeimmutabilityreact-props
doctopus
doctopus

Reputation: 5657

How to pass value as prop and insert into component as CSS style (React Native)?

I've got a reusable functional component called CardSection. I want to pass use different values of flex for different CardSection components.

Because of this, I want to pass the value of flex as a prop down into the CardSection component. E.g.:

<CardSection flex='1' /> <CardSection flex='3' />

However, if I try to add the key-value pair for flex into my style object, I get an error because I'm trying to set a key of flex with a value on an object that is meant to be immutable:

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

const CardSection = props => {
  styles.container.flex = props.flex;  // <---- Causes mutation error

  return (
    <View style={styles.container}>
      {props.children}
    </View>
  );
};

const styles = {
  container: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'space-between',
    borderColor: '#ddd',
    position: 'relative',
    borderWidth: 2,
    borderColor: 'red',
  }
};

export default CardSection;

What's the best way to insert custom flex values in this case?

Upvotes: 3

Views: 7860

Answers (5)

Rajesh N
Rajesh N

Reputation: 6693

you can do it following way

import React from "react";
import { View, StyleSheet } from "react-native";

class Main extends React.Component {
  static getCardStyle(flexValue) {
    return StyleSheet.create({
      container: {
        flex: flexValue,
        borderBottomWidth: 1,
        padding: 5,
        backgroundColor: "#fff",
        justifyContent: "space-between",
        borderColor: "#ddd",
        position: "relative",
        borderWidth: 2,
        borderColor: "red"
      }
    });
  }
  render() {
    return <View style={getCardStyle(this.props.flex).container}>{props.children}</View>;
  }
}

export default Main;

Another Best way:

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

const CardSection = props => {


  return (
    <View style={styles.container(props.flex)}>
      {props.children}
    </View>
  );
};

const styles = {
  container: (flexValue) => { return {
    borderBottomWidth: 1,
    padding: 5,
    flex:flexValue
    backgroundColor: '#fff',
    justifyContent: 'space-between',
    borderColor: '#ddd',
    position: 'relative',
    borderWidth: 2,
    borderColor: 'red',
  }}
};

export default CardSection;

Upvotes: 7

Blessing
Blessing

Reputation: 2720

You can just destructure your flexValue from props and then pass set it to the flex property. You also have to move that styleSheet inside your component for it to have access to flexValue. You code will look like this:

import React from "react";
import { View } from "react-native";

const CardSection = ({ flexValue }) => {
  const styles = {
    container: {
      flex: flexValue,
      borderBottomWidth: 1,
      padding: 5,
      backgroundColor: "#fff",
      justifyContent: "space-between",
      borderColor: "#ddd",
      position: "relative",
      borderWidth: 2,
      borderColor: "red",
    },
  };

  return <View style={styles.container}>{props.children}</View>;
};

export default CardSection;

Upvotes: 0

kubido
kubido

Reputation: 568

you can create the stylesheet object property as function. then you called the styles property as a function.

class Main extends React.Component {
  render() {
    containerStyle = styles.container(this.props.flex)
    return <View style={containerStyle}>{props.children}</View>;
  }
}

const styles  = StyleSheet.create({
  container: (flexValue) => {
    flex: flexValue,
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: "#fff",
    justifyContent: "space-between",
    borderColor: "#ddd",
    position: "relative",
    borderWidth: 2,
    borderColor: "red"
  }
});

Upvotes: 4

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

You should not mutate the object. Create a fresh object and assign:

const CardSection = props => {
  const containerStyle = { ...style.container, props.flex }

  return (
    <View style={containerStyle}>
      {props.children}
    </View>
  );
};

Upvotes: 2

Roy Wang
Roy Wang

Reputation: 11270

Use composition instead of mutation:

style={[styles.container, { flex: props.flex }]}

Also, use a number for flex: <CardSection flex={1} />.

Upvotes: 1

Related Questions