javascriptreactjsreact-nativereact-native-stylesheet

How to add parameters to a React object?


I have a shared style with error:

export const modalStyle(height)= {  // <-- Whats the syntax for adding parameter here?
    width:MODAL_WIDTH,
    height:height,
    backgroundColor:color_theme_light.mainGreen,
    borderRadius:22,
    justifyContent:"center",
    alignItems:"center",
    
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.20,
    shadowRadius: 1.41,
    elevation: 2
}

How can I add a parameter to it, so when I call this style I can change the height dynamically?

import {modalStyle} from './modalStyles'

<View style={modalStyle(40)}>
 ...
</View>

Solution

  • In your case, you are having two common ways to declare and export the modalStyle function.

    Function declaration:

    export function modalStyle(height) ({})
    

    Arrow function:

    export const modalStyle = (height) => ({})