Unable to see the list items in the result list. Spent a full day figuring out what it might be, still unable to resolve it.
When search results appear, I cannot see the text. listview style doesn't color the text.
<GooglePlacesAutocomplete
returnKeyType={'default'}
fetchDetails={true}
minLength={2}
placeholder="Search"
textInputProps={{
placeholderTextColor: '#32a852',
returnKeyType: 'search',
}}
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details);
}}
query={{
key: GOOGLE_API_KEY,
language: 'en',
}}
styles={{
textInput: {
height: 38,
color: '#5d5d5d',
fontSize: 16,
},
predefinedPlacesDescription: {
color: '#1faadb',
},
listView: {color: 'black', zIndex: 100000}, // doesnt work, text is still white?
}}
/>
</View>
In styles, add description for changing the color or any other style attribute.
styles = {{
...
description : {color : 'black'}
}}
Related
I'm using the react-native-gifted-chat package for my React Native application.
Somehow there is a space between the composer and the keyboard, although I did not customise the GiftedChat.
Marked orange in the attached screenshot:
I already tried to customise the composer or any other component, with not effect.
i'm also facing same problem after some time i find this solution and it's work for me.
<GiftedChat
isAnimated
messages={this.state.messages}
scrollToBottom={true}
renderUsernameOnMessage={true}
onSend={messages => this.onSend(messages)}
inverted={false}
isLoadingEarlier={true}
messagesContainerStyle={{ color: 'gray' }}
bottomOffset={0} // add this line and space is remove
renderBubble={props => {
return (
<Bubble
{...props}
textStyle={{
right: {
color: 'white',
},
left: {
color: '#24204F',
},
}}
wrapperStyle={{
left: {
backgroundColor: 'white',
},
right: {
backgroundColor: "#ff3b00", // red
},
}}
/>
);
}}
renderInputToolbar={props => {
return (<InputToolbar {...props} containerStyle={{ backgroundColor: '#e2e2e2' }} />);
}}
user={{
_id: 1
}}
/>
hope this willl work for you
bottomOffset={0} // add this line and space is remove
install react-native-iphone-x-helper
and add these lines according to your code.
import { getBottomSpace } from 'react-native-iphone-x-helper';
<GiftedChat
bottomOffset={getBottomSpace()}
...
/>
As found on the docs itself, simply get the insets:
const insets = useSafeAreaInsets();
<GiftedChat
bottomOffset={insets.bottom}
...
/>
This will fix your issue dynamically.
I use MaterialDropdown from "react-native-material-dropdown", it's working fine but I'd like to change the style of the selected item to make it more visible.
I used selectedItemColor to make it black but I'd like to make it bold and underlined... I don't know how "selectedItemStyle" doesn't work:
<MaterialDropdown
data={data_dropdown}
// pickerStyle={styles.dropdownPickerStyle}
affixTextStyle={{ fontFamily: "FunctionLH" }}
itemTextStyle={{ fontFamily: "FunctionLH" }}
selectedItemStyle={{fontWeight: 'bold', textDecorationLine: 'underline'}}
selectedItemColor='rgb(0, 0, 0)'
containerStyle={[styles.dropdownContainerStyle, {opacity: 0}]}
itemCount={10}
dropdownPosition={-4.5}
dropdownOffset={{top: 32, left: 5 }}
underlineColor='transparent'
labelExtractor={({ label }) => label}
valueExtractor={({ value }) => value}
//propsExtractor={({ props }, index) => props}
propsExtractor={({value, index}) => { return (value === '*' ? {style:
{borderBottomColor: '#D1D1D1', borderBottomWidth: 1, paddingTop: 5}} :
{style: {}}) }}
onChangeText={(value) => this.choiceAction(value)}
useNativeDriver={true}
/>
By looking at the source-code, selectedItemStyle isn't supported as a prop in react-native-material-dropdown. You have to make a pull request.
I have integrated https://github.com/FaridSafi/react-native-google-places-autocomplete successfully and now need only to know how to get suggestions from zip-code . Example: When i write '35801' in search text-input, It should give me 'Huntsville, AL' in suggestions instead other all address, 'Huntsville, AL' should be prioritised
My autocomplete component
<GooglePlacesAutocomplete
placeholder='Search'
minLength={2}
autoFocus={false}
returnKeyType={'search'}
keyboardAppearance={'light'}
listViewDisplayed={false}
fetchDetails={true}
keyboardShouldPersistTaps="handled"
renderDescription={row => row.description}
onPress={(data, details = null) => {
console.log(data,details);
this.setState({location:data.structured_formatting.main_text, user_long:details.geometry.location.lng, user_lat: details.geometry.location.lat })
}}
enablePoweredByContainer={false}
getDefaultValue={() => ''}
textInputProps={{
ref: (input) => {this.fourthTextInput = input}
}}
query={{
// available options: https://developers.google.com/places/web-service/autocomplete
key: 'api-key',
language: 'en',
region: "US", //It removes the country name from the suggestion list
types: '', // default: 'geocode'
components: 'country:us'
}}
styles={{
container: {width:width/1.4}
textInputContainer: {
backgroundColor: 'transparent',
margin: 0,
width: width / 1.4,
padding:0,
borderTopWidth: 0,
borderBottomWidth:0
},
textInput: {
textAlign: 'center',
minWidth: width/1.4,
borderColor: "#cbb4c0",
borderBottomWidth: 1,
color: '#5d5d5d',
fontSize: 14,
},
description: {
color:'#ac879a',
fontWeight: '300'
},
predefinedPlacesDescription: {
color: '#1faadb'
}
}}
currentLocation={false}
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']}
debounce={200}
/>
The zipcode or postal code is found inside "details" returned from the onPress event.
It'll actually be inside an array of objects (address_components) inside it.
The thing is that its position can vary.
The best way I found was to iterate this array looking for the type "postal_code".
Here is what has worked for me:
const [postalCode, setPostalCode] = useState("")
return (
<GooglePlacesAutocomplete
placeholder='Search'
onPress={(data, details) => {
for (let i = 0; i < details.address_components.length; i++) {
if (details.address_components[i].types[0] === "postal_code") {
setPostalCode(details.address_components[i].long_name)
}
}
}}
enablePoweredByContainer={false}
fetchDetails={true}
onFail={(error) => console.log("Error at finding location: ", error)}
query={{
key: googleKey,
language: "en",
}}
/>
)
Edited in 08/07/21
Another option is to split the string received on details.formatted_address.
This might be easier.
I hope it hepls!
You can use the '(region)' type in the query prop.
<GooglePlacesAutocomplete
placeholder="Search"
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details);
}}
query={{
key: GOOGLE_PLACES_API_KEY,
language: "en", // language of the results
types: "(regions)",
}}
/>
If you are looking to only search within a specific country use:
query={{
key: GOOGLE_PLACES_API_KEY,
language: "en", // language of the results
types: "(regions)",
components: "country:us",
}}
How can I change text color of TextInput in React Native Paper without wrapping in PaperProvider?
Currently this works:
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
text: "orange",
}
};
<PaperProvider theme={theme}>
<TargetComponent />
</PaperProvider>
However I want to control text color through passed props from a parent component.
Strangely, passing backgroundColor works but color does not.
Removing the PaperProvider wrapping doesn't help either.
This is the relevant code in TargetComponent:
return (
<View style={styles.container}>
<TextInput
type="outlined"
style={this.props.style}
onChangeText={this.props.onChange}
label={this.props.label}
value={this.props.value || "Replace this text"}
placeholder={this.props.placeholder}
/>
</View>
)
this.props.style is:
{
color: "orange", // This does not work
backgroundColor: "transparent" // This works
},
Found a solution. But for those in the same predicament:
For some reason color is not recognized as a style prop even though others, like backgroundColor, are.
Simply pass theme as a prop to TextInput. In that theme object, assign the text color like so:
<TextInput
type="outlined"
style={{ ...styles.textInput, ...this.props.style }}
underlineColor={this.theme.colors.primary}
onChangeText={this.props.onChange}
label={this.props.label}
value={this.props.value || "Replace this text"}
placeholder={this.props.placeholder}
theme={{ colors: { text: this.props.style.color } }}
/>
Updated for functional components and React Native Paper 5.x
(also if you want label color control):
const MyFuncComponent = ({style, colors, onChange, label, value}) => {
const Label = <Text color={style.labelColor}>{label}</Text>;
<TextInput
type="outlined"
style={{ ...styles.textInput, ...style }}
underlineColor={theme.colors.primary}
onChangeText={onChange}
label={Label}
value={value || "Replace this text"}
placeholder={placeholder}
textColor={style.color}
/>
}
theme={{
colors: {
placeholder: 'white', text: 'white', primary: 'white',
underlineColor: 'transparent', background: '#003489'
}
}}
Just add this line theme={{colors: {text: 'Your Color' }}} to the <TextInput/> of React native paper.
<TextInput
placeholder= {'Some Text'}
theme={{
colors: {
text: 'white',
}
}}
<TextInput
type="outlined"
style={this.props.style}
onChangeText={this.props.onChange}
label={this.props.label}
value={this.props.value || "Replace this text"}
placeholder={this.props.placeholder}
theme={{ colors: { text: 'white' } }}
/>
just add color in --- theme={{ colors: { text: 'your_color' } }}
<View style={{
flex: 1,
paddingTop:100
}}>
<Text>asfhjdshfdsbfbusdufn</Text>
<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: 'AIzaSyAPCorWKWM29Dok3YxgfEGMyZB-Tt6SNO4',
language: 'en', // language of the results
types: '(cities)' // default: 'geocode'
}}
styles={{
textInputContainer: {
width: '100%'
},
description: {
fontWeight: 'bold'
},
predefinedPlacesDescription: {
color: '#1faadb'
}
}}
currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
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
predefinedPlaces={[homePlace, workPlace]}
debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
// renderLeftButton={() => <Image source={require('path/custom/left-icon')} />}
renderRightButton={() => <Text>Custom text after the input</Text>}
/>
</View>
</MapView>
the image link
I am trying to add google autocomplete view to my react native app, I struck while I am trying to align that component it stays on the top and tried padding-top to the container view but it doesn't work ,but the text component is work just fine with alignment whereas the auto complete doesn't obey my behaviour
You can use SafeAreaView. Official document is here
Did you try to change the style to absolute?
eg:
styles={{
...
container: {
position: 'absolute',
top: 100,
left: 10,
right: 10,
width: Dimensions.get('window').width - 20,
height: 50
}
...
}}