React Native External Style Sheet not updating component-CodePudding

I have created an external stylesheet for my components in React Native. I have an "index.js" file that I import all my styles from their ".js" file to. Once I connect everything and import the "index.js" file to my component, the component does not seem to update according to the styles that I set. I have attached snippets of each ".js" file that was used to make the external style sheet.

-Thank You

index.js

import * as GoogleInputBox from './GoogleInputStyle'
export { GoogleInputBox }

GoogleInputStyle.js

import { StyleSheet } from "react-native";

const GoogleInputBox = StyleSheet.create({
  container: {
    backgroundColor: "white",
    paddingTop: 5,
    flex: 0,
  },
  textInput: {
    borderRadius: 0,
    fontSize: 16,
    height: 50,
  },
  textInputContainer: {
    paddingHorizontal: 20,
    paddingBottom: 0,
  },
});

export { GoogleInputBox };

HomeScreen.js

import GoogleInputBox from "../Styles";

...
    <GooglePlacesAutocomplete
      placeholder="Where to?"
      styles={GoogleInputBox} <= Component Style Input
      nearbyPlacesAPI="GooglePlacesSearch"
      enablePoweredByContainer={false}
      minLength={2}
      fetchDetails={true}
      textInputProps={{
        placeholderTextColor: "black",
        returnKeyType: "search",
      }}
      onPress={(data, details = null) => {
        dispatch(
          setOrigin({
            location: details.geometry.location,
            description: data.description,
          })
        );
        dispatch(setDestination(null));
      }}
      query={{
        key: API_TOKEN,
        language: "en",
      }}
      debounce={400}
    />
  );

CodePudding user response：

Your export/imports are confusing. You can re-export all named exports in the index

index

export * from './GoogleInputStyle'

and then import them, always as named imports, in the component where you want to use them

HomeScreen.js

import { GoogleInputBox } from "../Styles";