Activity View

Often called a share sheet, an activity view presents a range of tasks that people can perform in the current context.

import { Icon } from '@roninoss/icons';
import { Stack } from 'expo-router';
import { View, Text, ScrollView, Pressable, Button, Share, Alert } from 'react-native';

import { useColorScheme } from '~/lib/useColorScheme';

export default function ActivityViewScreen() {
  const { colors } = useColorScheme();
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativeWindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerRight() {
            return (
              <Pressable className="opacity-80 active:opacity-40">
                <View className="opacity-90">
                  <Icon name="cog-outline" color={colors.foreground} />
                </View>
              </Pressable>
            );
          },
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Activity View
          </Text>
          <Button
            color={colors.primary}
            onPress={async () => {
              try {
                const result = await Share.share({
                  message: 'NativeWindUI | Familiar interface, native feel.',
                });
                if (result.action === Share.sharedAction) {
                  if (result.activityType) {
                    // shared with activity type of result.activityType
                  } else {
                    // shared
                  }
                } else if (result.action === Share.dismissedAction) {
                  // dismissed
                }
              } catch (error: any) {
                Alert.alert(error.message);
              }
            }}
            title="Share a message"
          />
        </View>
      </ScrollView>
    </>
  );
}

Usage

import { Share } from 'react-native';

React.useEffect(() => {
  async function share() {
    try {
      const result = await Share.share({
        message: 'NativeWindUI | Familiar interface, native feel.',
      });
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error: any) {
      console.log(error.message);
    }
  }
  share();
}, []);

Methods

See the React-Native documentation for all of the methods.