CODEWITHSUNDEEP
htmlcssreact-native
Tempuslight
Tempuslight

Reputation: 1223

React Native: How to align all items horizontally, using FlexBox, with some space between them?

How can I use Flex-box to align these items horizontally, with some space between them?
This is my code:

          <View>
            <Text style={styles.header} >{title}</Text>
            <Card style={styles.card} elevation={3}>
                <Text style={styles.itemTitle}>Pakken Cola Zero</Text>
                <Text style={styles.separator}>|</Text>
                <TouchableOpacity style={styles.touchableOpacity} onPress={() => alert('+')}>
                    <Text>+</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.touchableOpacity} onPress={() => alert('-')}>
                    <Text>-</Text>
                </TouchableOpacity>
            </Card>
            <Button title='Add to firebase' onPress={() => addToFirebase(title)}></Button>
          </View>  

CSS i have right now:  

    export default StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fafafa',
      alignItems: 'center',
      justifyContent: 'center',
    },
    header: {
      textAlign: 'center',
      fontSize: 24,
      marginTop: 25,
    },
    card: {
      margin: 30,
      padding: 50,
      width: '83%',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      flexDirection: 'row',
    },
    itemTitle: {
      
    },
    separator: {
      color: '#b0b5b1',
    },
    touchableOpacity: {
      padding: 25
    }
  });

This is the result I want (made in paint so not precise...):

How can I achieve this using Flex-box? [1]: https://i.sstatic.net/R5GUx.png [2]: https://i.sstatic.net/XxX5W.png

Upvotes: 0

Views: 2835

Answers (1)

Alen.Toma
Alen.Toma

Reputation: 4870

Well, I was not able to fix this with Card but it is easy to do it with a View

Have a look here

  • Note: when you try to build something like that try to separate those component with View or something else. Text dose not really follow % styles values sometimes. eg when the screen orientation changes.

Upvotes: 1

Related Questions