How to change height of < FlatList /> in react native?

In React Native, changing the height of <FlatList/> typically involves adjusting the space it occupies on the screen. This can typically be achieved in several ways:

1. Inline Styles

You can directly apply inline styles to the <FlatList/> component to set its height.

jsx
<FlatList
  data={...}
  renderItem={...}
  style={{ height: 200 }} // Set the height of FlatList to 200
/>

2. External Style Object

Another approach is to define an external style object and pass it to the style prop of FlatList.

jsx
const styles = StyleSheet.create({
  listStyle: {
    height: 200, // Set the height of FlatList to 200
  },
});

<FlatList
  data={...}
  renderItem={...}
  style={styles.listStyle}
/>

3. Dynamic Height Calculation

If you need the height of FlatList to change dynamically based on certain conditions, store the height value in the component's state and update it as needed.

jsx
class MyComponent extends React.Component {
  state = {
    listHeight: 200,
  };

  someFunctionToUpdateHeight = () => {
    // Update height under certain conditions
    this.setState({ listHeight: 300 });
  };

  render() {
    return (
      <FlatList
        data={...}
        renderItem={...}
        style={{ height: this.state.listHeight }}
      />
    );
  }
}

4. Using Dimensions to Get Screen Size

Sometimes you may want the height of FlatList to be based on the device's screen size. Use Dimensions to get screen dimensions and set the height accordingly.

jsx
import { Dimensions } from 'react-native';

const windowHeight = Dimensions.get('window').height;

<FlatList
  data={...}
  renderItem={...}
  style={{ height: windowHeight }}
/>

5. Using Flex

In Flex layout, you typically don't need to specify the height directly; instead, define the size proportion using the flex property.

jsx
<FlatList
  data={...}
  renderItem={...}
  style={{ flex: 1 }} // FlatList fills all available space of its parent container
/>

When using flex, the parent container's height determines FlatList's height range. Ensure the parent container has sufficient height or is also a flex layout; otherwise, FlatList might not be visible.

Example

Suppose you need FlatList's height to be half the screen height. Implement it as follows:

jsx
import { Dimensions, StyleSheet } from 'react-native';

const windowHeight = Dimensions.get('window').height;

const styles = StyleSheet.create({
  listStyle: {
    height: windowHeight / 2,
  },
});

<FlatList
  data={...}
  renderItem={...}
  style={styles.listStyle}
/>

In practical applications, choose the most suitable method based on the specific scenario to set FlatList's height.