FloatingDock

import { FloatingDock } from 'reactnatively';

1import { View, StyleSheet } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { FloatingDock } from 'reactnatively';45const dockItems = [6  {7    icon: <Ionicons name="home" size={26} color="#fff" />,8    label: 'Home',9    onPress: () => navigation.navigate('Home'),10  },11  {12    icon: <Ionicons name="search" size={26} color="#fff" />,13    label: 'Search',14    onPress: () => navigation.navigate('Search'),15  },16  {17    icon: <Ionicons name="add-circle" size={28} color="#6366f1" />,18    label: 'Create',19    onPress: () => navigation.navigate('Create'),20  },21  {22    icon: <Ionicons name="notifications" size={26} color="#fff" />,23    label: 'Alerts',24    onPress: () => navigation.navigate('Notifications'),25  },26  {27    icon: <Ionicons name="person" size={26} color="#fff" />,28    label: 'Profile',29    onPress: () => navigation.navigate('Profile'),30  },31];3233export function TabletLayout({ children }) {34  return (35    <View style={styles.root}>36      {children}37      <FloatingDock38        items={dockItems}39        position="bottom"40        glass41        magnification42      />43    </View>44  );45}4647const styles = StyleSheet.create({48  root: { flex: 1 },49});

1import { View, StyleSheet } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { FloatingDock } from 'reactnatively';45const tools = [6  { icon: <Ionicons name="text" size={22} color="#fff" />, label: 'Text', onPress: () => selectTool('text') },7  { icon: <Ionicons name="image-outline" size={22} color="#fff" />, label: 'Image', onPress: () => selectTool('image') },8  { icon: <Ionicons name="shapes-outline" size={22} color="#fff" />, label: 'Shape', onPress: () => selectTool('shape') },9  { icon: <Ionicons name="color-palette-outline" size={22} color="#fff" />, label: 'Color', onPress: () => selectTool('color') },10  { icon: <Ionicons name="layers-outline" size={22} color="#fff" />, label: 'Layers', onPress: () => openLayers() },11];1213export function EditorCanvas({ children }) {14  return (15    <View style={styles.root}>16      {children}17      <FloatingDock18        items={tools}19        position="top"20        glass21        magnification={false}22      />23    </View>24  );25}2627const styles = StyleSheet.create({28  root: { flex: 1 },29});