how to use inline flex property in react native - react-native

Question

Here's what I'm trying to achieve:
I want to display inline all these three elements inside each Block.
Here's what I have done so far:
export default function App() {
const cheers = [
'cheers',
'high five'
]
return (
<Block style={{ flex: 1,
flexDirection: "row",
alignContent: "space-between",
marginTop: 50}}
>
<Block style={{ flex: 2, justifyContent: 'center'}}>
<Text style={{marginRight: 5}}>Send a</Text>
</Block>
<Block style={[styles.dropdownsRow, {flex: 2}]}>
<SelectDropdownMenu
data={cheers}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
defaultButtonText={'Cheers'}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem.name;
}}
rowTextForSelection={(item, index) => {
return item.name;
}}
buttonStyle={styles.dropdown1BtnStyle}
buttonTextStyle={styles.dropdown1BtnTxtStyle}
renderDropdownIcon={isOpened => {
return <FontAwesome name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#8898aa'} size={10} />;
}}
dropdownIconPosition={'right'}
dropdownStyle={styles.dropdown1DropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdown1RowTxtStyle}
/>
</Block>
<Block style={{flex: 2, justifyContent: 'center' }}>
<Text style={{marginLeft: 5, marginRight: 5}}>to</Text>
</Block>
<Block style={{ justifyContent: 'center'}}>
<Input
right placeholder="Type your custom question here."
iconContent={<Block />}
/>
</Block>
);
}
const styles = StyleSheet.create({
dropdownsRow: {justifyContent: 'center', maxWidth: '10%'},
dropdown1BtnStyle: {
height: 45,
backgroundColor: '#edeff2',
borderRadius: 5,
borderColor: '#444',
},
dropdown1BtnTxtStyle: {color: '#8898aa', textAlign: 'left', fontSize: 14},
dropdown1DropdownStyle: {backgroundColor: '#EFEFEF'},
dropdown1RowStyle: {backgroundColor: '#EFEFEF', borderBottomColor: '#C5C5C5'},
dropdown1RowTxtStyle: {color: '#444', textAlign: 'left'}
});
I'm new to react native and don't know how flex property works.
Here's my sample output:
The whole code found here whole code

Answer 1

You can use Yoga layout website to find your desired UI and then migrate your styles to your code.