button

button does not full width
mail@pastecode.io avatar
unknown
javascript
3 years ago
1.1 kB
5
Indexable
Never
import React, { useState } from "react";
import { FlatList, StyleSheet, Text, View, Button } from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  item: {
    flex: 1
  },
  view: {
    flex: 1,
    width: 200,
    backgroundColor: "#fcf",
    alignItems: "center",
    justifyContent: "center"
  }
});

const PassengerList = () => {
  const exampleData = [];
  exampleData.length = 30;
  exampleData.fill(0);
  const [data, setData] = useState(exampleData);

  return (
    <View style={styles.container}>
      <FlatList
        data={data.map((item, index) => {
          return { key: index + "Devin" };
        })}
        renderItem={({ item }) => (
          <View style={styles.view}>
            <Button title={item.key} style={styles.item}></Button>
          </View>
        )}
        onEndReached={() => {
          data.length += 30;
          data.fill(0);
          setData(data.slice());
        }}
        onEndReachedThreshold={0.8}
      />
    </View>
  );
};

export default PassengerList;