Kitten UI (React Native) Input Styles incorporate in React Native Google Places Auto Complete

Question

I'm trying to use the exact style of React Native Kitten UI Auto Complete with Theme(light and dark) capability in the React Native Google Places Auto Complete

Have tried a few things like custom style in <GooglePlacesAutoComplete style={-CUSTOM-STYLE-}, but I believe there would be a lot of customization to be done.

Do we know of any better way to handle this?

Answer 1

Got a little closer to where I wanted. Still not able to style based on onFocus. But anything is better than nothing. Will keep updating this answer.

import React, { useEffect, useRef } from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { Text, useTheme } from '@ui-kitten/components';
import { withStyles } from '@ui-kitten/components';

const GooglePlacesInput = () => {
    const ref = useRef();
    const theme = useTheme();
    useEffect(() => {
        ref.current?.setAddressText('');
    }, []);

    return (
        <>
            <Text category='label' appearance='hint'>Place</Text>
            <GooglePlacesAutocomplete
                ref={ref}
                placeholder='Search'
                onPress={(data, details = null) => {
                    // 'details' is provided when fetchDetails = true
                    console.log(data, details);
                }}
                query={{
                    key: 'YOUR_API_KEY',
                    language: 'en',
                }}
                styles={{
                    poweredContainer:{display:'none'},
                    textInput:{
                        color:theme['text-basic-color'],
                        backgroundColor:theme['background-basic-color-2'],
                        borderColor: theme['border-basic-color-4'],
                        borderWidth:1,
                        height:40,
                        marginTop:5
                    }
                }}
            />
        </>

    );
};

export default withStyles(GooglePlacesInput);