0

I have multiple color strings coming in from the DB. For each color, I convert it to lowercase then pass it in the inline styles:

const color-picker-item = color => (
    <View style={{backgroundColor: color.toLowerCase()}} />
)

This worked fine when the colors being passed are valid css color strings like 'RED' and 'WHITE' but now I'm getting funky color strings that just show up as a default white. Is there a way to change this default color, so if color is not a valid string color then display this other color instead.

I checked this solution out but it uses new Option.style which isn't working with react native. Any other recommendations?

It also looks like the non valid colors have more than 1 word so I may do a white space check instead but hoping for another solution!

Dres
  • 1,449
  • 3
  • 18
  • 35
  • Yikes! Take a look [at this answer](https://stackoverflow.com/questions/6386090/validating-css-color-names) for validating color names – Ted May 14 '19 at 19:54
  • I think `switch` is a good solution https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch – Marko Savic May 14 '19 at 19:57
  • What is the original source of the color strings? Ideally you'd do something to prevent invalid values from being saved to the DB in the first place. – John Montgomery May 14 '19 at 19:57
  • The valid color keywords are listed [here](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) – James May 14 '19 at 20:02

2 Answers2

0

Just an idea.

Something that you could do is create the list of valid colours and check if the color is a valid color else set red or wherever color you like. You can create a variable with the default colour or put it in the first index of your valid color list and use it as default. 

const awesomeColors = ['RED', 'GREEN', 'BLUE']

const isAwesomeColor = colorToCheck => 
     awesomeColors.some(color => color === colorToCheck) 


const color-picker-item = color => (
    <View style={{backgroundColor: isAwesomeColor(color) ? color.toLowerCase() : awesomeColors[0].toLowerCase()}} />
)
John Montgomery
  • 6,739
  • 9
  • 52
  • 68
pdr0
  • 114
  • 1
  • 4
  • idea works if i put all 140 colors in an array like that. it is a solution but i was hoping not to go that route. i'll keep on searching but appreciate your help! – Dres May 14 '19 at 21:01
  • where do you have defined the colours? in a DB? – pdr0 May 15 '19 at 18:33
0

This could be fixed in a couple of ways. The cleanest I can think of is checking the color against all valid color keywords. But there is an easier way if you just want to set a default color when it fails.

CSS! Just add a className, for instance 

<View className='defaultcolorfallback'/>

and add this in your css: 

.defaultcolorfallback {
  background-color: #123456;
}

Whenever the background-color provided fails, it will fallback to the set background-color.

If you don't want to touch your css, and you don't mind going all hackytackity dirty, do this: 

<View style={{background: '#123456', backgroundColor: color.toLowerCase()}} />

It ain't pretty, but it works!

Robbeoli
  • 408
  • 5
  • 17
  • I tried: `const styles = StyleSheet.create({ container: backgroundColor: 'black' }}` `` but that doesn't seem to work. This is what you meant though, right? Setting up a default bg color incase `color.toLowerCase()` doesn't work? – Dres May 14 '19 at 21:04
  • I did mean setting the default color, yet, as you point out, this won't work. This could work if you use the dirty `background` attr instead of `backgroundColor`. In my example your default needs to be classbound and you need to give your `View` that `className`. – Robbeoli May 14 '19 at 21:44