Align a component to right in react native - react-native

Question

In my application, I want to align a component (searchBar) to the right corner of my screen.
The mainWrapper has flexDirection RIGHT, so I tried to use justifyContent: "flex-end". But it did not work. What am I doing wrong here?
import React from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";
import { DefaultButton , ClickableIcon} from "../../mixing/UI";
import { Search } from "../../config/images";
const width = Dimensions.get("window").width;
const chooseWorkoutHeader = props => (
<View style={styles.mainWrapper}>
<View style={styles.buttonWrapper}>
<DefaultButton
buttonText={styles.buttonText}
width={width * 0.3}
backgroundColor="white"
onPress={() => props.onClickPlaylists}>
Playlists
</DefaultButton>
<DefaultButton
buttonText={styles.buttonText}
width={width * 0.3}
backgroundColor="white"
onPress={() => props.onClickSortBy}>
Sort By
</DefaultButton>
</View>
{/* <View style={styles.searchBar}> */}
<ClickableIcon
source={Search}
height={35}
width={35}
style={styles.searchBar}
// onIconPressed={() => {
// navigation.navigate("mainfeed");
// }}
/>
{/* </View> */}
</View>
);
const styles = StyleSheet.create({
mainWrapper: {
borderWidth: 3,
flexDirection: "row",
padding: 10,
width: width,
backgroundColor: "white"
},
buttonWrapper: {
flexDirection: "row",
justifyContent: "space-between",
width: width * 0.62
},
buttonText: {
fontSize: 18,
textAlign: "center",
color: "gray"
},
searchBar: {
borderWidth: 1,
padding: 1,
justifyContent: 'flex-end'
}
});
export default chooseWorkoutHeader;
I tried alignSelf as well. But none of them worked. How to move the ClickableIcon which has styles as "searchBar" to the right of the screen?

Answer 1

You can achive this by putting flex: 1 for buttonWrapper
buttonWrapper: {
flexDirection: "row",
justifyContent: "space-between",
width: width * 0.62,
flex: 1, // Add this line
}
You have two component inside mainWrapper (buttonWrapper and ClickableIcon). flex: 1 will expand maximum with of buttonWrapper and leave space for ClickableIcon in right side.

Answer 2

Do you tried adding this to your "mainWrapper":
display: "flex"
As far as i know "flex" only workings when you also set the display attribute