Display the community

Show the Octopus community screens inside your app, full screen or embedded in one of your screens.

Before you begin

• Initialize the SDK: see Initialize the SDK.
• If your users sign in with your own account system, link them first: see Link your user to the SDK.

How it works

The community UI starts on the main feed and handles its own navigation between feeds, posts, groups and profiles. You choose where it lives:

Presentation	Android	iOS	Flutter	React Native	Unity
Full screen, over your app	Your own route	.fullScreenCover	showOctopusHomeScreen	openUI()	Open()
Embedded in one of your screens	OctopusHomeContent	OctopusHomeScreen in a tab	OctopusHomeScreen widget	<OctopusUIView>	Not available

Your app gets callbacks when the community needs something only your app can do: sign the user in, edit a profile field your app owns, open a link, or show your own profile screen.

---

Show the community

Android

Add the OctopusHomeContent composable to your community screen:

• navController: your main NavHostController.
• onNavigateToLogin: called when the SDK needs a signed-in user. Start your login flow, then call OctopusSDK.connectUser(...).
• onNavigateToProfileEdit: called when the user taps a profile field your app owns. fieldToEdit tells you which one, or null. Open your profile editor, then call OctopusSDK.connectUser(...) again with the updated profile.

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import com.octopuscommunity.sdk.domain.model.ProfileField
import com.octopuscommunity.sdk.ui.OctopusTheme
import com.octopuscommunity.sdk.ui.home.OctopusHomeContent

OctopusTheme {
    OctopusHomeContent(
        modifier = Modifier.fillMaxSize(),
        navController = navController,
        onNavigateToLogin = {
            navController.navigate(LoginRoute)
        },
        onNavigateToProfileEdit = { fieldToEdit ->
            navController.navigate(
                ProfileRoute(focusNickname = fieldToEdit == ProfileField.NICKNAME),
            )
        },
    )
}

Then register the other community screens in your main NavHost with octopusComposables. It adds one composable() destination per community screen to your NavGraphBuilder:

import androidx.navigation.compose.NavHost
import com.octopuscommunity.sdk.ui.octopusComposables

NavHost(navController = navController, startDestination = HomeRoute) {
    // Your own destinations
    octopusComposables(
        navController = navController,
        onNavigateToLogin = { navController.navigate(LoginRoute) },
        onNavigateToProfileEdit = { fieldToEdit -> /* same as above */ },
    ) { backStackEntry, content ->
        // Theme a community screen, possibly based on backStackEntry
        OctopusTheme {
            content()
        }
    }
}

warning

When OctopusHomeContent, or the NavHost that holds octopusComposables, sits inside your own Scaffold, pass the innerPadding and consume it: Modifier.padding(innerPadding).consumeWindowInsets(innerPadding). Otherwise the system bar and keyboard insets count twice: the comment composer floats above the keyboard by the height of your bottom bar, and a gap shows under it when the keyboard is closed. This is the Compose guidance for nested Scaffolds.

See the Android sample: the Community tab embeds OctopusHomeContent, MainScaffold registers octopusComposables under a bottom navigation bar, and the presentation scenarios open the community full screen, in a modal and in a bottom sheet, hosted by MainActivity.

Since 1.15.0, SDK lists animate insertions, removals and placement; scrolling to content and switching translations are animated too. These changes require no host configuration.

iOS

Import OctopusUI and show OctopusHomeScreen. The community handles its own navigation: do not put it inside your own NavigationStack.

• navigationMode ≥ 1.12.2: pass .navigationStack when you present the screen in a modal (.sheet, .fullScreenCover). Keep the default .automatic in a tab or on an existing stack. In a modal without .navigationStack, the navigation to post details can be dropped.

import OctopusUI

struct CommunityButton: View {
    let octopus: OctopusSDK
    @State private var openOctopus = false

    var body: some View {
        Button("Open the community") {
            openOctopus = true
        }
        .fullScreenCover(isPresented: $openOctopus) {
            OctopusHomeScreen(octopus: octopus, navigationMode: .navigationStack)
        }
    }
}

note

In a UIHostingController inside a UITabBarController, the hosted view can stop above the tab bar and leave an empty band. Let it extend under the bar: set hostingController.edgesForExtendedLayout = .all and hostingController.extendedLayoutIncludesOpaqueBars = true. bottomSafeAreaInset cannot fix this, it only adds space.

Flutter

Choose how the community appears:

• octopus.showOctopusHomeScreen(context, …): pushes the community full screen on your navigator. The returned Future completes when the route pops.
• OctopusHomeScreen: a widget you embed in your own layout, with the SDK top bar.
• OctopusHomeContent: the same widget without the SDK top bar, when your own AppBar already titles the screen. The top bar is removed on Android only. On iOS it renders like OctopusHomeScreen.

Callbacks, the same on the three entry points:

• onNavigateToLogin: called when the SDK needs a signed-in user.
• onModifyUser: called when the user taps a profile field your app owns. field names it, or is null.
• onNavigateToUrl: decide who opens a link: see Intercept URL openings.
• onNavigateToProfile: show your own profile screen for a member: see Route profile taps.

// Full screen
await octopus.showOctopusHomeScreen(
  context,
  onNavigateToLogin: () {
    // Start your login flow
  },
  onModifyUser: (String? field) {
    // Open your profile editor, focused on field
  },
);

// Embedded
OctopusHomeScreen(
  onNavigateToLogin: () {
    // Start your login flow
  },
  onModifyUser: (String? field) {
    // Open your profile editor, focused on field
  },
)

React Native

Call initialize() first. Then choose how the community appears:

• openUI(): shows the community full screen. closeUI() dismisses it from your code.
• <OctopusUIView>: embeds the community in one of your screens.

import { closeUI, openUI, OctopusUIView } from '@octopus-community/react-native';
import { StyleSheet, View } from 'react-native';

// Full screen
await openUI();
await closeUI();

// Embedded
function CommunityScreen() {
  return (
    <View style={{ flex: 1 }}>
      <OctopusUIView style={StyleSheet.absoluteFill} />
    </View>
  );
}

Unity

Unity opens the community full screen only: it cannot embed it in one of your screens. Open it from any button or event:

OctopusSDK.Open();

---

Modify the bottom safe area

Android availableiOS availableFlutter ≥ 1.12.0React Native availableUnity not available

Reserve extra space at the bottom of the community UI, for example under your own bottom bar, so the floating "Write a post" button and the comment composer stay visible.

Android

Use the contentPadding parameter of OctopusHomeContent:

OctopusHomeContent(
    modifier = Modifier.fillMaxSize(),
    navController = navController,
    contentPadding = PaddingValues(bottom = 10.dp),
    onNavigateToLogin = { /* Open your sign-in screen */ },
)

iOS

Use the bottomSafeAreaInset parameter of OctopusHomeScreen. It adds space on top of the safe area the system already reserves:

• In a standard TabView or UITabBarController tab, the system already keeps the content clear of the tab bar. Pass a few points of margin at most: passing the tab bar height counts it twice.
• Under a custom or floating bar that the system does not reserve space for, pass the height of the bar that overlaps the content. Do not add the system safe area again.

OctopusHomeScreen(
    octopus: octopus,
    bottomSafeAreaInset: 10
)

≥ 1.15.1 On iOS 15 and later, when OctopusHomeScreen goes down to the bottom edge of its window with no safe area there (a device with a home button and no tab bar below, or a floating iPad window), the SDK adds 16 pt to the bottomSafeAreaInset you pass, 0 included, so the "Write a post" button and the profile bubble do not touch the edge. Nothing changes when the screen ends above a tab bar, a bar of your app, the bottom of a sheet or a home indicator.

Flutter

Use the bottomSafeAreaInset parameter of OctopusHomeScreen, in logical pixels. Pass the total bottom padding you want, typically the height of your own bottom bar. The system safe area is already applied.

OctopusHomeScreen(
  onNavigateToLogin: () {},
  bottomSafeAreaInset: 10,
)

≥ 1.13.0 Left at 0, the SDK reserves the bottom padding your layout still has, which clears the Android navigation bar or the iOS home indicator. To reserve nothing at all, remove that padding yourself:

MediaQuery.removePadding(
  context: context,
  removeBottom: true,
  child: OctopusHomeScreen(onNavigateToLogin: () {}),
)

React Native

Pass ui.bottomSafeAreaInset to initialize(), in points on iOS and dp on Android:

import { initialize } from '@octopus-community/react-native';

await initialize({
  apiKey: 'YOUR_API_KEY',
  connectionMode: { type: 'sso', appManagedFields: [] },
  ui: {
    bottomSafeAreaInset: 10,
  },
});

The value applies differently depending on the presentation:

• Full screen (openUI()): extra space on top of the system safe area. Absent or 0 adds nothing.
• Embedded (<OctopusUIView>): the total bottom padding, the same on both platforms. 0 reserves nothing, for an edge-to-edge layout.

≥ 1.13.1 When the option is absent on an embedded view, Android reserves the part of the navigation bar that overlaps the view, and iOS adds 10 pt.

≥ 1.15.1 At the top, an embedded view on Android reserves the part of the status bar that overlaps it, so its close button stays reachable without padding from your app. Top safe-area padding you already apply is not counted twice.

Unity

Modifying the bottom safe area is not yet available on Unity.

≥ 1.15.1 On iOS 15 and later, on a device with no bottom safe area (a home button) or in a floating iPad window, the community keeps a 16 pt margin at the bottom, so the "Write a post" button and the profile bubble do not touch the edge of the screen. There is nothing to configure.

Next steps

• Open a specific screen
• Unified Profile
• Localization
• Configuration and lifecycle