Custom Container Component in React Native With Different Co...

Custom Container Component in React Native With Different Co…

In React Native (and also in React) you can create custom components and use them easily as much as you want in your app. You may give custom styles and values to these components by passing different values in the props of these components. However, you can not change the child components of your custom components since they are already defined.

In some cases, you may want to have containers that look alike but also have different content and differ in style. At this point, custom container components come in.

Let’s create a custom container with the name, “BoxContainer.” 

We want to add style to our container. The style we will give to our custom container component will be the common style in every usage of our component. So, let’s modify our code to return a view with some style. 

You may also like:
React Native Developers: Create Your First App.

Since our component will be a container, it will contain different components when used. We need to pass these components to the container. This can be achieved with React’s “children” prop.

We also want to pass custom style to the container. As you know, this can be passed by The problem here that must be handled is that we must combine the common style built in the component and the style passed to the component during usage. We must also allow the common style to be overwritten by the style passed during usage. We can achieve this with the spread operator in JavaScript.

With the help of the spread operator, the style values of boxContainer and style are combined and passed up as a new list. 

Now, our custom container component is ready to be used. Let’s use it with different content and style and see the result.

And the result:

Final output

Further Reading

Source link

Post image

Pulsing play button issue – Can I use this on WordPress? : w…

Hey guys,

Can someone help me get this play button here to work on a WordPress site, please?

I added it to the site but the play triangle is off but more worrisome than that is that when I press play the video doesn’t play; instead, I’m just taken to the top of the page.

Post image

my button

I created a js file and added it to the same folder where the other js files are. If it makes any difference, I use Beaver Builder.

I’m a beginner (in case you can’t tell) so apologies if this question is too basic. Unfortunately, I can’t share the site because I’m working on a local WordPress install.

Thank you

Source link

How to Format a Number to a Specific Number of Decimal Place...

How to Format a Number to a Specific Number of Decimal Place…

In this tutorial, we are going to learn about formatting a number to specific decimal places in JavaScript using the toFixed() method.

Consider that we have a number like this.

Now, we need to format the above number according to specific decimal places like 123.12 or 123.139.

Using toFixed() Method

The toFixed() method formats a number and returns the string representation of a number. Be default the toFixed() method removes the fractional part.

It also accepts the optional argument called digits, which means we need to specify the number of digits after the decimal point.

Let’s see an example:

You may also like:
How JavaScript Actually Works: Part 1.

Now, you can see that our number is converted to a string representation. Because of this, we need to convert the string back to a number by adding + operator.

Formatting Number to Two Decimal places

To format a number to two decimal places we need to pass 2 as an argument to the toFixed() method.

Similarly, we can format a number according to our needs like this:

Further Reading

Source link