React Navigation: How to put an iOS style dismissible bar on expo modal

Question

I am trying to achieve a dismissible bar for my modal. Something like in this image:

What i am at right now

code:

 <RootStack.Group
     screenOptions={{
       presentation: "modal",
       gestureEnabled: true,
       headerBackTitleVisible: false,
       headerTitle: "",
       hideNavigationBar: false,
       gestureEnabled: true,
     }}
   >
     <RootStack.Screen name="MyModal" component={ModalScreen} />
  </RootStack.Group>

Answer 1

I am not sure if there is a built-in solution to that, but for sure you can hide the status bar per screen. In this case that's MyModal screen. And once you hide it you can implement a custom header that can be anything you wish it to be, but you will need to hook back actions etc.

Another way is to implement a custom Header, React Navigation has an API for that https://reactnavigation.org/docs/stack-navigator#header

Answer 2

Since there isn't a built in solution, you could achieve what you want by doing something like so:

(1) You will need to replace react-navigation's generated header with a custom one, like the following:

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: (props) => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

Source: https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

(2) Your custom component would have to look something like this:

export default function App() {
  const cancelButtonOnPress = () => {
    navigation.goBack();
  }

  return (
    <View style={styles.container}>
      <View style={styles.bar}></View>
      <Text onPress={()=>{cancelButtonOnPress()}} style={styles.cancelButton}>Cancel</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  cancelButton: {
    color: '#0573ad'
  },
  bar: {
    alignSelf: 'center',
    width: 40,
    height: 7,
    backgroundColor: 'gray',
    borderRadius: 40,
  },
  container: {
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    padding: 8,
    borderWidth: 1,
    borderColor: 'black',
  },
});

The above App looks like the following:

(3) Since you are passing your custom component to react-navigation, the gesture swipe to dismiss the modal should be retained, if for some reason it isn't, you could try setting fullScreenGestureEnabled to true in screenOptions.

Answer 3

Who is starting the other pods?

Clearly this user has permission to use the SCC, else it wouldn't. So, the question is where are those permissions coming from.

Presumably you've already checked the SCC (including a copy of it here would allow multiple eyes to double check it). The other main place to look is a clusterrole that permits "USE" to that SCC. Perhaps you have a clusterrole with "*" that's being applied to the default SA?

Final thought - if you duplicate the new SCC on a fresh cluster install, do you continue to see the issue? If so, the issue is probably in your SCC. If not, the issue is probably in another RBAC component in the running system.