Cannot set status bar color Iphone 11 IOS React Native

Question

I am using react native to build a simple app, I am trying to set the status bar as the same color as my background. I have tried several solutions, including these links:

React Native IOS Status Bar background

https://reactnavigation.org/docs/status-bar

https://medium.com/reactbrasil/react-native-set-different-colors-on-top-and-bottom-in-safeareaview-component-f008823483f3

and so far nothing works.

here is my code:

const App = () => (
  <SafeAreaProvider> 
    <NavigationContainer>
      <ApolloProvider client={client}>
        <Stack.Navigator headerMode="none">
          <Stack.Screen name="LandingScreen" component={LandingScreen} />
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="SignUpScreen" component={SignUpScreen} />
          <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
        </Stack.Navigator>
      </ApolloProvider>
    </NavigationContainer>
  </SafeAreaProvider>
);

const ProfileScreen = () => {
  const {loading, error, data} = useQuery(GET_USER);
  if (loading) {
    return <Text>Loading..</Text>;
  }
  
  const { user, appointmentsForUser } = data;
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: colors.purple }}>
      <StatusBar barStyle="light-content" backgroundColor={colors.purple} />
      <View style={styles.container}>
        <UpcomingAppointments user={user} appointmentsForUser={appointmentsForUser} />
        <View style={styles.child}>
          <View>
            <Text style={styles.title}>Placeholder</Text>
            <Button label="Placeholder" />
          </View>
        </View>
        <View style={styles.halfScreen}>
          <View>
            <Text style={styles.title} >Placeholder</Text>
          </View>
          <View style={styles.rightHalf}>
            <Text style={styles.title}>Placeholder</Text>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
};