Comments (2)
Apologies Mr. @jaing. Have you heard of this ? any idea if this is a simple matter of zIndex or do I need to do something else ?
from react-native-places-input.
Unless you will provide a full report with not working example I wont be able to help. I copied your code and remove native base only and it was working fine:
https://drive.google.com/open?id=1dMHge_hFSEFq4aFd352cH3qGWC6o0pet
import { View, Text, StyleSheet, TextInput } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import PlacesInput from '../components/places-input/index';
import { GOOGLE_API_KEY } from "../constants/config";
const orange = 'red';
export default () => {
return (
<View style={[ styles.container]}>
<View style={[styles.row, styles.topRow]}>
<FontAwesome name="circle" color={orange} size={10} />
<View style={[styles.textWrapper]}>
<Text style={styles.greyText}>Origen</Text>
<PlacesInput
queryCountries={['mx']}
placeHolder={''}
stylesInput={{
height: 25,
backgroundColor: 'transparent', // para que ni pise el greyText,
color: orange,
}}
stylesContainer={{
position: 'relative',
alignSelf: 'stretch',
margin: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
shadowOpacity: 0,
borderColor: 'white',
borderWidth: 1,
marginBottom: 9, // hace que la listView tape el underline, no perfecto
elevation: 0, // remove shadow on android
}}
stylesList={{
top: 1, // shrink space between nput and list
borderColor: '#dedede',
borderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
left: -1,
right: -1,
backgroundColor: 'white', // so the input below isint visible
zIndex: 2,
elevation: 3,
}}
googleApiKey={GOOGLE_API_KEY}
onSelect={place => {
console.log("origin onSelect: ", place);
}}
/>
</View>
</View>
<View style={[styles.row, styles.bottomRow]}>
<FontAwesome name="map-marker" color={orange} size={10} />
<View style={styles.textWrapper}>
<Text style={[styles.greyText, { marginBottom: -4 }]}>Destino</Text>
{/*
<Text style={[styles.orangeText]}> {destination}</Text> */}
<PlacesInput
queryCountries={['mx']}
placeHolder=""
googleApiKey={GOOGLE_API_KEY}
stylesInput={{
height: 25,
backgroundColor: 'transparent',
color: orange,
borderWidth: 0,
}}
textInputProps={{
underlineColorAndroid: 'transparent', // noline in andoird
}}
stylesContainer={{
position: 'relative',
alignSelf: 'stretch',
margin: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
shadowOpacity: 0,
borderColor: 'transparent',
borderWidth: 0,
marginBottom: 10,
elevation: 0, // quitar la puta boxShadow del input en android !!
backgroundColor: 'transparent', // para que ni pise el greyText
}}
stylesList={{
top: 1, // encoger espacio entre input y lista estaba en 50
borderColor: '#dedede',
borderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
left: -1,
right: -1,
}}
onSelect={place => {
}}
/>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
position: 'absolute',
left: 10,
right: 10,
top: 50,
},
textWrapper: { marginLeft: 20, marginRight: 'auto', flex: 1, height: 30 },
orangeText: { color: orange },
greyText: { color: '#BFBFBF', fontSize: 10, zIndex: -1 },
row: {
padding: 10,
paddingLeft: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
topRow: {
borderBottomColor: 'rgba(112,112,112,0.08)',
borderBottomWidth: 1,
paddingTop: 0,
zIndex: 10, // que este arriba del input de abajo
},
bottomRow: {
paddingBottom: 0,
zIndex: 5, // Que este abajo del inpout de arriba
},
costBox: {
elevation: 4,
height: 40,
// width: 40,
backgroundColor: orange,
justifyContent: 'center',
padding: 10,
},
costContainer: {
position: 'absolute',
flexDirection: 'row',
top: 0,
bottom: 0,
left: 0,
right: 20,
alignItems: 'center',
justifyContent: 'flex-end',
},
});
from react-native-places-input.
Related Issues (20)
- Add License HOT 3
- Loading indicator on second api request HOT 1
- keyboard doesn't open when clicking on the search bar HOT 2
- Use ScrollView instead of View
- Any way to handle the focus ? HOT 1
- Possible Unhandled Promise Rejection (id: 1): TypeError: Network request failed HOT 1
- Overall positioning of list and impact from keyboard HOT 2
- Set default value HOT 9
- Clear input icon not visible HOT 4
- Query could not clear when submit form HOT 1
- When using in LinearGradient view, Results are overlapping with the below content in IOS
- Can you please call this.onPlaceSearch() when "query" is set so it autopopulates with a list HOT 1
- Overridding query input HOT 1
- Encountered two children with the same key HOT 3
- street number not applied for some addresses even though the predictions include the street address number
- Please, add support with Typescript
- No Results are Returned HOT 2
- iOS TextInput placeholderTextColor support
- Property placeholderTextColor does not work for Android HOT 1
- type declarations for react-native-places-input
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-places-input.