title: How to use justifyContent and alignItems in react native flatlist with either contentContainerStyle etc
body: <p>I am using react native. Now, when I try to center the flatlist in the center of the screen with either specifically giving the flatlist with justifyContent and alignItems, it gives me a weird action. Also, contentContainerStyle with justifyContent and alignItems as center also gives an weird action. Been searching all day yestarday for solution. I will provide  code and image below. Thank you.</p>
  
  <p>im trying to align this flatlist in the center just like justfyContent and alignItems would do. You can see that the content leans towards the left of the screen.</p>
  
  <p><a href="https://i.stack.imgur.com/GssFC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GssFC.jpg" alt="enter image description here"></a></p>
  
  <pre><code>import React, { useState } from "react";
  import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity } from "react-native";
  import { GlobalStyles } from "../styles/GlobalStyles";
  import PokeDetails from "./PokeDetails";
  import SearchBarComponent from "../components/SearchBar";
  import PokeBanner from "../components/PokeBanner";
  
  class Home extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              isLoading: true,
              dataSource: [],
          }
      }
  
      componentDidMount() {
          fetch(`https://pokeapi.co/api/v2/pokemon/?limit=27`)
              .then((res)=&gt; res.json())
              .then((response)=&gt; {
                  this.setState({
                      isLoading: false,
                      dataSource: response.results,
                  })
                  console.log("RESPONSE",response)
                  console.log("RESPONSE.RESSSULTS",response.results)
              })
  
      }
  
      render() {
  
          const showIndicator = this.state.isLoading == true ? &lt;ActivityIndicator size="large" color="#0000ff" /&gt; : null;
          return(
              &lt;View style={GlobalStyles.container}&gt;
                  &lt;SearchBarComponent style={GlobalStyles.searchBar}/&gt;
                  &lt;PokeBanner/&gt;
                  &lt;View style={GlobalStyles.activityIndicator}&gt;{showIndicator}&lt;/View&gt;
                  &lt;View style={GlobalStyles.pokeFlatList}&gt;
                  &lt;FlatList
                      contentContainerStyle={{flexDirection: "row",justifyContent:"center", alignItems:"center"}}
                      keyExtractor={(item, index) =&gt; item.name}
                      numColumns={3}
                      data={this.state.dataSource} 
                      renderItem={({item})=&gt; 
                      &lt;View style={{flex: 1, flexDirection: "column", margin: 1}}&gt;
                      &lt;TouchableOpacity onPress={()=&gt; this.props.navigation.navigate('PokeDetails', 
                      {item ,imageUrl: `https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}&gt;
                          &lt;PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
                      }/&gt;
                  &lt;/View&gt;
                  &lt;Button onPress={()=&gt; this.props.navigation.navigate("About")} title="Go to about"/&gt;
              &lt;/View&gt;
          )
      }
  }
  
  
  export default Home;
  </code></pre>
  
  <p>This is what happens when I try to add contentContainerStyle using the code below</p>
  
  <p><a href="https://i.stack.imgur.com/EIfHH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EIfHH.jpg" alt="enter image description here"></a></p>
  
  <pre><code>import React, { useState } from "react";
  import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity } from "react-native";
  import { GlobalStyles } from "../styles/GlobalStyles";
  import PokeDetails from "./PokeDetails";
  import SearchBarComponent from "../components/SearchBar";
  import PokeBanner from "../components/PokeBanner";
  
  class Home extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              isLoading: true,
              dataSource: [],
          }
      }
  
      componentDidMount() {
          fetch(`https://pokeapi.co/api/v2/pokemon/?limit=27`)
              .then((res)=&gt; res.json())
              .then((response)=&gt; {
                  this.setState({
                      isLoading: false,
                      dataSource: response.results,
                  })
                  console.log("RESPONSE",response)
                  console.log("RESPONSE.RESSSULTS",response.results)
              })
  
      }
  
      render() {
  
          const showIndicator = this.state.isLoading == true ? &lt;ActivityIndicator size="large" color="#0000ff" /&gt; : null;
          return(
              &lt;View style={GlobalStyles.container}&gt;
                  &lt;SearchBarComponent style={GlobalStyles.searchBar}/&gt;
                  &lt;PokeBanner/&gt;
                  &lt;View style={GlobalStyles.activityIndicator}&gt;{showIndicator}&lt;/View&gt;
                  &lt;View style={GlobalStyles.pokeFlatList}&gt;
                  &lt;FlatList
                      contentContainerStyle={{justifyContent:"center", alignItems:"center"}}
                      keyExtractor={(item, index) =&gt; item.name}
                      numColumns={3}
                      data={this.state.dataSource} 
                      renderItem={({item})=&gt; 
                      &lt;View style={{flex: 1, flexDirection: "column", margin: 1}}&gt;
                      &lt;TouchableOpacity onPress={()=&gt; this.props.navigation.navigate('PokeDetails', 
                      {item ,imageUrl: `https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}&gt;
                          &lt;PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
                      }/&gt;
                  &lt;/View&gt;
                  &lt;Button onPress={()=&gt; this.props.navigation.navigate("About")} title="Go to about"/&gt;
              &lt;/View&gt;
          )
      }
  }
  
  
  export default Home;
  </code></pre>