Question 418292 in React native Question posted in
The official React Native documentation can be found here.

How to generate fully dynamic style in React Native?

I need to generate style based on provided string.
For example "color:red;fontsize:12" to parse and apply to Text element

const ss = StyleSheet.create({
            someStyle: {
                color:'red',
                fontSize: 12,
            }
        });

What I could find is that only values can be dynamic, not properties.

let a = 'red';
let b = 12;

        const ss = StyleSheet.create({
            someStyle: {
                color: a,
                fontSize: b,
            }
        });

Something like this could be great if there is any option.

       const ss = StyleSheet.create();
       let someStyle = ss.addChild("someStyle");
       someStyle.addChild("color", "red");
       someStyle.addChild("fontsize", "12");

Thank you.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found solution.

    Simple example:

       const propertyName = 'color';
   const propertyValue = 'red';
   const dynamicObject = {
     [propertyName]: propertyValue,
   };

   console.log(dynamicObject); 
   <Text style={dynamicObject}>test</Text>

    More complex:

      const properties: string[] = ['color', 'fontSize', 'padding'];
  const values: (string | number)[] = ['red', 35, 10];

  const dynamicStyle: { [key: string]: string | number } = properties.reduce((style, property: string, index: number) => {
    style[property] = values[index];
    return style;
  }, {} as { [key: string]: string | number });

  console.log(dynamicStyle); 
  <Text style={dynamicStyle}>test</Text>

    So key is that inside [ ] can be property name.

    styles: Record<string, string | number> = {};

    and now can add as many key-value pairs as needed.

    styles[propName] = value;

    Thank you!


  2. 0

    you can do similiar to my component

    export const Flex: React.FC<
  FlexProps & LayoutProps & {children?: React.ReactNode}
> = ({children, w = '100%', align = 'center', flexDir = 'row', ...args}) => {
  return (
    <View
      style={{
        ...getLayoutShort({align, flexDir, w, ...args}),
      }}>
      {children}
    </View>
  );
};


// and 

const getLayoutShort = (args: LayoutProps) => {
  return {
    width: args?.w ?? args?.width,
    height: args?.h ?? args?.height,
    margin: args?.m ?? args?.margin,
    padding: args?.p ?? args?.padding,
    paddingTop: args?.pt ?? args?.paddingTop,
    paddingLeft: args?.pl ?? args?.paddingLeft,
    paddingRight: args?.pr ?? args?.paddingRight,
    paddingBottom: args?.pb ?? args?.paddingBottom,
    paddingVertical: args?.py ?? args?.paddingVertical,
    paddingHorizontal: args?.px ?? args?.paddingHorizontal,
    marginTop: args?.mt ?? args?.marginTop,
    marginLeft: args?.ml ?? args?.marginLeft,
    marginRight: args?.mr ?? args?.marginRight,
    marginBottom: args?.mb ?? args?.marginBottom,
    marginVertical: args?.my ?? args?.marginVertical,
    marginHorizontal: args?.mx ?? args?.marginHorizontal,
    backgroundColor: args?.bg ?? args?.backgroundColor,
    flexDirection: args?.flexDir ?? args?.flexDirection,
    justifyContent: args?.justify ?? args?.justifyContent,
    alignItems: args?.align ?? args?.alignItems,
    border: args?.border ?? args?.borderWidth,
    alignSelf: args?.alignSelf ?? args?.alignSelf,
    borderRadius: args?.rounded ?? args?.borderRadius,
    flexGrow: args?.flexGrow ?? args?.flexGrow,
    gap: args?.gap ?? args?.gap,
    // add more shorthand here
    ...args?.style,
    ...args,
  };
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search