view layout props is not working properly - react-native

Question

import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
Alert,
Image,
Button,
TextInput,
Dimensions
} from "react-native";
import { Dialog } from "react-native-simple-dialogs";
import AsyncStorage from "#react-native-community/async-storage";
import { KeyboardAvoidingView } from "react-native";
import DropdownAlert from "react-native-dropdownalert";
import { BoxShadow } from "react-native-shadow";
import { DrawerActions } from "react-navigation-drawer";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";
import datum from "./data";
import { Marker } from "react-native-maps";
import Parse from "parse/react-native";
import Geolocation from "react-native-geolocation-service";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
const homePlace = {
description: "Home",
geometry: {
location: {
lat: 48.8152937,
lng: 2.4597668
}
}
};
const workPlace = {
description: "Work",
geometry: {
location: {
lat: 48.8496818,
lng: 2.2940881
}
}
};
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
lat: 12.9122536,
long: 80.0987121,
picklat: 12.9122536,
picklong: 80.0987121,
droplat: 12.9202954,
droplong: 80.1026819,
curautostate: "pick",
curautostateplaceholder: "Enter your pick up location",
distance: 0,
windowwidth: Dimensions.get("window").width,
windowheight: Dimensions.get("window").height
};
}
componentDidMount() {
Geolocation.requestAuthorization();
Geolocation.getCurrentPosition(
position => {
this.setState({
lat: position.coords.latitude
});
this.setState({
long: position.coords.longitude
});
this.setState({
picklat: position.coords.latitude
});
this.setState({
picklong: position.coords.longitude
});
this.setState({
droplat: position.coords.latitude
});
this.setState({
droplong: position.coords.longitude
});
},
error => {
Alert.alert(
"Please enable the location service",
error.message,
[
{
text: "OK",
onPress: () => console.log("has to exit")
}
],
{
cancelable: false
}
);
},
{
enableHighAccuracy: true,
timeout: 15000,
maximumAge: 10000
}
);
}
tooglestate = getstate => {
if (getstate == "drop") {
this.setState({
curautostate: "drop"
});
this.setState({
curautostateplaceholder: "Enter your drop location"
});
this.setState({
lat: this.state.droplat,
long: this.state.droplong
});
} else if (getstate == "pick") {
this.setState({
curautostate: "pick"
});
this.setState({
curautostateplaceholder: "Enter your pick location"
});
this.setState({
lat: this.state.picklat,
long: this.state.picklong
});
} else {
}
};
executeautocompleteView = text => {
console.log(text);
};
render() {
return (
<View
style={{
flex: 1,
flexDirection: "column",
backgroundColor: datum.secondaryColor
}}
>
<View
style={{
backgroundColor: "#E8EDF1",
width: "100%",
height: "9%",
top: 0,
zIndex: 1,
shadowColor: datum.secondaryColor,
elevation: 20,
flexDirection: "column"
}}
>
<Image
source={require("./Drawbles/Homeicon.png")}
resizeMode="contain"
style={{
width: "10%",
height: "100%",
alignSelf: "center"
}}
/>
</View>
<MapView
style={styles.map}
initialRegion={{
latitude: this.state.lat,
longitude: this.state.long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
region={{
latitude: this.state.lat,
longitude: this.state.long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
>
<Marker
draggable
coordinate={{
latitude: this.state.picklat,
longitude: this.state.picklong
}}
pinColor={"#56954A"}
onDragEnd={e => {
this.setState({
picklat: e.nativeEvent.coordinate.latitude,
picklong: e.nativeEvent.coordinate.longitude,
lat: e.nativeEvent.coordinate.latitude,
long: e.nativeEvent.coordinate.longitude
});
}}
/>
<Marker
draggable
coordinate={{
latitude: this.state.droplat,
longitude: this.state.droplong
}}
pinColor={"#C5441B"}
onDragEnd={e =>
this.setState({
droplat: e.nativeEvent.coordinate.latitude,
droplong: e.nativeEvent.coordinate.longitude,
lat: e.nativeEvent.coordinate.latitude,
long: e.nativeEvent.coordinate.longitude
})
}
/>
</MapView>
<View
style={{
flexDirection: "row",
backgroundColor: datum.secondaryColor,
zIndex: 1,
alignSelf: "center",
top: "10%",
height: this.state.windowheight * 0.07,
width: this.state.windowwidth * 0.9,
shadowColor: datum.secondaryColor,
elevation: 20
}}
>
<TouchableOpacity onPress={() => this.tooglestate("pick")}>
<View
style={{
width: this.state.windowwidth * 0.13,
height: this.state.windowheight * 0.07,
backgroundColor: "#56954A"
}}
/>{" "}
</TouchableOpacity>
<GooglePlacesAutocomplete
placeholder="Search"
minLength={2} // minimum length of text to search
autoFocus={false}
returnKeyType={"search"} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
keyboardAppearance={"light"} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
listViewDisplayed="auto" // true/false/undefined
fetchDetails={true}
renderDescription={row => row.description} // custom description render
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details);
}}
getDefaultValue={() => ""}
query={{
// available options: https://developers.google.com/places/web-service/autocomplete
key: "6Iza4Sy3APa34ewekfaM3yZB-Tt6SNO4",
language: "en", // language of the results
types: "(cities)" // default: 'geocode'
}}
styles={{
textInputContainer: {
width: "100%",
backgroundColor: datum.primaryColor
},
description: {
fontWeight: "bold"
},
textInput: {
backgroundColor: datum.primaryColor
},
predefinedPlacesDescription: {
color: datum.primaryColor
}
}}
currentLocationLabel="Current location"
nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
GoogleReverseGeocodingQuery={
{
// available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
}
}
GooglePlacesSearchQuery={{
// available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
rankby: "distance",
type: "cafe"
}}
GooglePlacesDetailsQuery={{
// available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
fields: "formatted_address"
}}
filterReverseGeocodingByTypes={[
"locality",
"administrative_area_level_3"
]} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
/>
<TouchableOpacity onPress={() => this.tooglestate("drop")}>
<View
style={{
width: this.state.windowwidth * 0.13,
height: this.state.windowheight * 0.07,
backgroundColor: "#C5441B"
}}
/>{" "}
</TouchableOpacity>
</View>
<View
style={{
backgroundColor: datum.secondaryColor,
width: "100%",
height: "9%",
top: "90%",
zIndex: 2,
shadowColor: datum.secondaryColor,
elevation: 20,
flexDirection: "row"
}}
/>
<DropdownAlert ref={ref => (this.dropdown = ref)} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5
},
map: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 2
},
headertext: {
fontSize: 20,
textAlign: "center",
color: datum.secondaryColor,
margin: 10
},
bookingbar: {
flex: 1,
flexDirection: "row",
height: "30%",
width: "100%",
zIndex: 30,
bottom: 0
}
});
I am trying to align the Last view comp to top '90%' but somehow my layout breaks I don't know what went wrong, my black view is supposed to be at the bottom edge of the comp but it slight align up where it suppose to be, I have tried using point/and percentages but nothing seems to work, I don't where is the mistake is that with me or with react native library

Answer 1

You are missing the absolute position property, try this:
<View style={{
backgroundColor: 'blue',
position: 'absolute',
width: '100%',
height: '10%',
top: '90%',
zIndex: 2,
shadowColor: 'black',
elevation: 20,
flexDirection: 'row'
}}/>