Newbie question for updating the style component

React Native
1

Hello,
In this video (12- Improving the Welcome Screen | Code with Mosh) at 3:20 he makes the style object into an array and then adds the background-colour property.

I don’t follow this and would like to learn more as to what this means. Can someone point to the right resource online to learn more? I am assuming this is just some JS stuff. Thanks.

2

Hi,
I see this is related to React Native course. I do not code in React Native but there is a saying it is close to React which I know.

From what you say I guess there is a situation where he did style elements inline before moving the style in a separate object. Such thing happened in the React course.

So for instance :

// In the return statement of the component
<p style={{fontWeight:bold,color:green}}></p>

// In the root of component
const myStyle = {
  fontWeight: bold,
  color: green,
  backgroundColor: dimgray
}

// In the return statement of the component
<p style={myStyle}></p>

For short you are passing an object that has CSS properties converted from kebab case (font-weight) to camel case (fontWeight).

In the 1st example you have double curly braces because the 1st set is to pass React/React-Native code, while the 2nd set represents an object.

In the 2nd example we first create an object which is also delimited by curly braces but put in an identifier myStyle. So when you want to use an inline style that way you don’t need to double the curly braces. You just have the common set of curly braces for React/RN code.

Regards.