Rearrange styles

[jasurkurbanov]

1. Motivation:

In project wanted to change borderWidth of icon. But for this I have to create the same styles as _iconContainer. So, in order, just to change borderWidth writing the same amount of styles violets programming concepts DRY(Don't Repeat Yourself). So I just rearranged styles, so that anyone who wants to the change any of these styles

   width: 25,
   height: 25,
   borderWidth: 1,
   borderRadius: 20,
   borderColor: "#ffc484",

Only sending one style item within iconStyle props is enough. It will only override that style item. So it is flexible I guess

1. Example Problem now:

Scenario: I want to change borderColor of icon to 'red'.

So what I basically do:

I create the same style:

export const _iconContainer = (checked, fillColor, unfillColor) => {
  return {
    width: 25,
    height: 25,
    borderWidth: 1,
    borderRadius: 20,
> borderColor: "red",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: checked ? fillColor : unfillColor,
  };
};

Usage

<BouncyCheckbox
  isChecked
  textColor="#000"
  fillColor="red"
  text="Buy tickets for concert 🎉 🎊"
>  iconStyle={_iconContainer(checked, fillColor, unfillColor)}
/>

I just will change borderColor to "red". But repeating the same amount of styles.

1. Version I am proposing

Scenario: I want to change borderColor of icon to 'red'.

Just create simple style

iconStyleOverride : {
  borderColor: "red"
}

Usage

<BouncyCheckbox
  isChecked
  textColor="#000"
  fillColor="red"
  text="Buy tickets for concert 🎉 🎊"
  > iconStyle={iconStyleOverride}
/>

So just rearranging styles anyone will be able to change styles of textStyle and iconStyle. Thus, nobody will not repeat the same amount of styles again.

Thank you for time. Fill free to ask questions.

[WrathChaos]

Hello @jasurkurbanovinit,
I just loved your explanation :) Awesome work for that. I will review and test it today :)
Thank you so much for your contribution. I really like the override method.
If it works and passes on my tests, I will use this method for all of my libraries :) Aahh so much work to do :D If you want to help me to do that, I'm very open for PRs :)

[jasurkurbanov]

Hi @WrathChaos ,
Sure I will help. By the way, I also think about these changes within this project.

1. Simply your codes and remove unnecessary things.
2. Convert to Typescript
3. Make changes in README

So yeh, a lot of task to do.

[WrathChaos]

Hi @WrathChaos ,
Sure I will help. By the way, I also think about these changes within this project.

1. Simply your codes and remove unnecessary things.
2. Convert to Typescript
3. Make changes in README

So yeh, a lot of task to do.

I would love that :)
Actually I tried to write some of my libraries with typescript but I could not get the advantage of it. What do you think?

[WrathChaos]

New version is released:

0.2.1 🎉

[jasurkurbanov]

@WrathChaos Thought about Typescript for you project. I guess there is not much difference adding Typescript to this particular project since project is not so big. But in other project we can try on