react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Radio/withRef.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Radio } from 'native-base';
+import { Platform } from 'react-native';
+
+export const Example = () => {
+  const myRef = React.useRef({});
+
+  return (
+    <Radio.Group
+      name="exampleGroup"
+      colorScheme="success"
+      accessibilityLabel="pick an option"
+      onChange={(value) => {
+        if (value === '2') {
+          if (Platform.OS !== 'web')
+            myRef?.current?.setNativeProps({ backgroundColor: '#00de0050' });
+        } else {
+          if (Platform.OS !== 'web')
+            myRef?.current?.setNativeProps({
+              backgroundColor: '#fa000050',
+            });
+        }
+      }}
+    >
+      <Radio colorScheme="success" value="1" my={1}>
+        Wrong
+      </Radio>
+      <Radio colorScheme="success" ref={myRef} value="2" my={1}>
+        Right
+      </Radio>
+    </Radio.Group>
+  );
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Center, Row } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Row space={2}>
+      <Center
+        size={16}
+        bg="primary.400"
+        rounded="md"
+        _text={{ color: 'white' }}
+        shadow={3}
+      >
+        Box 1
+      </Center>
+      <Center
+        bg="secondary.400"
+        size={16}
+        rounded="md"
+        _text={{ color: 'white' }}
+        shadow={3}
+      >
+        Box 2
+      </Center>
+      <Center
+        size={16}
+        bg="emerald.400"
+        rounded="md"
+        _text={{ color: 'white' }}
+        shadow={3}
+      >
+        Box 3
+      </Center>
+    </Row>
+  );
+};

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

@@ -0,0 +1,10 @@
+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';
+
+storiesOf('Row', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />);

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Select, Box, CheckIcon, Center } from 'native-base';
+
+export const Example = () => {
+  let [service, setService] = React.useState('');
+
+  return (
+    <Center>
+      <Box maxW="300">
+        <Select
+          selectedValue={service}
+          minWidth="200"
+          accessibilityLabel="Choose Service"
+          placeholder="Choose Service"
+          _selectedItem={{
+            bg: 'teal.600',
+            endIcon: <CheckIcon size="5" />,
+          }}
+          mt={1}
+          onValueChange={(itemValue) => setService(itemValue)}
+        >
+          <Select.Item label="UX Research" value="ux" />
+          <Select.Item label="Web Development" value="web" />
+          <Select.Item label="Cross Platform Development" value="cross" />
+          <Select.Item label="UI Designing" value="ui" />
+          <Select.Item label="Backend Development" value="backend" />
+        </Select>
+      </Box>
+    </Center>
+  );
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  FormControl,
+  Select,
+  Center,
+  CheckIcon,
+  WarningOutlineIcon,
+} from 'native-base';
+
+export const Example = () => {
+  return (
+    <Center>
+      <FormControl w="3/4" maxW="300" isRequired isInvalid>
+        <FormControl.Label>Choose service</FormControl.Label>
+        <Select
+          minWidth="200"
+          accessibilityLabel="Choose Service"
+          placeholder="Choose Service"
+          _selectedItem={{
+            bg: 'teal.600',
+            endIcon: <CheckIcon size={5} />,
+          }}
+          mt="1"
+        >
+          <Select.Item label="UX Research" value="ux" />
+          <Select.Item label="Web Development" value="web" />
+          <Select.Item label="Cross Platform Development" value="cross" />
+          <Select.Item label="UI Designing" value="ui" />
+          <Select.Item label="Backend Development" value="backend" />
+        </Select>
+        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
+          Please make a selection!
+        </FormControl.ErrorMessage>
+      </FormControl>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Select/SelectLongList.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { FormControl, Select, Container, CheckIcon } from 'native-base';
+
+export const Example = () => {
+  const [value, setValue] = React.useState('');
+  const colorNames = [
+    'Pink',
+    'Crimson',
+    'Red',
+    'Maroon',
+    'Brown',
+    'Misty-Rose',
+    'Salmon',
+    'Coral',
+    'Orange-Red',
+    'Chocolate',
+    'Orange',
+    'Gold',
+    'Ivory',
+    'Yellow',
+    'Olive',
+    'Yellow-Green',
+    'Lawngreen',
+    'Chartreuse',
+    'Lime',
+    'Green',
+    'Spring-green',
+    'Aquamarine',
+    'Turquoise',
+    'Azure',
+    'Aqua/Cyan',
+    'Teal',
+    'Lavender',
+    'Blue',
+    'Navy',
+    'Blue-Violet',
+    'Indigo',
+    'Dark-Violet',
+    'Plum',
+    'Magenta',
+    'Purple',
+    'Red-Violet',
+    'Tan',
+    'Beige',
+    'Slate-gray',
+    'White',
+    'White-Smoke',
+    'Light-Gray',
+    'Silver',
+    'Dark-Gray',
+    'Gray',
+    'Dim-Gray',
+    'Black',
+  ];
+  return (
+    <Container>
+      <FormControl>
+        <FormControl.Label>Select Color</FormControl.Label>
+        <Select
+          selectedValue={value}
+          minWidth="100"
+          accessibilityLabel="Select a Color"
+          placeholder="Select a Color"
+          onValueChange={(itemValue) => {
+            setValue(itemValue);
+          }}
+          _selectedItem={{
+            bg: 'teal.600',
+            endIcon: <CheckIcon size={5} />,
+          }}
+          mt="1"
+        >
+          {colorNames.map((value, ind) => {
+            return <Select.Item label={value} value={`${ind}`} />;
+          })}
+        </Select>
+      </FormControl>
+    </Container>
+  );
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import { Example as Basic } from './Basic';
+import { Example as FormControlled } from './FormControlled';
+import { Example as SelectLongList } from './SelectLongList';
+import Wrapper from './../../Wrapper';
+
+storiesOf('Select', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />)
+  .add('FormControlled', () => <FormControlled />)
+  .add('Select Long list', () => <SelectLongList />);

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Slider/Customized.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Slider, Icon, Box } from 'native-base';
+import { MaterialIcons } from '@expo/vector-icons';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center" w="100%">
+      <Slider
+        defaultValue={70}
+        size="sm"
+        colorScheme="green"
+        w="75%"
+        maxW="300"
+      >
+        <Slider.Track bg="green.100">
+          <Slider.FilledTrack bg="green.600" />
+        </Slider.Track>
+        <Slider.Thumb borderWidth="0" bg="transparent">
+          <Icon as={MaterialIcons} name="park" color="green.600" size="sm" />
+        </Slider.Thumb>
+      </Slider>
+    </Box>
+  );
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  FormControl,
+  Slider,
+  VStack,
+  WarningOutlineIcon,
+  Box,
+} from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center" w="100%">
+      <VStack space={4} w="75%" maxW="300">
+        <FormControl isInvalid>
+          <FormControl.Label>Set your budget</FormControl.Label>
+          <Slider defaultValue={50}>
+            <Slider.Track>
+              <Slider.FilledTrack />
+            </Slider.Track>
+            <Slider.Thumb />
+          </Slider>
+          <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
+            Something is wrong.
+          </FormControl.ErrorMessage>
+        </FormControl>
+      </VStack>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Slider/Playground.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Slider, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box mx="5" width="80%">
+      <Slider minValue={0} maxValue={100} step={1} defaultValue={50}>
+        <Slider.Track>
+          <Slider.FilledTrack />
+        </Slider.Track>
+        <Slider.Thumb />
+      </Slider>
+    </Box>
+  );
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Slider, VStack, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center" w="100%">
+      <VStack space={4} w="75%" maxW="300">
+        <Slider defaultValue={40} size="sm">
+          <Slider.Track>
+            <Slider.FilledTrack />
+          </Slider.Track>
+          <Slider.Thumb />
+        </Slider>
+        <Slider defaultValue={60} size="md">
+          <Slider.Track>
+            <Slider.FilledTrack />
+          </Slider.Track>
+          <Slider.Thumb />
+        </Slider>
+        <Slider defaultValue={80} size="lg">
+          <Slider.Track>
+            <Slider.FilledTrack />
+          </Slider.Track>
+          <Slider.Thumb />
+        </Slider>
+      </VStack>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Slider/Value.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Slider, Stack, Text, Box } from 'native-base';
+
+export const Example = () => {
+  const [onChangeValue, setOnChangeValue] = React.useState(70);
+  const [onChangeEndValue, setOnChangeEndValue] = React.useState(70);
+  return (
+    <Box alignItems="center" w="100%">
+      <Stack space={4} alignItems="center" w="75%" maxW="300">
+        <Text textAlign="center">onChangeValue - {onChangeValue}</Text>
+        <Text textAlign="center">onChangeEndValue - {onChangeEndValue}</Text>
+        <Slider
+          defaultValue={70}
+          colorScheme="cyan"
+          onChange={(v) => {
+            setOnChangeValue(Math.floor(v));
+          }}
+          onChangeEnd={(v) => {
+            v && setOnChangeEndValue(Math.floor(v));
+          }}
+        >
+          <Slider.Track>
+            <Slider.FilledTrack />
+          </Slider.Track>
+          <Slider.Thumb />
+        </Slider>
+      </Stack>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Slider/Vertical.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Slider, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box mx="5" width="80%">
+      <Slider
+        defaultValue={70}
+        colorScheme="teal"
+        orientation="vertical"
+        h="48"
+      >
+        <Slider.Track>
+          <Slider.FilledTrack />
+        </Slider.Track>
+        <Slider.Thumb />
+      </Slider>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Slider/color.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Slider, Box, VStack } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center" w="100%">
+      <VStack w="3/4" maxW="300" space={4}>
+        <Slider defaultValue={70} colorScheme="orange">
+          <Slider.Track>
+            <Slider.FilledTrack />
+          </Slider.Track>
+          <Slider.Thumb />
+        </Slider>
+        <Slider defaultValue={70} colorScheme="emerald">
+          <Slider.Track>
+            <Slider.FilledTrack />
+          </Slider.Track>
+          <Slider.Thumb />
+        </Slider>
+        <Slider defaultValue={70} colorScheme="indigo">
+          <Slider.Track>
+            <Slider.FilledTrack />
+          </Slider.Track>
+          <Slider.Thumb />
+        </Slider>
+      </VStack>
+    </Box>
+  );
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from './../../Wrapper';
+import { Example as Usage } from './usage';
+import { Example as Size } from './Size';
+import { Example as Vertical } from './Vertical';
+import { Example as Color } from './color';
+import { Example as Value } from './Value';
+import { Example as FormControlled } from './FormControlled';
+import { Example as Customized } from './Customized';
+import { Example as Playground } from './Playground';
+import { Example as Disabled } from './isDisabled';
+import { Example as ReadOnly } from './isReadOnly';
+
+storiesOf('Slider', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Playground', () => <Playground />)
+  .add('Usage', () => <Usage />)
+  .add('Size', () => <Size />)
+  .add('Color', () => <Color />)
+  .add('Vertical', () => <Vertical />)
+  .add('Value', () => <Value />)
+  .add('Customized', () => <Customized />)
+  .add('Disabled', () => <Disabled />)
+  .add('ReadOnly', () => <ReadOnly />)
+  .add('Form Controlled', () => <FormControlled />);

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Slider/isDisabled.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Slider, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box mx={5} width="80%">
+      <Slider
+        minValue={0}
+        maxValue={100}
+        step={1}
+        defaultValue={50}
+        isDisabled
+        _disabled={{ opacity: 0.6 }}
+        colorScheme="indigo"
+      >
+        <Slider.Track>
+          <Slider.FilledTrack />
+        </Slider.Track>
+        <Slider.Thumb />
+      </Slider>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Slider/isReadOnly.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Slider, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box mx={5} width="80%">
+      <Slider minValue={0} maxValue={100} step={1} defaultValue={50} isReadOnly>
+        <Slider.Track _readOnly={{ bg: 'indigo.100' }}>
+          <Slider.FilledTrack _readOnly={{ bg: 'indigo.600' }} />
+        </Slider.Track>
+        <Slider.Thumb _readOnly={{ bg: 'indigo.600' }} />
+      </Slider>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Slider/usage.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Slider, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center" w="100%">
+      <Slider
+        w="3/4"
+        maxW="300"
+        defaultValue={70}
+        minValue={0}
+        maxValue={100}
+        accessibilityLabel="hello world"
+        step={10}
+      >
+        <Slider.Track>
+          <Slider.FilledTrack />
+        </Slider.Track>
+        <Slider.Thumb />
+      </Slider>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Spinner/color.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Spinner, HStack } from 'native-base';
+
+export const Example = () => {
+  return (
+    <HStack space={8} justifyContent="center">
+      <Spinner color="emerald.500" />
+      <Spinner color="warning.500" />
+      <Spinner color="indigo.500" />
+      <Spinner color="cyan.500" />
+    </HStack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Spinner/duration.tsx

@@ -0,0 +1,6 @@
+// import React from 'react';
+// import { Spinner } from 'native-base';
+
+//  export const Example = () => {
+//   // return <Spinner color="danger.400" size="lg" duration={1000} />;
+// }

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Spinner/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 Usage } from './usage';
+import { Example as Color } from './color';
+import { Example as Size } from './size';
+import { Example as Playground } from './withKnob';
+// import {Example as Variant} from './variant';
+// import {Example as Duration} from './duration';
+
+storiesOf('Spinner', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Playground', () => <Playground />)
+  .add('Usage', () => <Usage />)
+  .add('Color', () => <Color />)
+  .add('Size', () => <Size />);
+// .add('Variant', () => <Variant />);
+// .add('Duration', () => <Duration />);

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Spinner/size.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Spinner, HStack } from 'native-base';
+
+export const Example = () => {
+  return (
+    <HStack space={8} justifyContent="center" alignItems="center">
+      <Spinner size="sm" />
+      <Spinner size="lg" />
+    </HStack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Spinner/usage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Spinner, HStack, Heading } from 'native-base';
+
+export const Example = () => {
+  return (
+    <HStack space={2} justifyContent="center">
+      <Spinner accessibilityLabel="Loading posts" />
+      <Heading color="primary.500" fontSize="md">
+        Loading
+      </Heading>
+    </HStack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Spinner/variant.tsx

@@ -0,0 +1,18 @@
+// import React from 'react';
+// import { Spinner, HStack, Icon } from 'native-base';
+
+//  export const Example = () => {
+//   return (
+//     <HStack space={2}>
+//       <Spinner />
+//       {/* <Spinner color="danger.400" variant="dotted" />
+//       <Spinner color="blue.500" variant="stroked" />
+//       <Spinner color="gray.900" variant="multiColorDotted" />
+//       <Spinner color="yellow.500" variant="squareDotted" />
+//       <Spinner
+//         variant="custom"
+//         renderProp={<Icon name="bat" type="MaterialCommunityIcons" size={12} />}
+//       /> */}
+//     </HStack>
+//   );
+// }

package/Example/nativebase-v3-kitchensink/src/nb/components/primitives/Spinner/withKnob.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Spinner, Box } from 'native-base';
+import { select } from '@storybook/addon-knobs';
+
+export const Example = () => {
+  return (
+    <Box display="flex" justifyContent="space-between" alignItems="center">
+      <Spinner
+        size={select('size', ['sm', 'lg'], 'lg')}
+        color={
+          'primary.' +
+          select(
+            'color',
+            [
+              '50',
+              '100',
+              '200',
+              '300',
+              '400',
+              '500',
+              '600',
+              '700',
+              '800',
+              '900',
+            ],
+            '300'
+          )
+        }
+      />
+    </Box>
+  );
+};