I'm trying to create a filter button. I need the Scrollview because the categories comes from an API and it wouldn't fit in a single screen size. I need the height to wrap content because the Scrollview is horozontal but it did not work when I used alignSelf:'baseline'. I could wrap the ScrollView around a View but the button height is not static.

This is how the screen looks like:

<ScrollView 
    showsHorizontalScrollIndicator={false} 
    horizontal={true} 
    style={[GlobalStyle.ListTab]}>
    {listTab.map(item => (
        <TouchableOpacity key={item.id} 
            activeOpacity={0.8} 
            onPress={() => setStatusFilter(item.name)} 
            style={[GlobalStyle.ButtonTab, status === item.name && GlobalStyle.ActiveButtonTab]}> 
            <Text style={[GlobalStyle.TextTab]}>{item.name}</Text>
        </TouchableOpacity>
    ))}
</ScrollView>

GlobalStyle.js

ListTab: {
    alignSelf:'baseline',
    marginBottom: 20,
    backgroundColor: red,
},
ButtonTab: {
    minWidth: DEVICE_WIDTH / 3.6,
    flexDirection: 'row',
    padding: 10,
    justifyContent: 'center', 
    backgroundColor: white,
    marginHorizontal: 10, 
    elevation: 10,
    alignSelf:'baseline', 
},
TextTab: {
    fontSize: 16,
    alignSelf:'baseline', 
},
ActiveButtonTab: {
    backgroundColor: purple,
},