React Native button map for a button group

Question

Trying to figure out how to change the styling on just the first and last button.
How do I tell the button which one is which?
Beginner in JS and React/React Native trying to find my way. Currently coming out with no rounded buttons on either end.
The Button element in the child is my own wrapper on TouchableOpacity and only accepts an object for the buttonStyles.
Any help appreciated.

Parent component:

export class Rating extends React.Component {

  ratings = [
    { text: '1' },
    { text: '2' },
    { text: '3' },
    { text: '4' },
    { text: '5' },
  ];

  onButtonPress = (e) => {
    console.log(e.target.value);
  };

  render() {
    return (
      <View>
        {this.ratings.length && (
          this.ratings.map((rating, index) => (
            <View key={index}>
              <RatingButton rating={rating} onButtonPress={this.onButtonPress} />
            </View>
          ))
        )
      }
      </View>

    );
  }
}

Child component:

const buttonStyles = () => {
  const allButtons = {
    backgroundColor: sc.colors.white.white,
    borderWidth: 1.5,
    borderColor: sc.colors.blue.darker1,
    padding: sc.padding.lg,
  };

  const startButton = {
    borderTopLeftRadius: sc.borderRadius.sm,
    borderBottomLeftRadius: sc.borderRadius.sm,
    borderRightWidth: 0.75,
    ...allButtons,
  };

  const endButton = {
    borderTopRightRadius: sc.borderRadius.sm,
    borderBottomRightRadius: sc.borderRadius.sm,
    borderLeftWidth: 0.75,
    ...allButtons,
  };
  return StyleSheet.create({
    allButtons,
    startButton,
    endButton,
    buttonText: {
      color: sc.colors.blue.darker1,
      fontSize: sc.font.size.largeContent,
    },
  });
};

class RatingButton extends React.Component {

  render() {
    const { onButtonPress, rating } = this.props;
    const styles = buttonStyles();
    return (
      <Button
        buttonStyles={styles.allButtons}
        textStyles={styles.buttonText}
        onPress={onButtonPress}
      >
        {rating.text}
      </Button>
    );
  }
}

Miroslav Glamuzina Miroslav Glamuzina · Accepted Answer · 2018-01-24T15:24:41

Inside of your ratings variable, you could store another attribute for style like so:

ratings = [
    { text: '1', style: {backgroundColor:'red'} },
    { text: '2' },
    { text: '3' },
    { text: '4' },
    { text: '5', backgroundColor: 'yellow' },
  ];

And then inside of <RatingButton/> you can add the style to the element

<Button
        buttonStyles={styles.allButtons}
        textStyles={styles.buttonText}
        onPress={onButtonPress}
        style={rating.style}
      >
        {rating.text}
</Button>

Note: You could also pass a class through the rating variable.

ratings = [
    { text: '1', buttonStyle: 'startButton' },
    { text: '2' },
    { text: '3' },
    { text: '4' },
    { text: '5', buttonStyle: 'endButton' },
  ];

and set your style like this:

<Button
        buttonStyles={ratings.buttonStyle?styles[rating.buttonStyle]:styles.allButtons}
        textStyles={styles.buttonText}
        onPress={onButtonPress}
        style={rating.style}
      >
        {rating.text}
</Button>

React Native button map for a button group

1 Answers