List.js 991 Bytes
Newer Older
Giang Tran committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
import React from 'react';
import {StyleSheet, Text, Pressable, FlatList} from 'react-native';

const Button = () => ({
  item = {title: '', type: '', color: '#202020'},
  onSelect = () => {},
}) => {
  const text = item.title ? item.title : item.type;
  return (
    <Pressable
      style={[styles.button, {borderColor: item.color}]}
      onPress={() => onSelect({item})}>
      <Text style={[styles.text, {color: item.color}]}>{text}</Text>
    </Pressable>
  );
};

const List = ({items = [], onSelect = () => {}}) => {
  return (
    <FlatList
      keyExtractor={(item) => item.type}
      data={items}
      numColumns={3}
      renderItem={({item}) => {
        return <Button item={item} onSelect={onSelect} />;
      }}
    />
  );
};

const styles = StyleSheet.create({
  button: {
    flex: 1,
    borderRadius: 8,
    margin: 4,
    borderWidth: 1,
  },
  text: {
    margin: 8,
    fontSize: 20,
    textAlign: 'center',
    fontWeight: 'bold',
  },
});

export default List;