Can I make dynamic styles in React Native

Question

Say I have a component with a render like this    lt View style  jewelStyle  gt  lt  View gt    Where jewelStyle             borderRadius  10      backgroundColor    FFEFCC       width  20      height  20         How could I make the background colour dynamic and randomly assigned  I ve tried           borderRadius  10      backgroundColor  getRandomColor        width  20      height  20         But this makes all instances of View have the same colour  I want each one to be unique   Any tips

User · Answer

You can bind state value directly to style object  Here is an example   class Timer extends Component   constructor props    super props    this state    timer  0  color    FF0000     setInterval      gt       this setState  timer  this state timer   1  color  this state timer   2    0     FF0000      0000FF         1000      render     return       lt View gt        lt Text gt Timer  lt  Text gt       lt Text style   backgroundColor  this state color   gt  this state timer  lt  Text gt     lt  View gt

User · Answer

I know this is extremely late  but for anyone still wondering here s an easy solution  You could just make an array for the styles   this state       color   quot  fff quot     style      styles jewelstyle      backgroundColor  this state BGcolor    The second will override any original background color as stated in the stylesheet  Then have a function that changes the color  generateNewColor      var randomColor       Math floor Math random   16777215  toString 16     this setState  BGcolor  randomColor      This will generate a random hex color  Then just call that function whenever and bam  new background color

User · Answer

If you still want to take advantage of StyleSheet create and also have dynamic styles  try this out   const Circle     initial     gt      const initial   user pending   user email 0    user firstName 0        const colorStyles             backgroundColor  randomColor               return            lt View style   styles circle  colorStyles   gt               lt Text style  styles text  gt  initial toUpperCase    lt  Text gt           lt  View gt             const styles   StyleSheet create       circle            height  40          width  40          borderRadius  30          overflow   hidden             text            fontSize  12          lineHeight  40          color    fff           textAlign   center              Notice how the style property of the View is set as an array that combines your stylesheet with your dynamic styles

User · Answer

Had some issue syntactically  This worked for me   lt Text style   styles textStyle  color   red     gt  Hello  lt  Text gt   const styles   StyleSheet create      textStyle          textAlign   center            fontFamily   Arial         fontSize  16

User · Answer

Here is what worked for me   render       const   styleValue     this props    const dynamicStyleUpdatedFromProps         height  styleValue      width  styleValue      borderRadius  styleValue         return        lt View style       styles staticStyleCreatedFromStyleSheet     dynamicStyleUpdatedFromProps      gt           For some reason  this was the only way that mine would update properly

User · Answer

I usually do something along the lines of    lt View style  this jewelStyle      gt         jewelStyle   function options       return        borderRadius  12       background  randomColor              Every time View is rendered  a new style object will be instantiated with a random color associated with it  Of course  this means that the colors will change every time the component is re-rendered  which is perhaps not what you want  Instead  you could do something like this   var myColor   randomColor    lt View style  jewelStyle myColor     gt         jewelStyle   function myColor       return        borderRadius  10       background  myColor

User · Answer

If you are using a screen with filters for example  and you want to set the background of the filter regarding if it was selected or not  you can do    lt TouchableOpacity style  this props venueFilters includes  Bar   styles filterBtnActive styles filterBtn  onPress      gt this setFilter  Bar    gt   lt Text numberOfLines  1  gt  Bar  lt  Text gt   lt  TouchableOpacity gt    On which set filter is   setVenueFilter filter     var filters   this props venueFilters    filters push filter     console log filters includes  Bar     Inclui Bar      this setState previousState   gt        return   updateFilter   previousState updateFilter            this props setVenueFilter filters       PS  the function this props setVenueFilter filters  is a redux action  and this props venueFilters is a redux state

User · Answer

Yes  you can make dynamic styles  You can pass values from Components   First create StyleSheetFactory js   import   StyleSheet   from  react-native   export default class StyleSheetFactory     static getSheet backColor        return StyleSheet create         jewelStyle            borderRadius  10          backgroundColor  backColor          width  20          height  20                         then use it in your component following way  import React from  react   import   View   from  react-native   import StyleSheetFactory from    StyleSheetFactory  class Main extends React Component     getRandomColor        gt        var letters    0123456789ABCDEF       var color            for  var i   0  i  lt  6  i            color    letters Math floor Math random     16              return color          render         return          lt View gt           lt View           style  StyleSheetFactory getSheet this getRandomColor    jewelStyle            gt           lt View           style  StyleSheetFactory getSheet this getRandomColor    jewelStyle            gt           lt View           style  StyleSheetFactory getSheet this getRandomColor    jewelStyle            gt         lt  View gt

User · Answer

Actually  you can write your StyleSheet create object as a key with function value  it works properly but it has a type issue in TypeScript  import React from  react   import   View  Text  StyleSheet   from  react-native    const SomeComponent      bgColor      gt       lt View style  styles wrapper bgColor   gt       lt Text style  styles text  gt 3333 lt  Text gt     lt  View gt      const styles   StyleSheet create     wrapper  color   gt         flex  1      backgroundColor  color          text        color   red

User · Answer

Yes you can and actually  you should use StyleSheet create to create your styles   import React    Component   from  react   import       StyleSheet      Text      View   from  react-native        class Header extends Component       constructor props           super props                  render             const   title  style     this props          const   header  text     defaultStyle          const combineStyles   StyleSheet flatten  header  style                 return                lt View style   combineStyles   gt                   lt Text style   text   gt                        title                    lt  Text gt               lt  View gt                          const defaultStyle   StyleSheet create       header            justifyContent   center           alignItems   center           backgroundColor    fff           height  60          paddingTop  15          shadowColor    000           shadowOffset    width  0  height  3            shadowOpacity  0 4          elevation  2          position   relative             text            color    0d4220           fontSize  16                export default Header    And then    lt Header title  HOME  style    backgroundColor    10f1f0       gt

User · Answer

I know there are several answers  but i think the best and most simple is using a state  To change  is the state purpose   export default class App extends Component       constructor props          super props         this state               style                  backgroundColor   white                                 onPress   function           this setState  style   backgroundColor   red                render            return                            lt View style  this state style  gt  lt  View gt

User · Answer

In case someone needs to apply conditions   selectedMenuUI   function value           if value  this state selectedMenu              return                   flexDirection   row                   alignItems   center                   paddingHorizontal  20                  paddingVertical  10                  backgroundColor   rgba 255 255 255 0 3                     borderRadius  5                                 return               flexDirection   row               alignItems   center               paddingHorizontal  20              paddingVertical  10

User · Answer

The easiest is mine    lt TextInput   style        styles default      this props singleSourceOfTruth         backgroundColor   black             backgroundColor   white        gt

User · Answer

You ll want something like this   var RandomBgApp   React createClass       render  function              var getRandomColor   function                 var letters    0123456789ABCDEF  split                  var color                    for  var i   0  i  lt  6  i                       color    letters Math floor Math random     16                              return color                      var rows                   name   row 1                  name   row 2                  name   row 3                       var rowNodes   rows map function row                return  lt Text style   backgroundColor getRandomColor     gt  row name  lt  Text gt                       return                lt View gt                   rowNodes               lt  View gt                          In this example I take the rows array  containing the data for the rows in the component  and map it into an array of Text components  I use inline styles to call the getRandomColor function every time I create a new Text component   The issue with your code is that you define the style once and therefore getRandomColor only gets called once - when you define the style

User · Answer

Using object spread operator       worked for me    lt View style      jewelStyle       backgroundColor   getRandomColor      gt  lt  View gt

[css] Can I make dynamic styles in React Native?

Examples related to css

Examples related to reactjs

Examples related to react-native