how to setup default style and user defined style in react native dynamically?

Question

In my react native App, i am just trying to add a shared component called RoundImageComponent and added a RoundImageComponent.style to add css styles. When use this Round image component, width of the image will be passed as props according to the requirement in the application. In some cases, width will be not added to the component tag as follow,

RoundImageComponent width={90} roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />

or

RoundImageComponent roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />

RoundImageComponent Code

import React from 'react';
import {
Text,
View,
} from 'react-native';
import Config from 'react-native-config';
import SplashScreen from 'react-native-splash-screen';
import RoundImageComponent from "./shared/avatar/RoundImageComponent";
import styles from './App.styles';

const resolveSession = async () => {
 // const session = sessionActions.getSession();
 SplashScreen.hide();
};

setTimeout(() => {
 resolveSession();
}, 2000);

const App = () => (
<View style={styles.container}>
<RoundImageComponent width={90}roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />
</View>
);

export default App;

RoundImageComponent

import {
  StyleSheet,
} from 'react-native';

import { container, primaryText } from '../../theme/base';


export const defaultImage = {
height: 100,
borderRadius: 50,
width: 100
}
const styles = StyleSheet.create({
container: {
 ...container,
},
 userDefinedImage: {
...defaultImage,
width: 40
 }
});

export default styles;

When user pass the width as prop, image width should override to the default width and otherwise image width should remain as default width. Is it possible to do with on this way?

Answer 1

This is possible by passing props to styles. Suppose this as my CustomTextComponent:

export CustomTextComponent = (props)=>{
     return (
         <Text style={[{fontFamily:"Lato", color:"#000", ...props.style}]}>
                {props.children}
        </Text>
    )
}

Now I want to set different color at different level lets say red and green then

for red

<CustomTextComponent style={{color:'red'}}> 
           red colored text
</CustomTextComponent>

for green

<CustomTextComponent style={{color:'green'}}> 
           red colored text
</CustomTextComponent>

Note: Your ...props.style is should be after your default styling. because your last mentioned will override previous one. You can also make use of default props value in some cases.(lib PropsType)

Answer 2

Yes, it's possible.

You can override the current style prop by passing another one just after it. It would looks something like this:

const styles = StyleSheet.create({
  default: {
    backgroundColor: red,
    color: blue,
  },
});

<View>
  <DefaultComponent style={styles.default} />
  <CustomComponent style={[styles.default, { backgroundColor: none }]} />
</View>

Hope it helps