react-nativecallfloatingreact-native-webrtc

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


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?

enter image description here


Solution

  • 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>