A useful control that lets a user select color themes. Good for use cases where there isn't an overload of colors.
$ npm i -S react-native-theme-picker
And use within components:
<ThemePicker
colors={themes.map(theme=>theme.background)}
selectedColor={this.state.background}
onSelected={(color)=>this._selectColor(color)}/>
// with a different size
<ThemePicker
size={30}
colors={themes.map(theme=>theme.background)}
selectedColor={this.state.background}
onSelected={(color)=>this._selectColor(color)}/>
// with a different style
<ThemePicker
holderStyle={{flexDirection:'column'}}
selectorStyle={{borderWidth:3}}
colors={themes.map(theme=>theme.background)}
selectedColor={this.state.background}
onSelected={(color)=>this._selectColor(color)}/>
Then to get a cute fill animation, try using LayoutAnimation
with
these settings for animation:
const animations ={
duration: 100,
create: {
type: LayoutAnimation.Types.linear,
},
update: {
type: LayoutAnimation.Types.linear,
springDamping: 0.7,
},
}
In your callback (onSelected
) make sure to call LayoutAnimation.configureNext(animations)
to
signal that you want these.
Fork, implement, add tests, pull request, get my everlasting thanks and a respectable place here :).
Copyright (c) 2016 Dotan Nahum @jondot. See LICENSE for further details.