android – react native search change between google locations and retailer quantity

[ad_1]

I’m able to present google locations drop down.
However I’m making an attempt to attach retailer search and google locations
If I choose locations from drop down the search textual content field needs to be changed with google locations drop down.
equally if I choose retailer quantity the locations needs to be changed with a textual content field.
are you able to inform me the way to repair it.
Offering my code and screenshot under

complete codebase https://drive.google.com/file/d/1W74UXDYm44S0QsXILX-rrspQgejEUks0/view?usp=sharing

enter image description here

import 'react-native-gesture-handler';
import React, {useRef, useState} from 'react';
//import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import MapView from 'react-native-map-clustering';
import Autocomplete from 'react-native-autocomplete-input';
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';

//import {Button} from 'react-native';
import {
  Picture,
  LogBox,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Textual content,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {Button, Menu, Supplier} from 'react-native-paper';
import DropDownPicker from 'react-native-dropdown-picker';
//import { Enter } from 'react-native-elements';
//import Geolocation from 'react-native-geolocation-service';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';

LogBox.ignoreAllLogs();
const Drawer = createDrawerNavigator();

const Stack = createNativeStackNavigator();

const information = ['dropdown1', 'drop down 2', 'a drop down'];

const AuthStack = () => {
  return (
    <Drawer.Navigator>
      <Stack.Display title="HomeScreen" part={HomeScreen} />
      <Stack.Display title="HomeScreen2" part={HomeScreen2} />
      <Stack.Display title="HomeScreen7" part={HomeScreen7} />
      <Stack.Display title="HomeScreen8" part={HomeScreen8} />
    </Drawer.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Display
          title="Foremost"
          part={Foremost}
          choices={{headerShown: false}}
        />
        <Stack.Display title="AuthStack">{() => <AuthStack />}</Stack.Display>

        {/* <AuthStack /> */}
        {/* <Stack.Display title="OnboardingScreen" part={OnboardingScreen} /> */}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const Foremost = ({navigation}) => {
  return (
    <SafeAreaView
      type={{
        flex: 1,
        justifyContent: 'heart',
        alignItems: 'heart',
        backgroundColor: '#fff',
      }}>
      <View type={{}}>
        <Textual content type={{fontSize: 30, fontWeight: 'daring', coloration: '#20315f'}}>
          GAMEON
        </Textual content>
      </View>

      <TouchableOpacity
        onPress={() => navigation.navigate('AuthStack')}
        type={{
          backgroundColor: '#AD40AF',
          padding: 20,
          flexDirection: 'row',
          justifyContent: 'space-between',
          coloration: '#fff',
          width: '90%',
          marginBottom: 50,
        }}>
        <Textual content
          type={{
            coloration: '#fff',
            fontWeight: 'daring',
          }}>
          Let's Start
        </Textual content>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const Residence = () => {
  return (
    <View
      type={{
        flex: 1,
        justifyContent: 'heart',
        alignItems: 'heart',
        backgroundColor: '#fff',
      }}>
      <Textual content type={{fontSize: 30, fontWeight: 'daring', coloration: '#20315f'}}>
        Residence
      </Textual content>
    </View>
  );
};

const HomeScreen2 = () => {
  return (
    <View type={kinds.container}>
      <MapView
        // supplier={PROVIDER_GOOGLE}
        // take away if not utilizing Google Maps
        type={kinds.map}
        area={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}></MapView>

   

      <View type={kinds.searchBox}>
        <Autocomplete

        //onChangeText={}
        />
      </View>
   
    </View>
  );
};

const HomeScreen = ({navigation}) => {
  // bs = React.createRef();
  // fall = new Animated.Worth(1);

  const [storeID, setStoreID] = useState([
    {label: 'places', value: 'Store 1'},
    {label: 'Store 2', value: 'Store 2'},
    {label: 'Store 3', value: 'Store 3'},
    {label: 'Store 4', value: 'Store 4'},
  ]);
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);

  const [brand, setBrand] = useState([
    {label: 'Brand 1', value: 'Brand 1'},
    {label: 'Brand 2', value: 'Brand 2'},
  ]);
  const [brandOpen, setBrandOpen] = useState(false);
  const [brandValue, setBrandValue] = useState(null);

  const [product, setProduct] = useState([
    {label: 'Product 1', value: 'Product 1'},
    {label: 'Product 2', value: 'Product 2'},
  ]);
  const [productOpen, setProductOpen] = useState(false);
  const [productValue, setProductValue] = useState(null);

  const [miles, setMiles] = useState([
    {label: 'Miles 1', value: 'Miles 1'},
    {label: 'Miles 2', value: 'Miles 2'},
  ]);
  const [milesOpen, setMilesOpen] = useState(false);
  const [milesValue, setMilesValue] = useState(null);

  const [price, setPrice] = useState([
    {label: 'Price 1', value: 'Price 1'},
    {label: 'Price 2', value: 'Price 2'},
  ]);
  const [priceOpen, setPriceOpen] = useState(false);
  const [priceValue, setPriceValue] = useState(null);

  const [carWash, setCarWash] = useState([
    {label: 'Car Wash 1', value: 'Car Wash 1'},
    {label: 'Car Wash 2', value: 'Car Wash 2'},
  ]);
  const [carWashOpen, setCarWashOpen] = useState(false);
  const [carWashValue, setCarWashValue] = useState(null);

 

  return (
    <SafeAreaView
      type={{
        flex: 1,
        backgroundColor: '#fff',
      }}>
       <GooglePlacesAutocomplete
      placeholder="Search"
      onPress={(information, particulars = null) => {
        // 'particulars' is offered when fetchDetails = true
        console.log(information, particulars);
      }}
      question={{
        key: 'AIzaSyCjpUr3d_4ClE36wF_2nXmb6T7ERYT8dQE',
        language: 'en',
      }}
    /> 
     

      <View
        type={{
          flex: 0.1,
          top: 40,
          alignItems: 'heart',
          flexWrap: 'wrap',
          flexDirection: 'row',
          justifyContent: 'space-evenly',
        }}>
        <View
          type={{
            margin: 10,
            flex: 1.5,
          }}>
          <DropDownPicker
            placeholder={'Retailer ID'}
            open={open}
            worth={worth}
            gadgets={storeID}
            setOpen={setOpen}
            setValue={setValue}
            setItems={setStoreID}
          />
        </View>

        <View
          type={{
            margin: 10,
            flex: 2,
          }}>
          <TextInput
            placeholder="Present location"
            type={{
              top: 40,
              borderWidth: 2,
              borderColor: 'black',
            }}
          />
        </View>
        <View
          type={{
            top: 40,
            margin: 10,
            flex: 1,
          }}>
          <Button
            onPress={() => navigation.navigate('HomeScreen2')}
            type={{
              backgroundColor: 'black',
              textColor: 'white',
              borderRadius: 20,
              borderColor: 'white',
            }}>
            <Textual content type={{coloration: 'white'}}>Map</Textual content>
          </Button>
        </View>
      </View>

      <View
        type={{
          flex: 0.4,
          zIndex: 100,
          elevation: 1000,
        }}>
        <ScrollView
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          contentContainerStyle={{
            alignItems: 'heart',
            flexDirection: 'row',
          }}>
          <View
            type={{
              margin: 10,
              flex: 1,
              zIndex: 100,
            }}>
            <TouchableOpacity onPress={() => bs.present.snapTo(0)}>
              <Textual content>filters</Textual content>
            </TouchableOpacity>

           
          </View>

          <View
            type={{
              margin: 10,
              flex: 1,
              zIndex: 100,
            }}>
            <DropDownPicker
              placeholder={'Model'}
              open={brandOpen}
              worth={brandValue}
              gadgets={model}
              setOpen={setBrandOpen}
              setValue={setBrandValue}
              setItems={setBrand}
            />
          </View>

          <View
            type={{
              margin: 10,
              flex: 1,
            }}>
            <DropDownPicker
              placeholder={'Product'}
              open={productOpen}
              worth={productValue}
              gadgets={product}
              setOpen={setProductOpen}
              setValue={setProductValue}
              setItems={setProduct}
            />
          </View>

          <View
            type={{
              margin: 10,
              flex: 1,
            }}>
            <DropDownPicker
              placeholder={'Miles'}
              open={milesOpen}
              worth={milesValue}
              gadgets={miles}
              setOpen={setMilesOpen}
              setValue={setMilesValue}
              setItems={setMiles}
            />
          </View>

          <View
            type={{
              margin: 10,
              flex: 1,
            }}>
            <DropDownPicker
              placeholder={'Worth'}
              open={priceOpen}
              worth={priceValue}
              gadgets={worth}
              setOpen={setPriceOpen}
              setValue={setPriceValue}
              setItems={setPrice}
            />
          </View>

          <View
            type={{
              margin: 10,
              flex: 1,
            }}>
            <DropDownPicker
              placeholder={'Automotive Wash'}
              open={carWashOpen}
              worth={carWashValue}
              gadgets={carWash}
              setOpen={setCarWashOpen}
              setValue={setCarWashValue}
              setItems={setCarWash}
            />
          </View>
        </ScrollView>
      </View>

      <View
        type={{
          margin: 20,
          flex: 0.5,
        }}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <View
            type={{
              marginBottom: 60,
              top: 200,
              borderWidth: 2,
              borderColor: 'black',
              borderRadius: 20,
            }}>
            <View
              type={{
                marginTop: 20,
                marginStart: 20,
                flexDirection: 'row',
                alignItems: 'heart',
              }}>
              <View
                type={{
                  top: 60,
                  width: 60,
                  borderWidth: 2,
                  borderColor: 'black',
                  borderRadius: 20,
                }}
              />
              <Textual content
                type={{
                  marginStart: 10,
                }}>
                Fuel Station 1
              </Textual content>

              <Button
                type={{
                  marginStart: 70,
                  backgroundColor: 'black',
                  textColor: 'white',
                  borderRadius: 20,
                  borderColor: 'white',
                }}>
                <Textual content type={{coloration: 'white'}}>5.67$</Textual content>
              </Button>
            </View>
            <View
              type={{
                marginTop: 40,
                alignItems: 'heart',
                flexDirection: 'row-reverse',
                justifyContent: 'heart',
              }}>
              {/* <Picture supply = {require('./ic_dollar.png')} />
                            <Picture supply = {require('./ic_wifi.png')} /> */}
            </View>
          </View>

          <View
            type={{
              marginBottom: 60,
              top: 200,
              borderWidth: 2,
              borderColor: 'black',
              borderRadius: 20,
            }}>
            <View
              type={{
                marginTop: 20,
                marginStart: 20,
                flexDirection: 'row',
                alignItems: 'heart',
              }}>
              <View
                type={{
                  top: 60,
                  width: 60,
                  borderWidth: 2,
                  borderColor: 'black',
                  borderRadius: 20,
                }}
              />
              <Textual content
                type={{
                  marginStart: 10,
                }}>
                Fuel Station 2
              </Textual content>
              <Button
                type={{
                  marginStart: 70,
                  backgroundColor: 'black',
                  textColor: 'white',
                  borderRadius: 20,
                  borderColor: 'white',
                }}>
                <Textual content type={{coloration: 'white'}}>9.67$</Textual content>
              </Button>
            </View>
            <View
              type={{
                marginTop: 40,
                alignItems: 'heart',
                flexDirection: 'row-reverse',
                justifyContent: 'heart',
              }}>
              {/* <Picture supply = {require('./ic_dollar.png')} />
                            <Picture supply = {require('./ic_wifi.png')} /> */}
            </View>
          </View>

          <View
            type={{
              marginBottom: 60,
              top: 200,
              borderWidth: 2,
              borderColor: 'black',
              borderRadius: 20,
            }}>
            <View
              type={{
                marginTop: 20,
                marginStart: 20,
                flexDirection: 'row',
                alignItems: 'heart',
              }}>
              <View
                type={{
                  top: 60,
                  width: 60,
                  borderWidth: 2,
                  borderColor: 'black',
                  borderRadius: 20,
                }}
              />
              <Textual content
                type={{
                  marginStart: 10,
                }}>
                Fuel Station 3
              </Textual content>
              <Button
                type={{
                  marginStart: 70,
                  backgroundColor: 'black',
                  textColor: 'white',
                  borderRadius: 20,
                  borderColor: 'white',
                }}>
                <Textual content type={{coloration: 'white'}}>4.67$</Textual content>
              </Button>
            </View>
            <View
              type={{
                marginTop: 40,
                alignItems: 'heart',
                flexDirection: 'row-reverse',
                justifyContent: 'heart',
              }}>
              {/* <Picture supply = {require('./ic_dollar.png')} />
                            <Picture supply = {require('./ic_wifi.png')} /> */}
            </View>
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
};

const INITIAL_REGION = {
  latitude: 52.5,
  longitude: 19.2,
  latitudeDelta: 8.5,
  longitudeDelta: 8.5,
};

const HomeScreen8 = () => {
  const [visible, setVisible] = React.useState(false);

  const openMenu = () => setVisible(true);

  const closeMenu = () => setVisible(false);

  return (
    <View type={kinds.container}>
      {/* <MapView
        // supplier={PROVIDER_GOOGLE}
        // take away if not utilizing Google Maps
        type={kinds.map}
        area={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}></MapView> */}

      <MapView
        initialRegion={INITIAL_REGION}
        type={kinds.map}
        supplier={PROVIDER_GOOGLE}>
        <Marker coordinate={{latitude: 52.4, longitude: 18.7}} />
        <Marker coordinate={{latitude: 52.1, longitude: 18.4}} />
        <Marker coordinate={{latitude: 52.6, longitude: 18.3}} />
        <Marker coordinate={{latitude: 51.6, longitude: 18.0}} />
        <Marker coordinate={{latitude: 53.1, longitude: 18.8}} />
        <Marker coordinate={{latitude: 52.9, longitude: 19.4}} />
        <Marker coordinate={{latitude: 52.2, longitude: 21}} />
        <Marker coordinate={{latitude: 52.4, longitude: 21}} />
        <Marker coordinate={{latitude: 51.8, longitude: 20}} />
      </MapView>

      <View type={kinds.searchBox}>
        <Autocomplete

        //onChangeText={}
        />

        {/* <ModalDropdown choices={['option 1', 'option 2']}/> */}
      </View>
      <Supplier>
        <View
          type={{
            //paddingTop: 40,
            flexDirection: 'row',
            // backgroundColor:'crimson'

            //justifyContent: 'heart',
          }}>
          <Menu
            type={{
              flexDirection: 'row',
              backgroundColor: 'black',
              place: 'absolute',
              prime: 20,
              //justifyContent: 'heart',
            }}
            seen={seen}
            onDismiss={closeMenu}
            anchor={
              <Button
                type={{
                  flexDirection: 'row',
                  backgroundColor: 'inexperienced',
                  prime: 12,
                  //justifyContent: 'heart',
                }}
                onPress={openMenu}>
                Present menu
              </Button>
            }>
            <Menu.Merchandise onPress={() => {}} title="Merchandise 1" />
            <Menu.Merchandise onPress={() => {}} title="Merchandise 2" />
          </Menu>
        </View>
      </Supplier>
    </View>
  );
};

const HomeScreen7 = () => {
  const mapRef = useRef();

  const animateToRegion = () => {
    let area = {
      latitude: 42.5,
      longitude: 15.2,
      latitudeDelta: 7.5,
      longitudeDelta: 7.5,
    };

    mapRef.present.animateToRegion(area, 2000);
  };

  return (
    <>
      <MapView ref={mapRef} initialRegion={INITIAL_REGION} type={{flex: 1}} />
      <Button onPress={animateToRegion} title="Animate" />
    </>
  );
};
const kinds = StyleSheet.create({
  container: {
    //  ...StyleSheet.absoluteFillObject,

    //  justifyContent: 'flex-end',
    //  alignItems: 'heart',
    flex: 1,
  },

  searchBox: {
    place: 'absolute',
    left: 150,
    marginTop: Platform.OS === 'ios' ? 8 : 4,
    // flexDirection: 'row',
    backgroundColor: '#fff',
    width: '60%',
    alignSelf: 'heart',
    borderRadius: 5,
    //padding: 5,
    //shadowColor: '#ccc',
    top: '4%',
    // marginLeft: 249,
    shadowOffset: {width: 0, top: 3},
    //shadowOpacity: 0.5,
    // shadowRadius: 5,
    //elevation: 10,
  },

  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  spotlight: {
    fontWeight: '700',
  },

  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default App;

[ad_2]

Leave a Reply