CODEWITHSUNDEEP
javascriptreactjsstylesnative
jolearn
jolearn

Reputation: 145

Set styling from parent component (props) and from component itself react native

is it possible to set some styling properties from the parent as props and some styling properties from the component itself?

Here is my component:

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

class BackgroundMar extends Component {

render(){
    return (
        <View style={[styles.viewStyle]}>
            <Text>{this.props.test}</Text>
        </View>
    )
    }
};

var styles = {
viewStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: props.color
}
};

export default BackgroundMar;

And here is my parent:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import BackgroundMar from "./components/BackgroundMar";

export default class App extends React.Component {
  render() {
    return (
    <BackgroundMar
        test={'aaa'}
        color={'#ff2044'}
    />
    );
  }
};

});

I would like to set only the backgroundColor from the parent.

Upvotes: 0

Views: 1653

Answers (2)

Raj D
Raj D

Reputation: 535

Try something like

First send styles from parent as object... ex .. 

style={{color:"#abcd"}}

then inside the child component. add that to style array

<View style={this.props.style ? [styles.viewStyle, this.props.style] : 
  [styles.viewStyle]}>

Upvotes: 1

jolearn
jolearn

Reputation: 145

Okay I found the solution. On the parent:

export default class App extends React.Component {
render() {
return (
    <BackgroundMar
        test={'#52a03f'}
    />
);
}
};

On the component itself:

class BackgroundMar extends Component {

render(){
    return (
        <View style={[styles.viewStyle, { backgroundColor: this.props.test}]}>
            <Text>{this.props.test}</Text>
        </View>
    )
}
};

var styles = {
viewStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
}
};

Upvotes: 2

Related Questions