react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/components/NativeBaseComponents/Toast.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { HStack, VStack, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <VStack alignItems="center" w="80%">
+      <HStack
+        space={3}
+        alignItems="center"
+        p={2}
+        rounded="md"
+        _light={{
+          bg: 'blue.100',
+        }}
+        _dark={{
+          bg: 'blue.400',
+        }}
+        zIndex={9}
+        w="80%"
+      >
+        <Box
+          rounded="full"
+          _light={{
+            bg: 'blue.500',
+          }}
+          _dark={{
+            bg: 'blue.200',
+          }}
+          size="24px"
+        />
+        <VStack space={1} flex={1}>
+          <Box
+            _light={{
+              bg: 'gray.600',
+            }}
+            _dark={{
+              bg: 'gray.100',
+            }}
+            rounded="sm"
+            h="11px"
+            w="50%"
+          />
+          <Box
+            _light={{
+              bg: 'gray.600',
+            }}
+            _dark={{
+              bg: 'gray.100',
+            }}
+            h="8px"
+            rounded="25"
+            w="100%"
+          />
+        </VStack>
+      </HStack>
+
+      <HStack
+        space={3}
+        alignItems="center"
+        mt={4}
+        p={2}
+        rounded="md"
+        _light={{
+          bg: 'blue.100',
+        }}
+        _dark={{
+          bg: 'blue.400',
+        }}
+        w="65%"
+        opacity={0.5}
+        position="absolute"
+        zIndex={1}
+      >
+        <Box
+          rounded="full"
+          _light={{
+            bg: 'blue.500',
+          }}
+          _dark={{
+            bg: 'blue.200',
+          }}
+          size="24px"
+        />
+        <VStack space={1} flex={1}>
+          <Box
+            _light={{
+              bg: 'gray.600',
+            }}
+            _dark={{
+              bg: 'gray.100',
+            }}
+            rounded="sm"
+            h="11px"
+            w="50%"
+          />
+          <Box
+            _light={{
+              bg: 'gray.600',
+            }}
+            _dark={{
+              bg: 'gray.100',
+            }}
+            h="8px"
+            rounded="25"
+            w="100%"
+          />
+        </VStack>
+      </HStack>
+
+      <HStack
+        space={3}
+        alignItems="center"
+        mt={8}
+        p={2}
+        rounded="md"
+        _light={{
+          bg: 'blue.100',
+        }}
+        _dark={{
+          bg: 'blue.400',
+        }}
+        w="40%"
+        opacity={0.1}
+        zIndex={-1}
+        position="absolute"
+      >
+        <Box
+          rounded="full"
+          _light={{
+            bg: 'blue.500',
+          }}
+          _dark={{
+            bg: 'blue.200',
+          }}
+          size="24px"
+        />
+        <VStack space={1} flex={1}>
+          <Box
+            _light={{
+              bg: 'gray.600',
+            }}
+            _dark={{
+              bg: 'gray.100',
+            }}
+            rounded="sm"
+            h="11px"
+            w="50%"
+          />
+          <Box
+            _light={{
+              bg: 'gray.600',
+            }}
+            _dark={{
+              bg: 'gray.100',
+            }}
+            h="8px"
+            rounded="25"
+            w="100%"
+          />
+        </VStack>
+      </HStack>
+    </VStack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/components/NativeBaseComponents/ToolTip.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { VStack, Box } from 'native-base';
+
+export function Example() {
+  return (
+    <VStack
+      w="60%"
+      rounded="md"
+      _light={{
+        bg: 'violet.400',
+      }}
+      _dark={{
+        bg: 'violet.800',
+      }}
+      p={4}
+      justifyContent="center"
+    >
+      <Box
+        _light={{
+          bg: 'gray.600',
+        }}
+        _dark={{
+          bg: 'gray.100',
+        }}
+        h="7px"
+        rounded="25"
+        w="100%"
+      />
+
+      <Box
+        _light={{
+          bg: 'violet.400',
+        }}
+        _dark={{
+          bg: 'violet.800',
+        }}
+        size={4}
+        right={5}
+        bottom={-8}
+        position="absolute"
+        style={{
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </VStack>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/components/NativeBaseComponents/Transitions.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, HStack, Center } from 'native-base';
+export const Example = () => {
+  return (
+    <Center ml={4} w="80%">
+      <HStack>
+        <Box
+          _light={{
+            bg: 'orange.300',
+          }}
+          _dark={{
+            bg: 'amber.400',
+          }}
+          size={12}
+          ml={-4}
+          opacity={0.5}
+          rounded="full"
+        />
+        <Box
+          _light={{
+            bg: 'orange.400',
+          }}
+          _dark={{
+            bg: 'amber.300',
+          }}
+          size={12}
+          ml={-4}
+          opacity={0.5}
+          rounded="full"
+        />
+        <Box
+          _light={{
+            bg: 'orange.500',
+          }}
+          _dark={{
+            bg: 'amber.200',
+          }}
+          size={12}
+          ml={-4}
+          opacity={0.5}
+          rounded="full"
+        />
+        <Box
+          _light={{
+            bg: 'orange.600',
+          }}
+          _dark={{
+            bg: 'amber.50',
+          }}
+          size={12}
+          ml={-4}
+          opacity={0.5}
+          rounded="full"
+        />
+      </HStack>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/components/NativeBaseComponents/VStack.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Column, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Column mt={6} shadow={6}>
+      <Box
+        w={100}
+        h={10}
+        _light={{
+          bg: 'red.100',
+        }}
+        _dark={{
+          bg: 'red.50',
+        }}
+      />
+      <Box
+        w={100}
+        h={10}
+        _light={{
+          bg: 'red.400',
+        }}
+        _dark={{
+          bg: 'red.300',
+        }}
+      />
+      <Box w={100} h={10} bg="rose.500" />
+    </Column>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/components/NativeBaseComponents/View.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Box } from 'native-base';
+export const Example = () => {
+  return (
+    <Box
+      size={12}
+      w="80%"
+      h={20}
+      _light={{
+        bg: 'darkBlue.100',
+      }}
+      _dark={{
+        bg: 'darkBlue.600',
+      }}
+    />
+  );
+};

package/Example/nativebase-v3-kitchensink/src/components/NativeBaseComponents/ZStack.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ZStack, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box h="40" mx="auto">
+      <ZStack mt={10} ml={-10}>
+        <Box
+          _light={{
+            bg: 'primary.300',
+          }}
+          _dark={{
+            bg: 'primary.100',
+          }}
+          ml={-5}
+          size={20}
+          rounded="lg"
+        />
+        <Box
+          _light={{
+            bg: 'primary.400',
+          }}
+          _dark={{
+            bg: 'primary.200',
+          }}
+          mt={5}
+          ml={0}
+          size={20}
+          rounded="lg"
+        />
+        <Box
+          _light={{
+            bg: 'primary.500',
+          }}
+          _dark={{
+            bg: 'primary.300',
+          }}
+          mt={10}
+          ml={5}
+          size={20}
+          rounded="lg"
+        />
+      </ZStack>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/components/RootComponent.tsx

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { Box, useColorModeValue, useToken } from 'native-base';
+import { RootStack } from '../../src/navigators/rootNavigator';
+import { Connect, TLProfiler } from 'react-native-acoustic-connect-beta';
+import { useRef } from 'react';
+
+// import { TLProfiler} from 'react-native-acoustic-ea-tealeaf-beta';
+
+export const Root = () => {
+  const navigationRef = useRef();
+  const [lightBg, darkBg] = useToken(
+    'colors',
+    ['coolGray.50', 'blueGray.900'],
+    'blueGray.900'
+  );
+  const bgColor = useColorModeValue(lightBg, darkBg);
+  return (
+    <Connect>
+      <NavigationContainer
+        ref={navigationRef}
+        theme={{
+          colors: { background: bgColor },
+        }}
+      >
+        <Box
+          flex={1}
+          w="100%"
+          _light={{
+            bg: 'coolGray.50',
+          }}
+          _dark={{
+            bg: 'blueGray.900',
+          }}
+          _web={{
+            overflowX: 'hidden',
+          }}
+        >
+          <RootStack />
+        </Box>
+      </NavigationContainer>
+    </Connect>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/components/StoryBook/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+  Box,
+  Center,
+  Heading,
+  Pressable,
+  useColorModeValue,
+} from 'native-base';
+import { mapping } from '../../config/map';
+
+export function StoryBook({
+  navigation,
+  name,
+  _box: { lightGrad, darkGrad, ..._box },
+  _heading,
+  ...props
+}: any) {
+  const Example = mapping[name].basic.Example;
+  const gradColors = useColorModeValue(lightGrad, darkGrad) || [
+    'gray.700',
+    'white',
+  ];
+
+  return (
+    <Box
+      _web={{
+        cursor: 'pointer',
+      }}
+      flex={1}
+      {...props}
+      rounded="lg"
+      position="relative"
+      overflow="hidden"
+      w="100%"
+    >
+      <Pressable
+        flex={1}
+        onPress={() =>
+          navigation.navigate('Component | NativeBase', {
+            name: name,
+          })
+        }
+      >
+        <Box
+          flex={1}
+          {..._box}
+          bg={{
+            linearGradient: {
+              colors: gradColors,
+              start: [0, 0],
+              end: [0, 1],
+            },
+          }}
+          pointerEvents="none"
+        >
+          <Center flex={1}>
+            <Heading
+              size="xs"
+              position="absolute"
+              top={2}
+              left={2}
+              style={{ textTransform: 'uppercase' }}
+              color={gradColors[1]}
+              {..._heading}
+              w="90%"
+            >
+              {name}
+            </Heading>
+            <Example />
+          </Center>
+        </Box>
+      </Pressable>
+    </Box>
+  );
+}