react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Tooltip/TooltipPositions.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tooltip, Button, VStack, Select, CheckIcon } from 'native-base';
+
+export function Example() {
+  const [position, setPosition] = React.useState('top left');
+
+  return (
+    <VStack space={6} alignSelf="flex-start" w="100%">
+      {/* @ts-ignore */}
+      <Tooltip label={position} placement={position}>
+        <Button alignSelf="center">ToolTip</Button>
+      </Tooltip>
+
+      <Select
+        selectedValue={position}
+        mx={{ base: 0, md: 'auto' }}
+        accessibilityLabel="Select a position for Tooltip"
+        onValueChange={(nextValue) => setPosition(nextValue)}
+        _selectedItem={{
+          bg: 'cyan.600',
+          endIcon: <CheckIcon size={4} />,
+        }}
+      >
+        <Select.Item label="Top Left" value="top left" />
+        <Select.Item label="Top" value="top" />
+        <Select.Item label="Top Right" value="top right" />
+        <Select.Item label="Right Top" value="right top" />
+        <Select.Item label="Right" value="right" />
+        <Select.Item label="Right Bottom" value="right bottom" />
+        <Select.Item label="Bottom Left" value="bottom left" />
+        <Select.Item label="Bottom" value="bottom" />
+        <Select.Item label="Bottom Right" value="bottom right" />
+        <Select.Item label="Left Top" value="left top" />
+        <Select.Item label="Left" value="left" />
+        <Select.Item label="Left Bottom" value="left bottom" />
+      </Select>
+    </VStack>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Tooltip/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from './../../Wrapper';
+import { Example as Basic } from './Basic';
+import { Example as TooltipPositions } from './TooltipPositions';
+import { Example as CustomTooltip } from './CustomTooltip';
+
+storiesOf('Tooltip', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />)
+  .add('Tooltip Positions', () => <TooltipPositions />)
+  .add('Customizing', () => <CustomTooltip />);

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Transitions/Fade.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button, Center, PresenceTransition } from 'native-base';
+
+export const Example = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Center>
+      <Button onPress={() => setIsOpen(!isOpen)}>
+        {isOpen ? 'Hide' : 'Show'}
+      </Button>
+      <PresenceTransition
+        visible={isOpen}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1, transition: { duration: 250 } }}
+      >
+        <Center
+          mt="7"
+          bg="teal.500"
+          rounded="md"
+          w="200"
+          h="100"
+          _text={{ color: 'white' }}
+        >
+          Fade
+        </Center>
+      </PresenceTransition>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Transitions/ScaleFade.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PresenceTransition, Button, Center } from 'native-base';
+export const Example = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Center>
+      <Button onPress={() => setIsOpen(!isOpen)}>
+        {isOpen ? 'Hide' : 'Show'}
+      </Button>
+      <PresenceTransition
+        visible={isOpen}
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1, transition: { duration: 250 } }}
+      >
+        <Center w="200" h="100" mt="7" bg="teal.500" rounded="md">
+          ScaleFade
+        </Center>
+      </PresenceTransition>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Transitions/Slide.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  Slide,
+  Button,
+  Alert,
+  Text,
+  Box,
+  useColorModeValue,
+} from 'native-base';
+export const Example = () => {
+  const [isOpenTop, setIsOpenTop] = React.useState(false);
+  const str = `${isOpenTop ? 'Hide' : 'Check Internet Connection'}`;
+  return (
+    <Box h="32" w="300">
+      <Slide in={isOpenTop} placement="top">
+        <Alert justifyContent="center" status="error" safeAreaTop={8}>
+          <Alert.Icon />
+          <Text color="error.600" fontWeight="medium">
+            No Internet Connection
+          </Text>
+        </Alert>
+      </Slide>
+      <Button
+        mt="auto"
+        onPress={() => setIsOpenTop(!isOpenTop)}
+        variant="unstyled"
+        bg="coolGray.700:alpha.30"
+        _text={{ color: useColorModeValue('darkText', 'lightText') }}
+      >
+        {str}
+      </Button>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Transitions/SlideComposition.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  Slide,
+  Button,
+  Box,
+  Heading,
+  VStack,
+  HStack,
+  Text,
+  Spacer,
+  WarningIcon,
+  Input,
+  Center,
+  useSafeArea,
+} from 'native-base';
+export const Example = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const safeAreaProps = useSafeArea({
+    safeAreaTop: true,
+  });
+  return (
+    <Center>
+      <Box w="300">
+        <Box w="100%" alignItems="flex-start" justifyContent="center">
+          <VStack space={3} w="100%">
+            <HStack alignItems="flex-end">
+              <Heading>Order</Heading>
+              <Spacer />
+              <WarningIcon color="orange.600" size="xs" mb="1.5" />
+            </HStack>
+            <HStack alignItems="center" justifyContent="space-between">
+              <Text fontWeight="medium">Sub Total</Text>
+              <Text color="blueGray.400">$298.77</Text>
+            </HStack>
+            <HStack alignItems="center" justifyContent="space-between">
+              <Text fontWeight="medium">Tax</Text>
+              <Text color="blueGray.400">$38.84</Text>
+            </HStack>
+            <HStack alignItems="center" justifyContent="space-between">
+              <Text fontWeight="medium">Total Amount</Text>
+              <Text color="green.500">$337.61</Text>
+            </HStack>
+            <VStack space={2} mt="2">
+              <Text bold>Promo Code</Text>
+              <HStack space={3}>
+                <Input flex="1" />
+                <Button variant="outline">Apply</Button>
+              </HStack>
+            </VStack>
+            <Button my="2" onPress={() => setIsOpen(!isOpen)}>
+              Place Order
+            </Button>
+          </VStack>
+        </Box>
+        <Slide in={isOpen} placement="top">
+          <Box
+            p="2"
+            _text={{
+              color: 'orange.600',
+            }}
+            bg="orange.200"
+            {...safeAreaProps}
+          >
+            Due to government restrictions around COVID- 19, you may experience
+            a delay in your delivery.
+          </Box>
+        </Slide>
+      </Box>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Transitions/SlideFade.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { PresenceTransition, Box, Button, Center } from 'native-base';
+export const Example = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Box>
+      <Button onPress={() => setIsOpen(!isOpen)}>
+        {isOpen ? 'Hide' : 'Show'}
+      </Button>
+      <PresenceTransition
+        visible={isOpen}
+        initial={{ translateX: -200, opacity: 0 }}
+        animate={{ translateX: -75, opacity: 1 }}
+      >
+        <Center
+          position="absolute"
+          top="4"
+          w="200"
+          h="100"
+          _text={{ color: 'white' }}
+          mt="4"
+          bg="teal.500"
+          rounded="md"
+        >
+          SlideFade
+        </Center>
+      </PresenceTransition>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Transitions/SlideWrapped.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  Slide,
+  Button,
+  Box,
+  Input,
+  Heading,
+  VStack,
+  HStack,
+  Text,
+  CheckIcon,
+  Center,
+} from 'native-base';
+
+export const Example = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <Center>
+      <Box w="300" justifyContent="center">
+        <VStack space={3}>
+          <HStack alignItems="flex-end">
+            <Heading>Order</Heading>
+          </HStack>
+          <HStack alignItems="center" justifyContent="space-between">
+            <Text fontWeight="medium">Sub Total</Text>
+            <Text color="blueGray.400">$298.77</Text>
+          </HStack>
+          <HStack alignItems="center" justifyContent="space-between">
+            <Text fontWeight="medium">Tax</Text>
+            <Text color="blueGray.400">$38.84</Text>
+          </HStack>
+          <HStack alignItems="center" justifyContent="space-between">
+            <Text fontWeight="medium">Total Amount</Text>
+            <Text color="emerald.600">$337.61</Text>
+          </HStack>
+          <VStack space={2} mt="2">
+            <Text bold>Promo Code</Text>
+            <HStack space={3}>
+              <Input flex="1" />
+              <Button variant="outline">Apply</Button>
+            </HStack>
+          </VStack>
+          <Button my="2" onPress={() => setIsOpen(!isOpen)}>
+            Place Order
+          </Button>
+        </VStack>
+        <Slide in={isOpen} placement="top">
+          <Box
+            w="100%"
+            position="absolute"
+            p="2"
+            borderRadius="xs"
+            bg="emerald.100"
+            alignItems="center"
+            justifyContent="center"
+            _dark={{
+              bg: 'emerald.200',
+            }}
+            safeArea
+          >
+            <HStack space={2}>
+              <CheckIcon
+                size="4"
+                color="emerald.600"
+                mt="1"
+                _dark={{
+                  color: 'emerald.700',
+                }}
+              />
+              <Text
+                color="emerald.600"
+                textAlign="center"
+                _dark={{
+                  color: 'emerald.700',
+                }}
+                fontWeight="medium"
+              >
+                Order Placed Successfully.
+              </Text>
+            </HStack>
+          </Box>
+        </Slide>
+      </Box>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Transitions/Stagger.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+  Box,
+  useDisclose,
+  IconButton,
+  Stagger,
+  HStack,
+  Icon,
+  Center,
+} from 'native-base';
+import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
+
+export const Example = () => {
+  const { isOpen, onToggle } = useDisclose();
+  return (
+    <Center>
+      <Box alignItems="center" minH="220">
+        <Stagger
+          visible={isOpen}
+          initial={{
+            opacity: 0,
+            scale: 0,
+            translateY: 34,
+          }}
+          animate={{
+            translateY: 0,
+            scale: 1,
+            opacity: 1,
+            transition: {
+              type: 'spring',
+              mass: 0.8,
+              stagger: {
+                offset: 30,
+                reverse: true,
+              },
+            },
+          }}
+          exit={{
+            translateY: 34,
+            scale: 0.5,
+            opacity: 0,
+            transition: {
+              duration: 100,
+              stagger: {
+                offset: 30,
+                reverse: true,
+              },
+            },
+          }}
+        >
+          <IconButton
+            mb="4"
+            variant="solid"
+            bg="indigo.500"
+            colorScheme="indigo"
+            borderRadius="full"
+            icon={
+              <Icon
+                as={MaterialIcons}
+                size="6"
+                name="location-pin"
+                _dark={{ color: 'warmGray.50' }}
+                color="warmGray.50"
+              />
+            }
+          />
+          <IconButton
+            mb="4"
+            variant="solid"
+            bg="yellow.400"
+            colorScheme="yellow"
+            borderRadius="full"
+            icon={
+              <Icon
+                as={MaterialCommunityIcons}
+                _dark={{ color: 'warmGray.50' }}
+                size="6"
+                name="microphone"
+                color="warmGray.50"
+              />
+            }
+          />
+          <IconButton
+            mb="4"
+            variant="solid"
+            bg="teal.400"
+            colorScheme="teal"
+            borderRadius="full"
+            icon={
+              <Icon
+                as={MaterialCommunityIcons}
+                _dark={{ color: 'warmGray.50' }}
+                size="6"
+                name="video"
+                color="warmGray.50"
+              />
+            }
+          />
+          <IconButton
+            mb="4"
+            variant="solid"
+            bg="red.500"
+            colorScheme="red"
+            borderRadius="full"
+            icon={
+              <Icon
+                as={MaterialIcons}
+                size="6"
+                name="photo-library"
+                _dark={{ color: 'warmGray.50' }}
+                color="warmGray.50"
+              />
+            }
+          />
+        </Stagger>
+      </Box>
+      <HStack alignItems="center">
+        <IconButton
+          variant="solid"
+          borderRadius="full"
+          size="lg"
+          onPress={onToggle}
+          bg="cyan.400"
+          icon={
+            <Icon
+              as={MaterialCommunityIcons}
+              size="6"
+              name="dots-horizontal"
+              color="warmGray.50"
+              _dark={{ color: 'warmGray.50' }}
+            />
+          }
+        />
+      </HStack>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Transitions/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from './../../Wrapper';
+import { Example as Fade } from './Fade';
+import { Example as ScaleFade } from './ScaleFade';
+import { Example as Slide } from './Slide';
+import { Example as SlideWrapped } from './SlideWrapped';
+import { Example as SlideFade } from './SlideFade';
+import { Example as Stagger } from './Stagger';
+
+storiesOf('Transitions', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Fade', () => <Fade />)
+  .add('ScaleFade', () => <ScaleFade />)
+  .add('Slide', () => <Slide />)
+  .add('Slide wrapped inside parent', () => <SlideWrapped />)
+  .add('SlideFade', () => <SlideFade />)
+  .add('Stagger', () => <Stagger />);

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Typeahead/UsingComponent.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Typeahead, Icon } from 'native-base';
+import { MaterialIcons } from '@expo/vector-icons';
+
+const animals = [
+  { id: 1, value: 'Aardvark' },
+  { id: 2, value: 'Kangaroo' },
+  { id: 3, value: 'Snake' },
+  { id: 4, value: 'Pikachu' },
+  { id: 5, value: 'Tiger' },
+  { id: 6, value: 'Godzilla' },
+];
+
+export function UsingComponent() {
+  const [filterText, setFilterText] = React.useState('');
+
+  const filteredItems = React.useMemo(() => {
+    return animals.filter(
+      (item) => item.value.toLowerCase().indexOf(filterText.toLowerCase()) > -1
+    );
+  }, [filterText]);
+
+  return (
+    <Typeahead
+      options={filteredItems}
+      onChange={setFilterText}
+      onSelectedItemChange={console.log}
+      getOptionKey={(item) => item.key}
+      getOptionLabel={(item) => item.value}
+      label="Select your favorite animal"
+      toggleIcon={({ isOpen }: any) => {
+        return isOpen ? (
+          <Icon as={MaterialIcons} name="arrow-drop-up" size={12} />
+        ) : (
+          <Icon as={MaterialIcons} name="arrow-drop-down" size={12} />
+        );
+      }}
+    />
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Typeahead/UsingComponentWithRenderItem.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Typeahead, Icon, Box, Text } from 'native-base';
+import { MaterialIcons } from '@expo/vector-icons';
+
+const animals = [
+  { id: 1, value: 'Aardvark' },
+  { id: 2, value: 'Kangaroo' },
+  { id: 3, value: 'Snake' },
+  { id: 4, value: 'Pikachu' },
+  { id: 5, value: 'Tiger' },
+  { id: 6, value: 'Godzilla' },
+];
+
+export function UsingComponentWithRenderItem() {
+  const [filterText, setFilterText] = React.useState('');
+
+  const filteredItems = React.useMemo(() => {
+    return animals.filter(
+      (item) => item.value.toLowerCase().indexOf(filterText.toLowerCase()) > -1
+    );
+  }, [filterText]);
+
+  return (
+    <Typeahead
+      options={filteredItems}
+      disabledKeys={[1]}
+      width={400}
+      onChange={setFilterText}
+      getOptionLabel={(item) => item.value}
+      getOptionKey={(item) => item.key}
+      onSelectedItemChange={console.log}
+      label="Select your favorite animal"
+      renderItem={(item: any) => {
+        return (
+          <Box flexDirection="row" justifyContent="space-between" p={4}>
+            <Box
+              backgroundColor="black"
+              height={10}
+              width={10}
+              borderRadius={9999}
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text color="white">{item.value[0]}</Text>
+            </Box>
+            <Box>{item.value}</Box>
+          </Box>
+        );
+      }}
+      toggleIcon={({ isOpen }: any) => {
+        return isOpen ? (
+          <Icon as={MaterialIcons} name="arrow-drop-up" size={12} />
+        ) : (
+          <Icon as={MaterialIcons} name="arrow-drop-down" size={12} />
+        );
+      }}
+    />
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Typeahead/UsingControlledInput.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Typeahead, Icon } from 'native-base';
+import { MaterialIcons } from '@expo/vector-icons';
+
+const animals = [
+  { id: 1, value: 'Aardvark' },
+  { id: 2, value: 'Kangaroo' },
+  { id: 3, value: 'Snake' },
+  { id: 4, value: 'Pikachu' },
+  { id: 5, value: 'Tiger' },
+  { id: 6, value: 'Godzilla' },
+];
+
+export function UsingControlledInput() {
+  const [items] = React.useState(animals);
+  const [inputValue, setInputValue] = React.useState('');
+
+  const filteredItems = React.useMemo(() => {
+    return items.filter(
+      (item) => item.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
+    );
+  }, [items, inputValue]);
+
+  return (
+    <Typeahead
+      options={filteredItems}
+      getOptionLabel={(item) => item.value}
+      getOptionKey={(item) => item.key}
+      onChange={setInputValue}
+      inputValue={inputValue}
+      onSelectedItemChange={console.log}
+      label="Select your favorite animal"
+      toggleIcon={({ isOpen }: any) => {
+        return isOpen ? (
+          <Icon as={MaterialIcons} name="arrow-drop-up" size={12} />
+        ) : (
+          <Icon as={MaterialIcons} name="arrow-drop-down" size={12} />
+        );
+      }}
+    />
+  );
+}