React Native Positioning Element with Flex
In the previous article Layout and Flexbox, we discuss about the Flexbox and its properties. In this tutorial, we will set the position of elements with Flex.
Example 1
Create a View component and place two elements TextInput and Button. The View component with flex property (1) occupy full space of device. The elements TextInput and Button are set in default flex axis (as column).
import { StyleSheet, TextInput, View , Button } from "react-native";
export default class App extends Component {
state = {
placeName: "",
places: []
};
placeNameChangedHandler = val => {
this.setState({
placeName: val
});
};
placeSubmitHandler = () => {
alert("button clicked")
};
render() {
return (
<View style={styles.container}>
<TextInput
placeholder="An awesome place"
onChangeText={this.placeNameChangedHandler}
style={styles.placeInput}
/>
<Button
title="Button"
onPress={this.placeSubmitHandler}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 26,
backgroundColor: "#fff",
justifyContent: "flex-start"
}
});
Output:
Example 2
In this example, we will place the Button right to TextInput element. Add a child View component inside parent View with flex: 1 and flexDirtection : "row". Setting flex: 1 for inner View occupies whole space from top to bottom and left to right. The flexDirtection: "row" set the elements in row-wise inside the inner View component.
import { StyleSheet, View, TextInput, Button } from "react-native";
export default class App extends Component {
state = {
placeName: "",
places: []
};
placeNameChangedHandler = val => {
this.setState({
placeName: val
});
};
placeSubmitHandler = () => {
alert("button clicked")
};
render() {
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<TextInput
placeholder="An awesome place"
onChangeText={this.placeNameChangedHandler}
/>
<Button
title="Button"
onPress={this.placeSubmitHandler}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 26,
backgroundColor: "#fff",
justifyContent: "flex-start"
},
innerContainer:{
flex: 1,
flexDirection: "row"
}
});
Output:
The flex: 1 for inner View occupy full space which does not look good as the TextInput and Button occupy all space from top to bottom.
Example 3
In this example, we remove flex property of inner View and add width: 100%. Removing flex form inner View set the default dimension of elements. Setting width :"100%" for inner View occupy full width and default height of elements.
import { StyleSheet, View, TextInput, Button } from "react-native";
export default class App extends Component {
state = {
placeName: "",
places: []
};
placeNameChangedHandler = val => {
this.setState({
placeName: val
});
};
placeSubmitHandler = () => {
alert("button clicked")
};
render() {
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<TextInput
placeholder="An awesome place"
onChangeText={this.placeNameChangedHandler}
style={styles.textStyle}
/>
<Button
title="Button"
onPress={this.placeSubmitHandler}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 26,
backgroundColor: "#fff",
justifyContent: "flex-start"
},
innerContainer:{
// flex: 1,
width: "100%",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
textStyle:{
width: "70%",
backgroundColor: "gray",
},
buttonStyle:{
width: "30%",
}
});
Output:
