How to implement Mini View like PipView in mobile app with React-Native

Question

I want to implement a Mini View or Floating View (for WebRTC calling) in React-Native that should be persist or opened until we close it and it should be remain opened if we navigate to other screen any idea about this?

Answer 1

You can create a component and add it along with the navigation. It will appear on all the screens. You can absolutely position and apply animation as per your requirement.

<SafeAreaProvider>
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="login" 
                    component={Login}
                    options={{
                      headerShown: false
                    }} />
      <Stack.Screen name="home" component={Home} />
      <Stack.Screen name="screen2" component={Screen2} />
      <Stack.Screen name="screen3" component={Screen3} />
    </Stack.Navigator>
    <IncomingCall /> // component that is floating and shared between screens
  </NavigationContainer>
</SafeAreaProvider>