Parallel view inside a view in ReactNative - react-native

Question

I'm trying to generate a component with a search bar inside a view and a couple of buttons inside other view. Something like this:
Expected
I develop this piece of code but I'm not able to do this parallel view.
import React from "react";
import { StyleSheet, View, FlatList, Image, Text, Item } from "react-native";
import { colorUtil } from "../../constants/Colours";
import { SearchBar, Button } from 'react-native-elements';
export default class App extends React.Component {
state = {
search: '',
};
updateSearch = search => {
this.setState({ search });
};
render() {
const { search } = this.state;
const styles = StyleSheet.create({
searchBarContainer: {
borderBottomWidth: 1,
borderBottomColor: '#e2e2e2',
height: 64,
backgroundColor: '#FFFFFF'
},
searchBarField: {
position: 'relative',
margin: 0,
width: '48%',
//padding: 44,
//fontSize: 14,
borderRadius: 80,
backgroundColor: '#E5E7E8'
},
btnField: {
borderBottomWidth: 1,
borderBottomColor: '#e2e2e2',
height: 64,
backgroundColor: '#FFFFFF'
}
});
return (
<View style={styles.searchBarContainer}>
<View style={styles.searchBarField}>
<SearchBar
lightTheme
onChangeText={this.updateSearch}
onClearText={this.updateSearch}
value={search}
icon={{ type: 'font-awesome', name: 'search' }}
placeholder='Find' />
</View>
<View style={styles.btnField}>
<Button
title="Solid Button"
/>
</View>
</View>
);
}
}
But the result is not equal to. How can I make this fields parallel?

Answer 1

You have to set the flex direction of parent view to row to place everything in the same line.
Also removing the height property will align the content properly.
searchBarContainer: {
borderBottomWidth: 1,
borderBottomColor: '#e2e2e2',
height: 64,
backgroundColor: '#FFFFFF',
flexDirection: 'row',
alignItems: 'center',
},
btnField: {
borderBottomWidth: 1,
borderBottomColor: '#e2e2e2',
backgroundColor: '#FFFFFF',
},