react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/CircularProgress/MinMax.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CircularProgress, Heading, Center, Box, Text } from 'native-base';
+import { number } from '@storybook/addon-knobs';
+export const Example = () => {
+  return (
+    <Center>
+      <Heading mb={6}>Adding Min and Max</Heading>
+      <CircularProgress
+        value={550}
+        max={number('Max', 1000)}
+        min={number('Min', 100)}
+        size={100}
+      >
+        550 / 1000
+      </CircularProgress>
+      <Box mt={5}>
+        <Text>Min: 100</Text>
+        <Text>Max: 1000</Text>
+      </Box>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/CircularProgress/Sizes.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CircularProgress, Heading, Center, VStack } from 'native-base';
+export const Example = () => {
+  return (
+    <Center>
+      <Heading>Changing the sizes</Heading>
+      <VStack alignItems="center">
+        <CircularProgress mt={6} value={60} size="xl" />
+        <CircularProgress mt={6} value={60} size="lg" />
+        <CircularProgress mt={6} value={60} size="md" />
+      </VStack>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/CircularProgress/Thickness.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CircularProgress, Heading, Center } from 'native-base';
+export const Example = () => {
+  return (
+    <Center>
+      <Heading mb={6}>Changing the thickness</Heading>
+      <CircularProgress value={60} thickness={2} />
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/CircularProgress/TrackColor.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CircularProgress, Heading, Center } from 'native-base';
+import { text } from '@storybook/addon-knobs';
+export const Example = () => {
+  return (
+    <Center>
+      <Heading mb={6}>Changing the TrackColor</Heading>
+      <CircularProgress
+        value={60}
+        trackColor={text('Track Color', 'secondary.100')}
+      />
+    </Center>
+  );
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from './../../Wrapper';
+import Basic from './Basic';
+import Colors from './Colors';
+import Sizes from './Sizes';
+import Label from './Label';
+import Thickness from './Thickness';
+import Indeterminate from './Indeterminate';
+import TrackColor from './TrackColor';
+import MinMax from './MinMax';
+import ColorScheme from './ColorScheme';
+
+storiesOf('CircularProgress', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />)
+  .add('ColorScheme', () => <ColorScheme />)
+  .add('Colors', () => <Colors />)
+  .add('TrackColor', () => <TrackColor />)
+  .add('Label', () => <Label />)
+  .add('Sizes', () => <Sizes />)
+  .add('Thickness', () => <Thickness />)
+  .add('Min and Max', () => <MinMax />)
+  .add('Indeterminate', () => <Indeterminate />);

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/CloseButton/Basic.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CloseButton } from 'native-base';
+export const Example = () => {
+  return <CloseButton />;
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/CloseButton/Sizes.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CloseButton, HStack } from 'native-base';
+export const Example = () => {
+  return (
+    <HStack space="md">
+      <CloseButton size="sm" color="teal.200" />
+      <CloseButton size="md" color="red.200" />
+      <CloseButton size="lg" color="blue.200" />
+    </HStack>
+  );
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from './../../Wrapper';
+import Basic from './Basic';
+import Sizes from './Sizes';
+
+storiesOf('CloseButton', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />)
+  .add('Sizes', () => <Sizes />);

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Code/Basic.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Code } from 'native-base';
+export const Example = () => {
+  return <Code>Hello World!</Code>;
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Code/colors.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Code, Stack } from 'native-base';
+export const Example = () => {
+  return (
+    <Stack space={4}>
+      <Code>let direction = "row";</Code>
+      <Code colorScheme="danger">console.log('Hey there!');</Code>
+      <Code colorScheme="success">yarn add native-base</Code>
+      <Code colorScheme="dark">React Native</Code>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from './../../Wrapper';
+
+import Basic from './Basic';
+import Colors from './colors';
+
+storiesOf('Code', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />)
+  .add('Colors', () => <Colors />);

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Collapse/Basic.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Collapse, Stack, Heading, Button, Text } from 'native-base';
+export const Example = () => {
+  const [show, setShow] = React.useState(false);
+  const handleToggle = () => setShow(!show);
+  return (
+    <Stack space={4} mx={8}>
+      <Heading>Default Collapse</Heading>
+      <Collapse isOpen={show}>
+        Candy canes macaroon croissant carrot cake soufflé toffee topping
+        pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread
+        biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet
+        roll I love. Pastry pastry powder pie lemon drops chocolate topping
+        dessert.
+      </Collapse>
+      <Button size="sm" colorScheme="emerald" onPress={handleToggle}>
+        <Text color="white">Show {show ? 'Less' : 'More'}</Text>
+      </Button>
+    </Stack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Collapse/Callback.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Collapse, Stack, Heading, Button, Text } from 'native-base';
+export const Example = () => {
+  const [show, setShow] = React.useState(false);
+  const handleToggle = () => setShow(!show);
+  const [text, setText] = React.useState(
+    'This text would change when the collapse animation start'
+  );
+  const handleText = () =>
+    setText(
+      show
+        ? 'Collapse is open'
+        : 'This text would change when the collapse animation start'
+    );
+  const [color, setColor] = React.useState('emerald');
+  const handleColorToggle = () =>
+    setColor(color === 'emerald' ? 'indigo' : 'emerald');
+  return (
+    <Stack space={4} mx={8}>
+      <Heading>Collapse with callbacks</Heading>
+      <Text>{text}</Text>
+      <Collapse
+        onAnimationEnd={handleColorToggle}
+        onAnimationStart={handleText}
+        isOpen={show}
+      >
+        Candy canes macaroon croissant carrot cake soufflé toffee topping
+        pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread
+        biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet
+        roll I love. Pastry pastry powder pie lemon drops chocolate topping
+        dessert.
+      </Collapse>
+      <Button colorScheme={color} size="sm" onPress={handleToggle}>
+        <Text color="white">Show {show ? 'Less' : 'More'}</Text>
+      </Button>
+    </Stack>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Collapse/Duration.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Collapse, Stack, Heading, Text, Button } from 'native-base';
+
+export const Example = () => {
+  const [show, setShow] = React.useState(false);
+  const handleToggle = () => setShow(!show);
+  return (
+    <Stack space={4} mx={8}>
+      <Heading>Collapse with duration</Heading>
+      <Collapse duration={700} isOpen={show}>
+        Candy canes macaroon croissant carrot cake soufflé toffee topping
+        pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread
+        biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet
+        roll I love. Pastry pastry powder pie lemon drops chocolate topping
+        dessert.
+      </Collapse>
+      <Button size="sm" colorScheme="emerald" onPress={handleToggle}>
+        <Text color="white">Show {show ? 'Less' : 'More'}</Text>
+      </Button>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from './../../Wrapper';
+
+import Basic from './Basic';
+import Callback from './Callback';
+import Duration from './Duration';
+
+storiesOf('Collapse', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />)
+  .add('Animation Duration', () => <Duration />)
+  .add('onAnimationStart and onAnimationEnd', () => <Callback />);

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Container/Playground.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Heading, Container, Text } from 'native-base';
+import { boolean, text } from '@storybook/addon-knobs';
+
+export const Example = () => {
+  return (
+    <Container
+      centerContent={boolean('centerContent', true)}
+      maxWidth={text('override default max-width', '80%')}
+    >
+      <Heading>Benefits to a joint design and development system</Heading>
+      <Text>
+        There are many benefits to a joint design and development system. Not
+        only does it bring benefits to the design team, but it also brings
+        benefits to engineering teams. It makes sure that our experiences have a
+        consistent look and feel, not just in our design specs, but in
+        production
+      </Text>
+    </Container>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Container/centeringChildren.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Container, Text, Heading } from 'native-base';
+export const Example = () => {
+  return (
+    <Container centerContent>
+      <Heading>Benefits</Heading>
+      <Text>
+        There are many benefits to a joint design and development system. Not
+        only does it bring benefits to the design team, but it also brings
+        benefits to engineering teams. It makes sure that our experiences have a
+        consistent look and feel, not just in our design specs, but in
+        production
+      </Text>
+    </Container>
+  );
+};

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

@@ -0,0 +1,12 @@
+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 Playground } from './Playground';
+
+storiesOf('Container', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Playground', () => <Playground />)
+  .add('Usage', () => <Usage />);

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Container/usage.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Container, Text, Heading, Center } from 'native-base';
+export function Example() {
+  return (
+    <Center>
+      <Container>
+        <Heading>
+          A component library for the
+          <Text color="emerald.500"> React Ecosystem</Text>
+        </Heading>
+        <Text mt="3" fontWeight="medium">
+          NativeBase is a simple, modular and accessible component library that
+          gives you building blocks to build you React applications.
+        </Text>
+      </Container>
+    </Center>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Divider/Basic.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Divider, Heading, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center">
+      <Box w="140">
+        <Heading mx="3" alignItems="center" flexDirection="row">
+          Chrome
+        </Heading>
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
+        <Heading mx="3" alignItems="center" flexDirection="row">
+          Firefox
+        </Heading>
+      </Box>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Divider/Composition.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Divider, Flex, Text, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center">
+      <Flex direction="row" h="58" p="4">
+        <Text>Simple</Text>
+        <Divider bg="emerald.500" thickness="2" mx="2" orientation="vertical" />
+        <Text>Easy</Text>
+        <Divider bg="indigo.500" thickness="2" mx="2" orientation="vertical" />
+        <Text>Beautiful</Text>
+      </Flex>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Divider/Orientation.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Divider, Flex, Box, Heading } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box alignItems="center">
+      <Box w="160">
+        <Heading mx="auto">Shoes</Heading>
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
+        <Flex mx="3" direction="row" justify="space-evenly" h="60">
+          <Heading py="2">Girls</Heading>
+          <Divider
+            orientation="vertical"
+            mx="3"
+            _light={{ bg: 'muted.800' }}
+            _dark={{ bg: 'muted.50' }}
+          />
+          <Heading py="2">Boys</Heading>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Divider/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 Orientation } from './Orientation';
+import { Example as Composition } from './Composition';
+
+storiesOf('Divider', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />)
+  .add('Orientation', () => <Orientation />)
+  .add('Composition', () => <Composition />);

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Drawer/Basic.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box, Button, Drawer } from 'native-base';
+import { useState } from 'react';
+import { Dimensions } from 'react-native';
+
+const Basic = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setShowModal(true)}>Button</Button>
+      <Drawer
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+        placement="right"
+      >
+        <Box
+          display="flex"
+          h="100%"
+          bg="yellow.200"
+          minW={Dimensions.get('window').width / 2}
+        ></Box>
+      </Drawer>
+    </>
+  );
+};
+
+export default Basic;

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Drawer/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 Basic from './Basic';
+
+storiesOf('Drawer', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />);

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/ErrorTest/EventError.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  Button,
+
+  Center,
+} from 'native-base';
+
+export function Example() {
+  return (
+    <Center>
+      <Button id="Event_Error_Button" onPress={() => {
+        throw new Error("I am an Event Error")
+      }}>Test Event Error</Button>
+    </Center>
+  );
+}

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/ErrorTest/UIError.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import {
+  Button,
+
+  Center,
+} from 'native-base';
+
+export function Example() {
+ const [showError,setShowError] = useState(false);
+
+ if(showError){
+  throw new Error("I am a UI Error")
+ }
+  return (
+    <Center>
+      <Button id="UI_Error_Button" onPress={() => {
+        setShowError(!showError)
+      }}>UI Error</Button>
+    </Center>
+  );
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from '../../Wrapper';
+import { Example as EventError } from './EventError';
+import { Example as UIError } from './UIError';
+
+storiesOf('ErrorTest', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('EventError', () => <EventError/>)
+  .add('UIError', () => <UIError/>)
+  

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Fab/Basic.tsx

@@ -0,0 +1,15 @@
+import { Fab, Icon, Box } from 'native-base';
+import React from 'react';
+import { AntDesign } from '@expo/vector-icons';
+
+export const Example = () => {
+  return (
+    <Box position="relative" h={100} w="100%">
+      <Fab
+        position="absolute"
+        size="sm"
+        icon={<Icon color="white" as={<AntDesign name="plus" />} size="sm" />}
+      />
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Fab/CustomPosition.tsx

@@ -0,0 +1,15 @@
+import { Fab, Icon, Box } from 'native-base';
+import React from 'react';
+import { AntDesign } from '@expo/vector-icons';
+
+export const Example = () => {
+  return (
+    <Box position="relative" w="100%" h={200}>
+      <Fab
+        right={70}
+        bottom={50}
+        icon={<Icon color="white" as={<AntDesign name="plus" />} />}
+      />
+    </Box>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Fab/DocsBasic.tsx

@@ -0,0 +1,25 @@
+import { Fab, Icon, Box, Center } from 'native-base';
+import React from 'react';
+import { AntDesign } from '@expo/vector-icons';
+
+export const Example = () => {
+  return (
+    <Center>
+      <Box
+        height="200"
+        w="400"
+        shadow="2"
+        rounded="lg"
+        _dark={{ bg: 'coolGray.200:alpha.20' }}
+        _light={{ bg: 'coolGray.200:alpha.20' }}
+      >
+        <Fab
+          renderInPortal={false}
+          shadow={2}
+          size="sm"
+          icon={<Icon color="white" as={AntDesign} name="plus" size="sm" />}
+        />
+      </Box>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Fab/DocsCustomPosition.tsx

@@ -0,0 +1,27 @@
+import { Fab, Icon, Box, Center } from 'native-base';
+import React from 'react';
+import { AntDesign } from '@expo/vector-icons';
+
+export const Example = () => {
+  return (
+    <Center>
+      <Box
+        height="200"
+        w="400"
+        shadow="2"
+        rounded="lg"
+        _dark={{ bg: 'coolGray.200:alpha.20' }}
+        _light={{ bg: 'coolGray.200:alpha.20' }}
+      >
+        <Fab
+          renderInPortal={false}
+          shadow={2}
+          right={70}
+          bottom={50}
+          size="sm"
+          icon={<Icon color="white" as={AntDesign} name="plus" size="4" />}
+        />
+      </Box>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Fab/DocsPlacement.tsx

@@ -0,0 +1,29 @@
+import { Fab, Icon, Box, Center } from 'native-base';
+import React from 'react';
+import { MaterialIcons } from '@expo/vector-icons';
+
+export const Example = () => {
+  return (
+    <Center>
+      <Box
+        height="200"
+        w="400"
+        shadow="2"
+        rounded="lg"
+        _dark={{ bg: 'coolGray.200:alpha.20' }}
+        _light={{ bg: 'coolGray.200:alpha.20' }}
+      >
+        <Fab
+          renderInPortal={false}
+          shadow={2}
+          placement="top-right"
+          size="sm"
+          icon={
+            <Icon color="white" as={MaterialIcons} name="lightbulb" size="4" />
+          }
+          label="Quick Start"
+        />
+      </Box>
+    </Center>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/components/composites/Fab/Kitchensink-Basic.tsx

@@ -0,0 +1,17 @@
+import { Fab, Icon, Box, NativeBaseProvider } from 'native-base';
+import React from 'react';
+import { AntDesign } from '@expo/vector-icons';
+
+export const Example = () => {
+  return (
+    <NativeBaseProvider>
+      <Box position="relative" h={100} w="100%">
+        <Fab
+          position="absolute"
+          size="sm"
+          icon={<Icon color="white" as={<AntDesign name="plus" />} size="sm" />}
+        />
+      </Box>
+    </NativeBaseProvider>
+  );
+};