Components renders under another component - reactjs

Question

My Tag Component, which consist out of rendered texts and a text input component, renders under another component, my button and behaves super weird.
If you look at the gif you can also see, that the tags from the second line onwards are not getting wrapped by my container style as well.
I made a gif, which should make it easier to see :)
http://www.giphy.com/gifs/JmD2VWAXU3S12LQ0Ya
const styles = StyleSheet.create({
textInput: {
flex: 1,
borderRadius: 8,
paddingLeft: 9,
paddingRight: 9,
height: 30,
marginRight: 15,
},
tagContainer: {
flexDirection: 'row',
flexWrap: 'wrap'
},
tags: {
backgroundColor: "#9AA5B1",
borderRadius: 8,
paddingLeft: 9,
paddingRight: 9,
paddingTop: 4,
paddingBottom: 4,
marginRight: 10,
marginBottom: 4,
flexDirection: "row",
},
text: {
color: "white",
},
container: {
backgroundColor: '#F5F7FA',
borderRadius: 8,
paddingLeft: 9,
paddingRight: 9,
height: 30,
marginRight: 15,
flexDirection: "row",
flexWrap: "wrap",
},
});
renderTags1 = (tag, index, deleteTag) => {
return (
<TouchableOpacity
onPress={index => deleteTag(index)}
style={styles.tags}
key={`${tag}-${index}`}
>
<Text style={styles.text}>{tag}</Text>
</TouchableOpacity>
);
};
const InputTags = ({ tags, value, onChangeText, deleteTag }) => {
return (
<View style={styles.container}>
<View style={styles.tagContainer}>
{tags.map((tag, index) => {
return this.renderTags1(tag, index, deleteTag);
})}
</View>
<TextInput
style={styles.textInput}
placeholder="Outdoor"
onChangeText={text => onChangeText({ text })}
value={value}
autoCorrect={false}
multiline={true}
/>
</View>
);
};
export { InputTags };
For my Button :
import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
view: {
backgroundColor: '#E12D39',
width: 280,
height: 50,
justifyContent: 'center',
alignSelf: 'center',
borderRadius: 10,
marginTop: 40,
marginBottom: 40,
},
text: {
alignSelf: 'center',
fontFamily: 'OpenSans-Semibold',
fontSize: 22,
color: 'white',
},
});
const SearchButton = ({ onPress, text }) => {
return (
<TouchableOpacity style={styles.view} onPress={onPress}>
<Text style={styles.text}>{text}</Text>
</TouchableOpacity>
);
};
export { SearchButton };
Expected behavior is for the Button to go down. Tried to remove every single flex property, but could not quite figure it out yet

Answer 1

seems like the height is not increasing when it wraps, could confirm it by making the container bg a different color
Looks like you hard coded the height to be 30, which is probably causing the bug