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?

Ravi · Accepted Answer · 2021-01-17 12:44:16Z

1

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, 2021 at 12:44

Ravi

35.7k22 gold badges126 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sver Over a year ago

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?

Ravi Over a year ago

You can have it inside if...else or within switch also. Check this for multiple condition in switch.

Parsa Arvaneh · Accepted Answer · 2021-01-17 12:48:08Z

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, 2021 at 12:48

Parsa Arvaneh

1471 silver badge9 bronze badges

1 Comment

sver Over a year ago

sorry , I did not undrstand your answer. I am working on react native

sver · Accepted Answer · 2021-01-20 06:57:40Z

0

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>);
    }

answered Jan 20, 2021 at 6:57

sver

9422 gold badges19 silver badges45 bronze badges

Collectives™ on Stack Overflow

Give different style to each element in an array React native

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related