react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Icon/Basic.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CheckIcon, HStack, Text } from 'native-base';
+
+export const Example = () => {
+  return (
+    <HStack space={2}>
+      <CheckIcon size="5" mt="0.5" color="emerald.500" />
+      <Text color="emerald.500" fontSize="md">
+        Order Placed Successfully
+      </Text>
+    </HStack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Icon/CreateIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createIcon } from 'native-base';
+import { Circle } from 'react-native-svg';
+export const Example = () => {
+  const CustomIcon = createIcon({
+    viewBox: '0 0 36 36',
+    // d: 'M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',
+    path: [
+      <Circle cx="18" cy="18" r="17.5" fill="#06B6D4" stroke="#0E7490" />,
+      <Circle cx="18" cy="18" r="13.5" fill="white" stroke="#0E7490" />,
+      <Circle cx="18" cy="18" r="9.5" fill="#06B6D4" stroke="#0E7490" />,
+      <Circle cx="18" cy="18" r="5.5" fill="white" stroke="#0E7490" />,
+    ],
+  });
+  return <CustomIcon size={12} />;
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Icon/CustomIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Icon, Center } from 'native-base';
+import { Path, G } from 'react-native-svg';
+export const Example = () => {
+  return (
+    <Center>
+      <Icon size="4xl" viewBox="0 0 870 873">
+        <G fillRule="nonzero" stroke="none" strokeWidth={1} fill="none">
+          <Path
+            d="M435 .1C194.8.1.1 194.8.1 435c0 187.3 118.4 346.9 284.4 408.1 3.3-29.9 15-57.2 32.7-79.6 12.1-15.4 26.9-28.5 43.9-38.4 2.1-5 4.6-10.6 7.1-16.6-50.3-26-84.7-78.1-84.7-138.6 0-51.7 25.3-97.7 64-125.9-10.9-20.6-21.3-40.2-31.8-58.2-18.1-31.5-46.7-59.7-68.4-78.9-21 11.9-47.8 4.7-59.7-16.3-11.9-21-4.7-47.8 16.3-59.7 21-11.9 47.4-4.7 59.7 15.9v.4c7.2 12.7 7.2 27.5 1.8 39.8 22.8 19.5 56.8 52.5 77.8 89 9.8 17 19.5 34.7 29.3 53.5 20.3-9.4 42.7-14.8 66.2-14.8 21.3 0 41.6 4.3 60.1 11.9 9.8-18.5 19.5-36.2 28.9-52.8 21-36.2 54.6-68.7 77.4-88.3-5.4-12.3-5.4-26.8 1.8-39.4v-.4c12.3-20.6 38.7-27.9 59.3-15.9 21 11.9 28.2 38.7 16.3 59.3-11.9 21-38.4 28.2-59.3 16.3-21.7 18.8-49.9 47.4-68 78.5-10.1 17.4-20.3 36.5-30.8 56.4 42 27.9 69.8 75.3 69.8 129.5 0 63-36.9 116.9-90.4 141.5.9 2.7 2 4.9 3 7.2 47 22.3 81.1 67.4 87.9 121.1C755.9 776 869.9 618.8 869.9 435 869.9 194.8 675.2.1 435 .1z"
+            fill="#CA0000"
+          />
+          <Path
+            d="M284.8 843.3h.1-.1zM284.8 843.3c-.1 0-.3-.1-.4-.1.2 0 .3 0 .4.1z"
+            fill="#FFF"
+          />
+          <G fill="#FFF" stroke="#FFF" strokeWidth={5}>
+            <Path
+              d="M485.2 5.8c-20.6-11.9-47-4.7-59.3 15.9v.4c-7.2 12.7-7.2 27.1-1.8 39.4-22.8 19.5-56.4 52.1-77.4 88.3-9.4 16.6-19.2 34.4-28.9 52.8-18.5-7.6-38.7-11.9-60.1-11.9-23.5 0-45.9 5.4-66.2 14.8-9.8-18.8-19.5-36.5-29.3-53.5-21-36.5-55-69.5-77.8-89 5.4-12.3 5.4-27.1-1.8-39.8v-.4C70.3 2.2 43.9-5.1 22.9 6.9 1.9 18.8-5.3 45.6 6.6 66.6c11.9 21 38.7 28.2 59.7 16.3 21.7 19.2 50.3 47.4 68.4 78.9 10.5 18.1 21 37.6 31.8 58.2-38.7 28.2-64 74.2-64 125.9 0 60.4 34.4 112.5 84.7 138.6-2.5 6.2-5.1 11.9-7.2 17-41.6 24.4-70.8 67.4-76.4 117.6 46.9 17.3 97.6 26.8 150.6 26.8 56.2 0 109.9-10.7 159.2-30.1-7.1-52.8-40.5-97.3-86.8-119.8-1.1-2.9-2.5-5.4-3.6-8.7 53.5-24.6 90.4-78.5 90.4-141.5 0-54.3-27.9-101.7-69.8-129.5 10.5-19.9 20.6-39.1 30.8-56.4 18.1-31.1 46.3-59.7 68-78.5 21 11.9 47.4 4.7 59.3-16.3 11.7-20.5 4.5-47.3-16.5-59.3z"
+              transform="translate(181 224)"
+            />
+          </G>
+        </G>
+      </Icon>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Icon/Sizes.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Icon, Heading, Center, VStack } from 'native-base';
+import { Ionicons } from '@expo/vector-icons';
+
+export const Example = () => {
+  const sizes = ['10', '50px', '2xl'];
+  return (
+    <Center>
+      <Heading mb="10">Sizes</Heading>
+      <VStack space={4} justifyContent="center">
+        {sizes.map((size) => (
+          <Icon
+            as={Ionicons}
+            name="md-checkmark-circle"
+            alignSelf="center"
+            size={size}
+          />
+        ))}
+      </VStack>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Icon/ThirdPartyIcons.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Icon, Center, HStack } from 'native-base';
+import { MaterialCommunityIcons, AntDesign, Entypo } from '@expo/vector-icons';
+
+export const Example = () => {
+  return (
+    <Center>
+      <HStack space={3}>
+        <Icon
+          as={AntDesign}
+          name="android1"
+          color="coolGray.800"
+          _dark={{ color: 'warmGray.50' }}
+        />
+        <Icon
+          as={Entypo}
+          name="app-store"
+          color="coolGray.800"
+          _dark={{ color: 'warmGray.50' }}
+        />
+        <Icon
+          as={MaterialCommunityIcons}
+          name="web"
+          color="coolGray.800"
+          _dark={{ color: 'warmGray.50' }}
+        />
+      </HStack>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Icon/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 Basic } from './Basic';
+import { Example as Sizes } from './Sizes';
+import { Example as AllIcons } from './AllIcons';
+import { Example as CustomIcon } from './CustomIcon';
+import { Example as CreateIcon } from './CreateIcon';
+import { Example as ThirdPartyIcons } from './ThirdPartyIcons';
+
+storiesOf('Icon', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('All Icons', () => <AllIcons />)
+  .add('Basic', () => <Basic />)
+  .add('Sizes', () => <Sizes />)
+  .add('CustomIcon', () => <CustomIcon />)
+  .add('CreateIcon', () => <CreateIcon />)
+  .add('Integration with Third Party Icons', () => <ThirdPartyIcons />);

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Image/Basic.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Center, Image } from 'native-base';
+export function Example() {
+  return (
+    <Center>
+      <Image
+        source={{
+          uri: 'https://wallpaperaccess.com/full/317501.jpg',
+        }}
+        alt="Alternate Text"
+        size="xl"
+      />
+    </Center>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Image/BorderRadius.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Image, Center } from 'native-base';
+export function Example() {
+  return (
+    <Center>
+      <Image
+        size={150}
+        borderRadius={100}
+        source={{
+          uri: 'https://wallpaperaccess.com/full/317501.jpg',
+        }}
+        alt="Alternate Text"
+      />
+    </Center>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Image/FallbackElement.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Image, Box, Center } from 'native-base';
+export function Example() {
+  return (
+    <Center>
+      <Image
+        size={150}
+        alt="fallback text"
+        borderRadius={2}
+        src="https://cdn.pixaba.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg"
+        fallbackElement={
+          <Box boxSize={20} bg="red.100">
+            This is a box
+          </Box>
+        }
+      />
+    </Center>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Image/FallbackSupport.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Image, Center } from 'native-base';
+export function Example() {
+  return (
+    <Center>
+      <Image
+        size={150}
+        alt="fallback text"
+        borderRadius={100}
+        source={{
+          uri: 'https://-page-icon.png',
+        }}
+        fallbackSource={{
+          uri: 'https://www.w3schools.com/css/img_lights.jpg',
+        }}
+      />
+    </Center>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Image/Sizes.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { VStack, Image, ScrollView, Heading, Center } from 'native-base';
+
+export function Example() {
+  return (
+    <>
+      <Heading mb="10" textAlign="center" mt="3">
+        Image Sizes
+      </Heading>
+      <ScrollView px="20">
+        {/* <Center mt="3" h="80"> */}
+
+        <VStack
+          space={2}
+          justifyContent="center"
+          alignItems="center"
+          safeAreaTop
+          // my={6}
+          mb={6}
+        >
+          {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size) => (
+            <Image
+              key={size}
+              size={size}
+              resizeMode="cover"
+              source={{
+                uri: 'https://wallpaperaccess.com/full/317501.jpg',
+              }}
+              alt={'Alternate Text ' + size}
+            />
+          ))}
+        </VStack>
+        {/* </Center> */}
+      </ScrollView>
+    </>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Image/WithRef.tsx

@@ -0,0 +1,33 @@
+//@ts-nocheck
+import React from 'react';
+import { Center, Image } from 'native-base';
+
+export function Example() {
+  const myRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (myRef.current && myRef.current.setNativeProps) {
+      const styleObj = {
+        borderWidth: 4,
+        borderRadius: 4,
+        borderColor: '#22D3EE',
+      };
+      myRef?.current?.setNativeProps({
+        style: styleObj,
+      });
+    }
+  }, [myRef]);
+
+  return (
+    <Center>
+      <Image
+        ref={myRef}
+        source={{
+          uri: 'https://wallpaperaccess.com/full/317501.jpg',
+        }}
+        alt="Alternate Text"
+        size="xl"
+      />
+    </Center>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Image/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 Basic } from './Basic';
+import { Example as Sizes } from './Sizes';
+import { Example as BorderRadius } from './BorderRadius';
+import { Example as WithRef } from './WithRef';
+import { Example as FallbackSupport } from './FallbackSupport';
+import { Example as FallbackElement } from './FallbackElement';
+
+storiesOf('Image', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />)
+  .add('Sizes', () => <Sizes />)
+  .add('BorderRadius', () => <BorderRadius />)
+  .add('FallbackSupport', () => <FallbackSupport />)
+  .add('FallbackElement', () => <FallbackElement />)
+  .add('WithRef', () => <WithRef />);

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Input/Addons.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  InputRightAddon,
+  Stack,
+} from 'native-base';
+
+export const Example = () => {
+  return (
+    <Stack alignItems="center">
+      <InputGroup w={{ base: '70%', md: '285' }}>
+        <InputLeftAddon children={'https://'} />
+        <Input w={{ base: '70%', md: '100%' }} placeholder="nativebase" />
+        <InputRightAddon children={'.io'} />
+      </InputGroup>
+    </Stack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Input/Basic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Input, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center">
+      <Input mx="3" placeholder="Input" w="100%" />
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Input/Controlled.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Input, Box } from 'native-base';
+
+export const Example = () => {
+  const [value, setValue] = React.useState('');
+  const handleChange = (text: string) => setValue(text);
+  return (
+    <Box alignItems="center">
+      <Input
+        value={value}
+        w="100%"
+        onChangeText={handleChange}
+        placeholder="Value Controlled Input"
+      />
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Input/Elements.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Input, Icon, Stack } from 'native-base';
+import { MaterialIcons } from '@expo/vector-icons';
+
+export const Example = () => {
+  const [show, setShow] = React.useState(false);
+  return (
+    <Stack space={4} w="100%" alignItems="center">
+      <Input
+        w={{ base: '75%', md: '25%' }}
+        InputLeftElement={
+          <Icon
+            as={<MaterialIcons name="person" />}
+            size={5}
+            ml="2"
+            color="muted.400"
+          />
+        }
+        placeholder="Name"
+      />
+      <Input
+        w={{ base: '75%', md: '25%' }}
+        type={show ? 'text' : 'password'}
+        InputRightElement={
+          <Icon
+            as={<MaterialIcons name={show ? 'visibility' : 'visibility-off'} />}
+            size={5}
+            mr="2"
+            color="muted.400"
+            onPress={() => setShow(!show)}
+          />
+        }
+        placeholder="Password"
+      />
+    </Stack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Input/FormControlled.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Input, FormControl, WarningOutlineIcon, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center">
+      <FormControl isInvalid w="75%" maxW="300px">
+        <FormControl.Label accessibilityHint='Test Masking'>Password test accessibility masking</FormControl.Label>
+        <Input placeholder="Enter password" accessibilityHint='Test Masking' />
+        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
+          Try different from previous passwords.
+        </FormControl.ErrorMessage>
+      </FormControl>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Input/Masked.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Input, Button, Box } from 'native-base';
+
+export const Example = () => {
+  const [show, setShow] = React.useState(false);
+  const handleClick = () => setShow(!show);
+
+  return (
+    <Box alignItems="center">
+      <Input
+        type={show ? 'text' : 'password'}
+        w="100%"
+        py="0"
+        InputRightElement={
+          <Button
+            size="xs"
+            rounded="none"
+            w="1/6"
+            h="full"
+            onPress={handleClick}
+          >
+            {show ? 'Hide' : 'Show'}
+          </Button>
+        }
+        placeholder="Password"
+      />
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Input/Size.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Input, Stack } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Stack space={4} w="75%" maxW="300px" mx="auto">
+      <Input size="xs" placeholder="xs Input" />
+      <Input size="sm" placeholder="sm Input" />
+      <Input size="md" placeholder="md Input" />
+      <Input size="lg" placeholder="lg Input" />
+      <Input size="xl" placeholder="xl Input" />
+      <Input size="2xl" placeholder="2xl Input" />
+    </Stack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Input/Variant.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Input, Stack } from 'native-base';
+export const Example = () => {
+  return (
+    <Stack space={4} w="75%" maxW="300px" mx="auto">
+      <Input variant="outline" placeholder="Outline" />
+      <Input variant="filled" placeholder="Filled" />
+      <Input variant="underlined" placeholder="Underlined" />
+      <Input variant="unstyled" placeholder="Unstyled" />
+      <Input variant="rounded" placeholder="Round" />
+    </Stack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Input/index.tsx

@@ -0,0 +1,24 @@
+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 Size } from './Size';
+import { Example as Variant } from './Variant';
+import { Example as Addons } from './Addons';
+import { Example as Elements } from './Elements';
+import { Example as Masked } from './Masked';
+import { Example as Controlled } from './Controlled';
+import { Example as FormControlled } from './FormControlled';
+
+storiesOf('Input', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Primary', () => <Basic />)
+  .add('Size ', () => <Size />)
+  .add('Variants', () => <Variant />)
+  .add('Addons', () => <Addons />)
+  .add('Elements', () => <Elements />)
+  .add('Password', () => <Masked />)
+  .add('Value Controlled', () => <Controlled />)
+  .add('Form Controlled', () => <FormControlled />);

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Link/Basic.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center">
+      <Link href="https://nativebase.io">
+        Click here to open documentation.
+      </Link>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Link/CompositeLink.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Link, Text, Box, Flex, HStack, Spacer, Badge } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center">
+      <Link href="https://nativebase.io" isExternal>
+        <Box
+          maxW="96"
+          borderWidth="1"
+          borderColor="coolGray.300"
+          shadow="3"
+          bg="coolGray.100"
+          p="5"
+          rounded="8"
+        >
+          <HStack alignItems="center">
+            <Badge
+              colorScheme="darkBlue"
+              _text={{ color: 'white' }}
+              variant="solid"
+              rounded="4"
+            >
+              Open Source
+            </Badge>
+            <Spacer />
+            <Text fontSize={10} color="coolGray.800">
+              2020
+            </Text>
+          </HStack>
+          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
+            NativeBase v3
+          </Text>
+          <Text mt="2" fontSize="sm" color="coolGray.700">
+            NativeBase is a component library that enables devs to build
+            universal design systems.
+          </Text>
+          <Flex>
+            <Text mt="2" fontSize={12} fontWeight="medium" color="darkBlue.600">
+              Read More
+            </Text>
+          </Flex>
+        </Box>
+      </Link>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Link/CustomOnPress.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box, Link } from 'native-base';
+
+export const Example = () => {
+  const [state, setState] = React.useState(false);
+  const toggleState = () => {
+    setState(!state);
+  };
+  return (
+    <Box alignItems="center">
+      <Box h="100" w="100" bg={state ? 'emerald.500' : 'indigo.500'} />
+      <Link onPress={toggleState} mt="8">
+        <Box
+          px="3"
+          py="2"
+          bg="primary.400"
+          rounded="sm"
+          _text={{ color: 'white', fontWeight: 'medium' }}
+        >
+          Change Color
+        </Box>
+      </Link>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Link/ExternalLink.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link, Text, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center">
+      <Text mx="16">
+        NativeBase is a component library that enables devs to build universal
+        design systems. It is built on top of React Native, allowing you to
+        develop apps for Android, iOS and the Web.{' '}
+        <Link
+          href="https://nativebase.io"
+          isExternal
+          _text={{ color: 'blue.400' }}
+          mt={-0.5}
+          _web={{
+            mb: -2,
+          }}
+        >
+          Read More
+        </Link>
+      </Text>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Link/UnderlineLink.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center">
+      {/* @ts-ignore */}
+      <Link
+        _text={{
+          fontSize: 'xl',
+          _light: {
+            color: 'cyan.500',
+          },
+          color: 'cyan.300',
+        }}
+        href="https://nativebase.io"
+        isUnderlined
+        _hover={{
+          _text: {
+            _light: {
+              color: 'cyan.600',
+            },
+            color: 'cyan.400',
+          },
+        }}
+      >
+        Click me to open NativeBase website.
+      </Link>
+    </Box>
+  );
+};