Center items with aspect ratio in FlatList - React Native

Multi tool use
Multi tool use












0















This seems like an easy question at first but it's actually tricky.



Better to go directly to the example. I've created a snack with the sample code here https://snack.expo.io/BkSNtNrWV



I want to have a list of items with given aspect ratio (say 3:2) and the items should take as much space as possible with a maximum limit on size. This sample code does it:



<View>
<FlatList style={{backgroundColor:'lightgray'}}
data={[{key: 'a'},{key: 'b'}]}
renderItem={({item}) =>
<View style ={styles.pink}></View>
}/>
</View>

const styles = StyleSheet.create({
pink: {
backgroundColor: "#A37E93",
maxHeight: 150,
aspectRatio: 3/2,
borderWidth: 1,
}});


And this is the result:
items aligned to the left



However, the problem is that I would like to have the items aligned to the center. I tried to wrap the list item in a flexbox with 'row' direction but that caused the item to have 0 height => not displayed. Justify content didn't help either (it's possible that I do it incorrectly).



Does anyone know how to solve this please?










share|improve this question



























    0















    This seems like an easy question at first but it's actually tricky.



    Better to go directly to the example. I've created a snack with the sample code here https://snack.expo.io/BkSNtNrWV



    I want to have a list of items with given aspect ratio (say 3:2) and the items should take as much space as possible with a maximum limit on size. This sample code does it:



    <View>
    <FlatList style={{backgroundColor:'lightgray'}}
    data={[{key: 'a'},{key: 'b'}]}
    renderItem={({item}) =>
    <View style ={styles.pink}></View>
    }/>
    </View>

    const styles = StyleSheet.create({
    pink: {
    backgroundColor: "#A37E93",
    maxHeight: 150,
    aspectRatio: 3/2,
    borderWidth: 1,
    }});


    And this is the result:
    items aligned to the left



    However, the problem is that I would like to have the items aligned to the center. I tried to wrap the list item in a flexbox with 'row' direction but that caused the item to have 0 height => not displayed. Justify content didn't help either (it's possible that I do it incorrectly).



    Does anyone know how to solve this please?










    share|improve this question

























      0












      0








      0








      This seems like an easy question at first but it's actually tricky.



      Better to go directly to the example. I've created a snack with the sample code here https://snack.expo.io/BkSNtNrWV



      I want to have a list of items with given aspect ratio (say 3:2) and the items should take as much space as possible with a maximum limit on size. This sample code does it:



      <View>
      <FlatList style={{backgroundColor:'lightgray'}}
      data={[{key: 'a'},{key: 'b'}]}
      renderItem={({item}) =>
      <View style ={styles.pink}></View>
      }/>
      </View>

      const styles = StyleSheet.create({
      pink: {
      backgroundColor: "#A37E93",
      maxHeight: 150,
      aspectRatio: 3/2,
      borderWidth: 1,
      }});


      And this is the result:
      items aligned to the left



      However, the problem is that I would like to have the items aligned to the center. I tried to wrap the list item in a flexbox with 'row' direction but that caused the item to have 0 height => not displayed. Justify content didn't help either (it's possible that I do it incorrectly).



      Does anyone know how to solve this please?










      share|improve this question














      This seems like an easy question at first but it's actually tricky.



      Better to go directly to the example. I've created a snack with the sample code here https://snack.expo.io/BkSNtNrWV



      I want to have a list of items with given aspect ratio (say 3:2) and the items should take as much space as possible with a maximum limit on size. This sample code does it:



      <View>
      <FlatList style={{backgroundColor:'lightgray'}}
      data={[{key: 'a'},{key: 'b'}]}
      renderItem={({item}) =>
      <View style ={styles.pink}></View>
      }/>
      </View>

      const styles = StyleSheet.create({
      pink: {
      backgroundColor: "#A37E93",
      maxHeight: 150,
      aspectRatio: 3/2,
      borderWidth: 1,
      }});


      And this is the result:
      items aligned to the left



      However, the problem is that I would like to have the items aligned to the center. I tried to wrap the list item in a flexbox with 'row' direction but that caused the item to have 0 height => not displayed. Justify content didn't help either (it's possible that I do it incorrectly).



      Does anyone know how to solve this please?







      css react-native






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 29 '18 at 18:24









      MartinMartin

      3527




      3527
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Updated the code. Add flex to inner item and wrap the view inside another with screen width.



          import * as React from 'react';
          import { Text, View, StyleSheet,FlatList,Dimensions } from 'react-native';
          import { Constants } from 'expo';

          const{width} = Dimensions.get('window')

          // You can import from local files
          import AssetExample from './components/AssetExample';

          // or any pure javascript modules available in npm
          import { Card } from 'react-native-paper';

          export default class App extends React.Component {
          render() {
          return (
          <View>
          <FlatList style={{backgroundColor:'lightgray'}}
          data={[{key: 'a'},{key: 'b'}]}
          renderItem={({item}) =>
          <View style={styles.item}>
          <View style ={styles.pink}></View>
          </View>
          }
          />
          </View>
          );
          }
          }

          const styles = StyleSheet.create({
          item:{
          width:width,
          height:150,
          alignItems:'center'
          },
          pink: {
          flex:1,
          backgroundColor: "#A37E93",
          maxHeight:150,
          aspectRatio:3/2,
          borderWidth:1,
          }
          });





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53972236%2fcenter-items-with-aspect-ratio-in-flatlist-react-native%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            Updated the code. Add flex to inner item and wrap the view inside another with screen width.



            import * as React from 'react';
            import { Text, View, StyleSheet,FlatList,Dimensions } from 'react-native';
            import { Constants } from 'expo';

            const{width} = Dimensions.get('window')

            // You can import from local files
            import AssetExample from './components/AssetExample';

            // or any pure javascript modules available in npm
            import { Card } from 'react-native-paper';

            export default class App extends React.Component {
            render() {
            return (
            <View>
            <FlatList style={{backgroundColor:'lightgray'}}
            data={[{key: 'a'},{key: 'b'}]}
            renderItem={({item}) =>
            <View style={styles.item}>
            <View style ={styles.pink}></View>
            </View>
            }
            />
            </View>
            );
            }
            }

            const styles = StyleSheet.create({
            item:{
            width:width,
            height:150,
            alignItems:'center'
            },
            pink: {
            flex:1,
            backgroundColor: "#A37E93",
            maxHeight:150,
            aspectRatio:3/2,
            borderWidth:1,
            }
            });





            share|improve this answer




























              0














              Updated the code. Add flex to inner item and wrap the view inside another with screen width.



              import * as React from 'react';
              import { Text, View, StyleSheet,FlatList,Dimensions } from 'react-native';
              import { Constants } from 'expo';

              const{width} = Dimensions.get('window')

              // You can import from local files
              import AssetExample from './components/AssetExample';

              // or any pure javascript modules available in npm
              import { Card } from 'react-native-paper';

              export default class App extends React.Component {
              render() {
              return (
              <View>
              <FlatList style={{backgroundColor:'lightgray'}}
              data={[{key: 'a'},{key: 'b'}]}
              renderItem={({item}) =>
              <View style={styles.item}>
              <View style ={styles.pink}></View>
              </View>
              }
              />
              </View>
              );
              }
              }

              const styles = StyleSheet.create({
              item:{
              width:width,
              height:150,
              alignItems:'center'
              },
              pink: {
              flex:1,
              backgroundColor: "#A37E93",
              maxHeight:150,
              aspectRatio:3/2,
              borderWidth:1,
              }
              });





              share|improve this answer


























                0












                0








                0







                Updated the code. Add flex to inner item and wrap the view inside another with screen width.



                import * as React from 'react';
                import { Text, View, StyleSheet,FlatList,Dimensions } from 'react-native';
                import { Constants } from 'expo';

                const{width} = Dimensions.get('window')

                // You can import from local files
                import AssetExample from './components/AssetExample';

                // or any pure javascript modules available in npm
                import { Card } from 'react-native-paper';

                export default class App extends React.Component {
                render() {
                return (
                <View>
                <FlatList style={{backgroundColor:'lightgray'}}
                data={[{key: 'a'},{key: 'b'}]}
                renderItem={({item}) =>
                <View style={styles.item}>
                <View style ={styles.pink}></View>
                </View>
                }
                />
                </View>
                );
                }
                }

                const styles = StyleSheet.create({
                item:{
                width:width,
                height:150,
                alignItems:'center'
                },
                pink: {
                flex:1,
                backgroundColor: "#A37E93",
                maxHeight:150,
                aspectRatio:3/2,
                borderWidth:1,
                }
                });





                share|improve this answer













                Updated the code. Add flex to inner item and wrap the view inside another with screen width.



                import * as React from 'react';
                import { Text, View, StyleSheet,FlatList,Dimensions } from 'react-native';
                import { Constants } from 'expo';

                const{width} = Dimensions.get('window')

                // You can import from local files
                import AssetExample from './components/AssetExample';

                // or any pure javascript modules available in npm
                import { Card } from 'react-native-paper';

                export default class App extends React.Component {
                render() {
                return (
                <View>
                <FlatList style={{backgroundColor:'lightgray'}}
                data={[{key: 'a'},{key: 'b'}]}
                renderItem={({item}) =>
                <View style={styles.item}>
                <View style ={styles.pink}></View>
                </View>
                }
                />
                </View>
                );
                }
                }

                const styles = StyleSheet.create({
                item:{
                width:width,
                height:150,
                alignItems:'center'
                },
                pink: {
                flex:1,
                backgroundColor: "#A37E93",
                maxHeight:150,
                aspectRatio:3/2,
                borderWidth:1,
                }
                });






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Dec 31 '18 at 5:22









                VictorVictor

                2,35711726




                2,35711726






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53972236%2fcenter-items-with-aspect-ratio-in-flatlist-react-native%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    98tOLixVd4PEpA8fLitwky4QsV nL,bfqZD6,U,J,YQIG 1gYqA T6KDP0feee7chCNFsFDNhVsjERsnyj,GOQ,8 0tgk4
                    R U 3GmKe98Yi23aw F TvG6pvIAxzhpy9,eMGUZI BhAwCCjwgaCVyYoRWqhD1KljgQR73Qm 5,nq,w KqJpOfNNqYkeiUifXrr

                    Popular posts from this blog

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas