Give different style to each element in an array React native

Question

I am displaying an array like so :

  this.props.group.fields.slice(0,3).map((field, key)=>{
     return( 
        <View style= {styles.cardContainerStyle}>
        <FieldListItem key={key} field ={field}></FieldListItem>)

and the FieldListItem render method is :

render(){
    let types = this.props.field.type                      
    return(<Text>types<Text>)}

Basically, I am using slice to display only first 3 elements and I want to style them differently.For example, I want to style the first element as a Title - bold, the second one as single line and font should be smaller and the last can be multiLine and color should be diff. Is there any way I can do that?

score 0 · Answer 1 · answered Jan 17 '21 at 12:44

0

You can define custom styles in style-sheet or directly declare it inside component.

render() {
    let types = this.props.field.type
    let itemStyle = {}
    switch(type)
    {
        case 'type1':
            itemStyle={fontSize:10}
        case 'type2':
            itemStyle={fontSize:20}
    }
    return(<Text styles={itemStyle}>types<Text>)}
}

answered Jan 17 '21 at 12:44

Ravi

34,851
21
122
183

Actually, the style is not based upon the types. Types are dynamic so the value can be 1,2,3 or 5,6,7 but the in both cases style should be same for 1 and 5 , 2and 6, 3 and 7. How can i achieve that? – sver Jan 18 '21 at 10:32
You can have it inside if...else or within switch also. Check [this](https://stackoverflow.com/questions/16706716/using-two-values-for-one-switch-case-statement) for multiple condition in switch. – Ravi Jan 18 '21 at 12:04

score 0 · Answer 2 · answered Jan 17 '21 at 12:48

0

Give your return element an id with a unique value, you can use key since you are already using it.

return(<Text id=`text{this.props.key}`>types<Text>)}

And in your style.css file, have sth like this:

#text1 {}

#text2 {}

#text3 {}

answered Jan 17 '21 at 12:48

Parsa Arvaneh

139
1
9

sorry , I did not undrstand your answer. I am working on react native – sver Jan 18 '21 at 10:33

score 0 · Accepted Answer · answered Jan 20 '21 at 06:57

I do the following :

switch(key){
      case 0:
        return(<FieldListItem itemStyle={{fontSize:20,color:'black', fontWeight:'bold'}} key={key} field={field}></FieldListItem>);
      case 1: 
        return(<FieldListItem itemStyle={{color:'black', fontSize:15}} key={key} field={field}></FieldListItem>);   
      case 2:
        return(<FieldListItem itemStyle={{color:'grey',fontSize:15}} key={key} field={field}></FieldListItem>);
    }

Give different style to each element in an array React native

3 Answers3