NativeBase CardItem Text out of place?

Question

I am using react-native + mobx + nativebase. I am iterating over an array of objects. I am using NativeBase Card component. I have problem with the UI going out of place. See below:

Note "Hamburgers" looks funky. I figured out this is caused by the length of the word "Hamburgers". When I shorten it to "Burgers", it looks fine. See below:

This is the code. Note: recipeStore.categories is an array of object.

{ recipeStore.categories.map((category, index) => {
              return (
                <View key={index} style={{width: '33.3%', height: 300, padding: 20}}>
                  <Card>
                    <CardItem cardBody>
                      <Image
                        style={{width: '100%', height: 200}}
                        source={{uri: category.image}}
                      />
                      </CardItem>
                      <CardItem button onPress={() => navigate('RecipeDetailScreen', { recipe: category.recipes[0] })}>
                        <Left>
                          <Ionicons name={category.icon} style={{fontSize: 25}}/>
                        </Left>
                        <Right>
                          <Text>{ category.name }</Text>
                        </Right>  
                      </CardItem>
                    </Card>
                  </View>

I will need to anticipate for even longer word in the future as well. If I get a menu that is longer, I don't mind having it to overflow to next line. Something like below:

How can I make my card to handle overflow of long words?

Sorry, it is a private project. Do you have any idea how to approach it, though? — Iggy, Aug 19 '17 at 18:25
I am working on similar project, i will post you my approach to this problem :) cheers — Ganesh Cauda, Aug 21 '17 at 00:47
Awesome. Thanks @GaneshCauda. Likewise I will post an Answer if I figure it out before you! — Iggy, Aug 21 '17 at 20:59

score 1 · Answer 1 · answered Sep 09 '17 at 04:47

Haven't replicated exactly what you have but the following could work. In the <CardItem footer> the <Left> and <Right> will by default take up equal space. Use the flex property to allow <Right> to be wider than <Left>

   <CardItem footer style={{flex:4}}>
        <Left style={{flex:1}}>
           <Ionicons name="ios-microphone"/>
        </Left>
        <Right style={{flex:3}}>
          <Text>Hamburgerrrrsssssssss</Text>
        </Right>
   </CardItem>

NativeBase CardItem Text out of place?

1 Answers1