Stateful component called as a list that highlights to a random color on selection.

MusicPreferences.tsx

type Props = {
  navigation: NavigationScreenProp<NavigationParams>;
};

type State = {
  musicPreferences: any;
};

export class MusicPreferencesScreen extends React.Component<Props, State> {
  static navigationOptions = ({}) => {
    return {
      title: 'Music Preferences',
    };
  };
  state = {
    musicPreferences: [],
  };
  
  public render() {
    return (
      <Layout>
        <View style={styles.container}>
          <Headline style={{ textAlign: 'center' }}>What music genres do you like?</Headline>
          <View style={{ marginRight: 60, marginLeft: 60 }}>
            <Paragraph style={{ textAlign: 'center' }}>
              If you have no preferences, press next without selecting any options.
            </Paragraph>
          </View>

          <FlatList
            data={genres}
            numColumns={4}
            renderItem={({ item }) => (
              <PreferenceTiles
                label={item.key}
                passSelection={() => this.handleSelection(item.key)}
              />
            )}
          />
        </View>
        <View style={styles.nextButton}>
          <SlydeButton handlePress={this.handleNext} text="Next" />
        </View>
      </Layout>
    );
  }

  private handleSelection = label => {
    const selections = this.state.musicPreferences.concat(label);
    const musicPreferences = [...new Set(selections)];
    this.setState({
      musicPreferences,
    });
  };

  private handleNext = () => {
    const { navigation } = this.props;
    const prevData = navigation.getParam('data');
    const data = { ...prevData, ...this.state };
    navigation.navigate('VenuePreferences', { data });
  };
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 3,
    marginTop: 20,
  },
  list: {
    justifyContent: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  nextButton: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
});

PreferenceTiles.tsx

 const pallete = [
  '#0E831E',
  '#4D0101',
  '#181358',
  '#B802BF',
  '#B2B208',
  '#C67508',
  '#47BCA1',
  '#661074',
];

type Props = {
  label: string;
  passSelection: (label) => void;
};

type State = {
  highlighted: boolean;
};

class PreferenceTiles extends React.Component<Props, State> {
  state = {
    highlighted: false,
  };
 
  render() {
    const { label } = this.props;
    const { highlighted } = this.state;
    return (
      <TouchableOpacity onPress={this.handlePress}>
        <View
          style={[
            styles.circle,
            { backgroundColor: highlighted ? getRandomItem(pallete) : null },
            { borderWidth: !highlighted ? 1 : null },
          ]}
        >
          <Text style={{ textAlign: 'center' }}>{label}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  
  private handlePress = () => {
    return this.setState(
      prevState => ({
        highlighted: !prevState.highlighted,
      }),
      () => {
        this.props.passSelection(this.props.label);
      }
    );
  };
}

const styles = StyleSheet.create({
  circle: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
    margin: 5,
    height: 80,
    width: 80,
    borderRadius: 50,
    borderColor: '#fff',
  },
});