Custom button Dock

Author: SkitPie

src/components/common/ComponentCard.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Modal, View, StyleSheet, Platform } from 'react-native';
+
+const CustomButtonDock = ({
+ direction = "vertical", // "vertical" oder "horizontal"
+ firstButton,
+ secondButton,
+}) => {
+ return (
+ <Modal transparent={true} animationType="none" visible={true}>
+ {/* Der umgebende Container sorgt dafür, dass der Dock unten angeordnet wird */}
+ <View style={styles.modalContainer} pointerEvents="box-none">
+ <View style={[styles.container, direction === "horizontal" ? styles.horizontal : styles.vertical]}>
+ {firstButton && <View style={styles.button}>{firstButton}</View>}
+ {secondButton && <View style={styles.button}>{secondButton}</View>}
+ </View>
+ </View>
+ </Modal>
+ );
+};
+
+const styles = StyleSheet.create({
+ modalContainer: {
+ flex: 1, // Dieses Element wird über alle anderen Elemente sichtbar
+ justifyContent: 'flex-end', // Dadurch wird der Inhalt am unteren Rand positioniert
+ },
+ container: {
+ width: '100%',
+ backgroundColor: '#3434',
+ padding: 10,
+ paddingBottom: Platform.OS === 'ios' ? 20 : 10,
+ },
+ vertical: {
+ flexDirection: 'column',
+ },
+ horizontal: {
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ },
+ button: {
+ margin: 5,
+ },
+});
+
+export default CustomButtonDock;

src/components/common/CustomButtonDock.js

@@ -22,6 +22,7 @@ import HomeIcon from '../../assets/icons/Navigation/homeIcon';
 import TemplatesIcon from '../../assets/icons/Navigation/templateIcon';
 import SettingsIcon from '../../assets/icons/Navigation/settingsIcon';
 import BackIcon from '../../assets/icons/svg_js/backIcon';
+import ButtonDockScreen from '../screens/PreviewScreens/buttonDockScreen';
 
 
 const MainStack = createNativeStackNavigator();
@@ -62,6 +63,7 @@ function MainStackScreen() {
  <MainStack.Screen name="TopNavigationScreen" component={TopNavigationScreen} options={{ title: "Top Navigation" }} />
  <MainStack.Screen name="NotificationBadgeScreen" component={NotificationBadgeScreen} options={{ title: "Notification badge" }} />
  <MainStack.Screen name='CustomCardScreen' component={CustomCardScreen} options={{ title: 'Custom Card' }} />
+ <MainStack.Screen name='CustomButtonDockScreen' component={ButtonDockScreen} options={{ title: 'Button Dock' }} />
  </MainStack.Navigator>
  );
 }

src/components/inputs/CustomInput.js renamed to src/components/common/CustomInput.js

@@ -45,7 +45,7 @@ export default function HomeScreen() {
  title="Button Dock"
  description="Component"
  size="lg"
- onPress={() => changePage("ButtonScreen")}
+ onPress={() => changePage("CustomButtonDockScreen")}
  />
 
  {/* Notification Badge */}

src/navigation/AppNavigator.js

@@ -0,0 +1,47 @@
+import { View, Text, StyleSheet } from 'react-native'
+import React from 'react'
+import { colors, paddings, textStyles } from '../../style';
+import CustomButton from '../../components/common/CustomButton';
+import CustomIcon from '../../../assets/icons/svg_js/customIcon';
+import { ScrollView } from 'react-native-gesture-handler';
+import CustomButtonIcon from '../../components/common/CustomButtonIcon';
+import CustomButtonDock from '../../components/common/CustomButtonDock';
+
+const ButtonDockScreen = () => {
+ return (
+ <ScrollView style={styles.container}>
+ {/* TYPE */}
+ <Text style={{ ...textStyles.text_lg_semibold, paddingBottom: paddings.p_8 }}>Type</Text>
+ <Text style={{ ...textStyles.text_sm_regular, color: colors.grey500, paddingBottom: paddings.p_32 }}>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</Text>
+ <View style={styles.buttonContainer}>
+ <CustomButtonDock 
+ firstButton={<CustomButton text="Primary" type="primary" />}
+ />
+ </View>
+ </ScrollView>
+ )
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ paddingHorizontal: paddings.p_16,
+ paddingVertical: paddings.p_32,
+ backgroundColor: colors.white
+ },
+ buttonContainer: {
+ gap: paddings.p_16,
+ paddingBottom: paddings.p_32,
+ },
+ buttonRow: {
+ flexDirection: 'row',
+ gap: paddings.p_16,
+ },
+ buttonWrapper: {
+ width: "auto",
+ flexDirection: 'row',
+ gap: paddings.p_16,
+ },
+});
+
+export default ButtonDockScreen

src/screens/Main/HomeScreen.js

@@ -1,7 +1,7 @@
 import { View, Text, StyleSheet } from 'react-native';
 import React, { useState } from 'react';
 import { colors, paddings, textStyles } from '../../style';
-import CustomInput from '../../components/inputs/CustomInput';
+import CustomInput from '../../components/common/CustomInput';
 import PlusIcon from '../../../assets/icons/svg_js/plusIcon';
 import { ScrollView } from 'react-native-gesture-handler';