Bug Report

[iamharisdev]

The text filed of liat view is not showing in dark mood

When I turn on dark mood on mobile and after that run the app on this filed when I input something the list of this pakcage is open but the data is not visible due to dark mood

and I try to and some style for color in listView and row style but not working

Reproduction - (required - issue will be closed without this)

Steps to reproduce the behavior - a minimal reproducible code example, link to a snack or a repository.

Please provide a FULLY REPRODUCIBLE example.

{ let obj = { value: data?.description, lat: details?.geometry?.location.lat, lng: details?.geometry?.location.lng, }; callBack(obj); }} fetchDetails={true} styles={{ textInput: styles.inputStyle, row: {padding: wp(2)},

    }}
    textInputProps={textInputProps}
    suppressDefaultStyles={true}
    query={{
      key: '',
      language: 'en',
    }}
    enablePoweredByContainer={false}
  />
</View>

• Library Version: [2.5.6]

• React Native Version: [0.72.1]

• iOS

• Android

[sahilkashyap64]

suppressDefaultStyles={true}
and copy paste the default style the library in the styles={{}} and add the list view added and textInput style added
here's my full code

import React, { useRef, useEffect } from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { GOOGLE_MAPS_AUTOCOMPLETE_API_KEY } from '../../constants';
import { getReverseCodeLocation } from '../../api/locations';

navigator.geolocation = require('react-native-geolocation-service');

const AddressPicker = ({ onSelect, latitude, longitude }) => {
    const originRef = useRef();

    useEffect(() => {
        originRef.current?.setAddressText('Fetching location');
    }, []);

    useEffect(() => {
        handlePlaceSelect(latitude, longitude);
    }, [latitude !== 0 && longitude !== 0]);

    const handlePlaceSelect = async (latitude, longitude) => {
        try {
            if (latitude && longitude) {
                const response = await getReverseCodeLocation(latitude, longitude);
                if (response.ok) {
                    const locationData = await response.json();
                    const address = locationData.results[0].formatted_address;
                    originRef.current?.setAddressText(address);
                    onSelect(locationData.results[0]);
                } else {
                    originRef.current?.setAddressText('Error');
                }
            }
        } catch (error) {
            console.error("Error handling place selection:", error);
        }
    };

    return (
        <View>
            <ScrollView keyboardShouldPersistTaps="handled">
                <View keyboardShouldPersistTaps="handled">
                    <GooglePlacesAutocomplete
                        ref={originRef}
                        currentLocation={true}
                        placeholder='Enter your location'
                        minLength={2}
                        autoFocus={true}
                        returnKeyType={'search'}
                        keyboardAppearance={'light'}
                        listViewDisplayed='true'
                        fetchDetails={true}
                        enableHighAccuracyLocation={true}
                        onPress={(data, details = null) => {
                            if (data && details) {
                                onSelect(details);
                            }
                        }}
                        nearbyPlacesAPI='GoogleReverseGeocoding'
                        GooglePlacesSearchQuery={{
                            fields: "geometry",
                            rankby: 'distance',
                        }}
                        getDefaultValue={() => ''}
                        query={{
                            key: GOOGLE_MAPS_AUTOCOMPLETE_API_KEY,
                        }}
// -----default style from lib pasted in this with listView and TextInput
                        styles={{
                  container: {
                    flex: 1,
                  },
                  textInputContainer: {
                    flexDirection: 'row',
                  },
                  textInput: {
                    color: '#5d5d5d',
                    backgroundColor: '#FFFFFF',
                    height: 44,
                    borderRadius: 5,
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    fontSize: 15,
                    flex: 1,
                    marginBottom: 5,
                  },
                  listView: {color : 'black'},
                  row: {
                    backgroundColor: '#FFFFFF',
                    padding: 13,
                    minHeight: 44,
                    flexDirection: 'row',
                  },
                  loader: {
                    flexDirection: 'row',
                    justifyContent: 'flex-end',
                    height: 20,
                  },
                  description : {color : 'black'},
                  separator: {
                    height: StyleSheet.hairlineWidth,
                    backgroundColor: '#c8c7cc',
                  },
                  poweredContainer: {
                    justifyContent: 'flex-end',
                    alignItems: 'center',
                    borderBottomRightRadius: 5,
                    borderBottomLeftRadius: 5,
                    borderColor: '#c8c7cc',
                    borderTopWidth: 0.5,
                  },
                  powered: {},
                }}
                        suppressDefaultStyles={true} //<--- see this
                        textInputProps={{ onBlur: () => {} }}
                        GooglePlacesDetailsQuery={{ fields: ['geometry', 'formatted_address'] }}
                        debounce={300}
                    />
                </View>
            </ScrollView>
        </View>
    );
};

export default AddressPicker;