🚀 Feature Proposal - Custom Theme Support

[ImAbhishekTomar]

If you add custom theme support something like this then this is very helpful for personalized branding.

allow this component theme configuration on app root.

[cooperka]

This is a great idea and simple to add, thanks @ImAbhishekTomar. Do you want to submit a PR for this (either instructions in the README or perhaps something more advanced)?

[ImAbhishekTomar]

I am trying to get pull request for this repo, but I am failing to do. Can you please help?

[cooperka]

Let me know if this guide helps: https://opensource.com/article/19/7/create-pull-request-github

[ImAbhishekTomar]

I will check!! THANKS

[ImAbhishekTomar]

@cooperka -  I have done something, you can check. This is my first open source contribution so give me a suggestion if i do something wrong.

I am from C# background and I have only limited react-native knowledge so give me a suggestion how can i improve this.

https://github.com/ImAbhishekTomar/react-native-snackbar/tree/branchThemeSupport

[joaodos3v]

Any updates for that? Maybe even to connect with the dark theme of other libraries like this one?

[cooperka]

@joao-vieira as far as I'm aware, the screenshot of code @ImAbhishekTomar posted in the description would work out of the box. Feel free to do it in your own code and let us know what works well for you.

If you want more advanced theming integration into this library, I invite you to submit a PR!

[joaodos3v]

Hi @cooperka, thanks for the excellent work with this library!
The solution indication of the @ImAbhishekTomar it worked for me too.

In my case, I created a generic method to "create my snackbar" and, so far, used only the themes of success, warning and error:

/**
 * Creates a standard object with properties according to the current theme
 *
 * @param {String} message the value that will be displayed
 * @param {Snackbar.LENGTH_LONG|LENGTH_SHORT|LENGTH_INDEFINITE} duration how long will be visible
 * @param {String} type the visual configuration of the snackbar (possibilities: success, error)
 */
export const createSnackbar = (message, duration, type = 'success') => {
  const snackbar = { text: message, duration };

  if (type.toLowerCase() === 'error') {
    return {
      ...snackbar,
      textColor: '#FFF2F2', // theme['color-danger-100']
      backgroundColor: '#DB2C66', // theme['color-danger-600']
    };
  }

  if (type.toLowerCase() === 'warning') {
    return {
      ...snackbar,
      textColor: '#FFFDF2', // theme['color-warning-100']
      backgroundColor: '#DB8B00', // theme['color-warning-600']
    };
  }

  return {
    ...snackbar,
    textColor: '#EDFFF3', // theme['color-success-100']
    backgroundColor: '#00B383', // theme['color-success-600']
  };
};

To use it, I simply do:

Snackbar.show(createSnackbar('Your message here!', Snackbar.LENGTH_SHORT));

I hope I contributed to someone 😃
Credit: colors are based on the wonderful UI Kitten 5.0

[ImAbhishekTomar]

PR please review - #199