Transparent background on react-navigation not applying correctly

Question

I am currently trying to make a linear gradient background on my app and it works as intended but on the right header there's some container that I can't access. Any ideas? I tried changing the headerRightContainerStyle but that only affects the button on the right and not that empty space. It's weird how only the right side is affected too because the header's left side is the effect I desire

Image: https://ibb.co/cYKj1XV

Code:

...
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      title: "Users Page",
      headerStyle: {
        backgroundColor: "transparent",
      },
      headerRightContainerStyle: {
        backgroundColor: "red",
      },
      headerRight: () => <Button title="Next" color={colors.blue} />,
    });
  }, []);

  return (
    <LinearGradient
      colors={gradientColorsBackground}
      style={styles.gradientBackground}
    >
      <SafeAreaView style={styles.container}>
        <KeyboardAvoidingView
          style={styles.keyboardAvoidingContainer}
          behavior="padding"
        >
          <KeyboardAwareFlatList
            style={styles.usersList}
            data={users}
            keyExtractor={(item) => `${item.id}`}
            renderItem={({ item }) => <Person name={item.name} id={item.id} />}
          />
          <TextInput
            style={styles.input}
            autoFocus={false}
            blurOnSubmit={false}
            placeholder="Type people's names"
            onSubmitEditing={({ nativeEvent: { text } }) => addUser(text)}
            autoCorrect={false}
          />
        </KeyboardAvoidingView>
      </SafeAreaView>
    </LinearGradient>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
  },
  gradientBackground: {
    flex: 1,
    width: "100%",
    height: "100%",
    alignItems: "center",
  },
  input: {
    height: 50,
    backgroundColor: "orange",
    width: "100%",
    borderStyle: "solid",
    borderWidth: 3,
  },
  keyboardAvoidingContainer: {
    flex: 1,
  },
  usersList: {
    flex: 1,
    width: "100%",
    backgroundColor: colors.blue,
  },
});
...

Answer 1

Looks like you just need to set headerTransparent: true.

  useLayoutEffect(() => {
    navigation.setOptions({
      title: "Users Page",
      headerTransparent: true,
      headerRight: () => <Button title="Next" color={colors.blue} />,
    });
  }, []);

Docs: https://reactnavigation.org/docs/4.x/stack-navigator/#headertransparent

Example here: https://snack.expo.io/M230FOH!Q