Code Monkey home page Code Monkey logo

dooboo-ui-legacy's Introduction

๐ŸŒSocials

LinkedIn YouTube

๐Ÿ“ŠGitHub Stats

๐Ÿ’ปTech Stack

React React Native Expo GraphQL TypeScript Python OpenAI

dooboo-ui-legacy's People

Contributors

bumjoo avatar cloudpracj avatar coffsun avatar dependabot[bot] avatar devyuns avatar eggbread avatar filoscoder avatar fossabot avatar godon019 avatar greatsumini avatar heyman333 avatar hyochan avatar jeffgukang avatar jennyay avatar jihu02 avatar jinleejeong avatar jinsunee avatar jongtaekchoi avatar marsinearth avatar minseungseon avatar mym0404 avatar oh3vci avatar p-iknow avatar ryz0nd avatar s-ong-c avatar sandwichj avatar shljessie avatar sk97kang avatar yoojinkimm avatar yunjeongloper avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dooboo-ui-legacy's Issues

[Feature] Card

Is your feature request related to a problem? Please describe.
nope

Describe the solution you'd like
a Card component : Simple rectangular container.

  • title, subtitle, coverImage support
  • loading, disabled, raised status support
  • styling

Screen Shot 2020-08-22 at 11 38 23 AM

go figma workspace to get more details

implementing it here

Mistakes in the README : import instructions of Select

Hello,

Not sure if I should report this here (as it's not really a bug report) but I believe there is a mistake in the examples given for "Select" in the README.

It first says to write :
import { Item, Select } from 'dooboo-ui';

Then :
import { Item, Select } from '../../main/Select';

While I believe it should be :
import {Item, Select} from 'dooboo-ui/Select';

This is the one that worked for me while the two others didn't.

Compile error when using UI components after installing "dooboo-ui".

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

First (General)

  1. using "dooboo-cli" or "expo-cli" create Project or anything React-Native projects
  2. install dooboo-ui
  3. components UI
import Button from 'dooboo-ui';

function Sample():ReactElement {
     return <Button text="test"></Button> 
}
  1. See error

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2020-07-07 แ„‹แ…ฉแ„’แ…ฎ 8 19 50

Second ( Storybook, Gatsby)

  1. using create Project ( anything React-Native projects)
  2. install dooboo-ui
  3. components UI
import { Button } from 'dooboo-ui';
import { ContainerDeco } from '../../storybook/decorators';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react-native';
import styled from 'styled-components/native';
import { text } from '@storybook/addon-knobs';
function Default(): React.ReactElement {
const [facebookLoading, setFacebookLoading] = useState<boolean>(false);
const [googleLoading, setGoogleLoading] = useState<boolean>(false);

return (
  <Container>
    <Button
      isLoading={false}
      text="๐Ÿ˜€ ๐Ÿ˜Ž ๐Ÿ‘ ๐Ÿ’ฏ"
      onPress={action('Clicked')}
    />
    <Button
      style={{
        marginVertical: 40,
      }}
      containerStyle={{
        marginTop: 32,
      }}
      isDisabled={true}
      text={text('button text', 'this is disabled')}
    />

  </Container>
);
}
  1. See error

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2020-07-07 แ„‹แ…ฉแ„’แ…ฎ 8 43 04

or

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2020-07-07 แ„‹แ…ฉแ„’แ…ฎ 8 48 17

Expected behavior
A clear and concise description of what you expected to happen.

  • OS: [mac os]
  • Browser [chrome]

Additional context
The first problem is solved by referring to the url. (https://github.com/expo/expo-cli/tree/master/packages/webpack-config#include-modules)

BUT Second Problem is Not Solve!!

[Feature] More ui components

We are planning to support more UI components.
You can refer to the design in following link.

  1. Select
  2. Radio Button & Rating
  3. Slider
  4. AutoComplete
  5. SnackBar
  6. Calendar

[Question] How can I swipe down to close the PinchZoomSliderModal?

Hello.

PinchZoomSliderModal seems to be a useful component for displaying multiple images.

By the way, is there a way to close the PinchZoomSliderModal by swiping down or up?

Like most apps that display multiple images such as KakaoTalk, Facebook and Instagram,
I'd like to have the ability to close it with a swipe down in pinch zoom.

Set storybook server that makes controllable iOS and Android stories on the webbrowser

Is your feature request related to a problem? Please describe.
It will improve dev environment.

Describe the solution you'd like
A clear and concise description of what you want to happen.

  • Test latest storybooks including not stable versions.
  • Test storybook control on the web brower with storybook Knobs.
  • Install react-native-storybook and react-native-storybook-server with optimal version.

Describe alternatives you've considered
.

Additional context

  • Update code and packages. (#328)
  • Need to update README or CONTRIBUTION docs

Plan for unifying dooboo-ui

We want to move this project forward in order to make this usable.

[History]

We wanted to build our own UI library that fulfills our development environment (typescript, jest, styled-components, and so on).
The first target was react-native which was @dooboo-ui/native. We then planned to build a react UI library called @dooboo-ui. However, these days, expo has been driving web env to production level and this direction also stimulates our decision.


[Decision]

We decided to drive this project as a universal react-native UI framework that supports all web, iOS, and android.

The previous packages that starts with @dooboo-ui/native will be fixed to 0.7.0 and will not be updated further. Rather we've decided to move universal UI library in @dooboo-ui/*.


[Plan]

  • dooboo-ui - The root library will contain all the light weight components such as button, edit text, accrodion, switch-toggle, and so on.

  • @dooboo-ui/* - Additional components will be features like CalendarCarousel, TinderCard, and so on. They will be named as @dooboo-ui/calendar-carousel, @dooboo-ui/tinder-card.

  • @dooboo-ui/theme - The theme will contain the ability to theme your app (basically light and dark).


[Done]

  • Lastest 0.7.0 release.
  • Organize packages distribution.
  • Integrate storybook for web.

And @JeffGuKang is another core maintainer of dooboo-ui ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘

[Feature][DatePicker] Support web environment

Is your feature request related to a problem? Please describe.

DatePicker should support web environment.

Describe the solution you'd like

X

Describe alternatives you've considered

X

Additional context

X

[Button] Documentation Is Outdated

Describe the bug
Props table and examples are not in sync with the actual source code of Button component.

https://github.com/dooboolab/dooboo-ui/blob/93d7e602c6bc0a42fa0696b7240392900612cf45/main/Button/README.md#L9-L27

https://github.com/dooboolab/dooboo-ui/blob/93d7e602c6bc0a42fa0696b7240392900612cf45/main/Button/README.md#L147-L171

https://github.com/dooboolab/dooboo-ui/blob/93d7e602c6bc0a42fa0696b7240392900612cf45/main/Button/index.tsx#L51-L68

  • outlined : Declared in Props but unused & undocumented.
  • color : Declared in Props but unused & undocumented.
  • Accent : Documented, but not declared in Props.
  • Secondary : Used in an example, but undocumented & undeclared.

Password character ellipsis issue.

Describe the bug
password character ellipsis issue.

To Reproduce
Steps to reproduce the behavior:
ios test

  1. Please enter your password.
  2. Clear your password and re-enter it.
  3. You can see that the characters are omitted.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.
luyoes_image

Smartphone (please complete the following information):

  • Device: I phone SE(2nd generation)
  • OS: 13.5(17F61)

Additional context
I'll start fixing bugs.
Also, I will check if there are bugs in other iOS devices.

[Select] not working on Android

Describe the bug
The select feature works perfectly on IOS but I simply can't get it to work on Android.

I can open and close it but nothing happens when I click on an option. Once again, it's working perfectly on ios.

To Reproduce
I followed the instructions as written here : https://github.com/dooboolab/dooboo-ui/tree/master/main/Select

And this is my code.

import {Select, SelectItem} from 'dooboo-ui';
import React from 'react';
import {useState} from 'react';

import styled from 'styled-components/native';

/** COMPONENTS */
const CustomSelectContainer = styled.View`
  width: 100%;
  height: 50px;
  justify-content: center;
  background-color: white;
  border-radius: 4px;
  elevation: 5;
  box-shadow: 0px 1px 1px #b3b3b3;
  shadow-opacity: 0.4;
  shadow-radius: 1px;
  margin-top: 50px;
`;

export function ExamplePage() {
  const [selectedValue, onSelectedValue] = useState<string>('En');
  const [isOpen, toggleSelect] = useState<boolean>(false);

  return (
    <CustomSelectContainer>
      <Select
        opened={isOpen}
        loading={false}
        disabled={false}
        showArrow={true}
        bordered={true}
        value={selectedValue}
        onSelect={(value): void => onSelectedValue(value)}
        onOpen={(isOpen): void => toggleSelect(isOpen)}>
        <SelectItem value="english">english</SelectItem>
        <SelectItem value="franรงais">franรงais</SelectItem>
        <SelectItem value="deutsch">deutsch</SelectItem>
      </Select>
    </CustomSelectContainer>
  );
}

Expected behavior
When on Android, on click on an option/SelectItem, the select should close itself and show the selected value.

Smartphone (please complete the following information):

  • Device: Pixel 2, emulated on android studio
  • OS: Android, don't know the version

It's been tested on other devices by some of my colleagues and they also got the issue on Android.

Is there anyone who got the same issue or who knows the answer ? I'm kinda getting desperate :/

[DatePicker] Date, locale mocking error

Describe the bug

Tests always fail due to date issues.

To Reproduce
Steps to reproduce the behavior:

npx jest DatePicker --coverage

Expected behavior

Mock date to specific day for test.

Screenshots

-----------------------|---------|----------|---------|---------|-------------------
File                   | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------|---------|----------|---------|---------|-------------------
All files              |    91.3 |       75 |      75 |   91.46 |                   
 DatePicker            |   88.89 |    72.41 |      60 |    87.5 |                   
  DateInput.tsx        |   94.87 |    77.78 |   83.33 |   94.29 | 106,132           
  PickerCalendar.tsx   |   90.91 |     62.5 |      60 |   90.48 | 49,87             
  index.tsx            |      75 |    66.67 |      25 |   68.75 | 35-37,48-59       
 DatePicker/Calendar   |    93.2 |    78.26 |   88.24 |   94.57 |                   
  Calendar.tsx         |   85.11 |       50 |   77.78 |   87.18 | 78,100-103        
  CalendarDate.tsx     |     100 |    93.75 |     100 |     100 | 44                
  CalendarMonth.tsx    |     100 |       75 |     100 |     100 | 65                
  CalendarWeekDays.tsx |     100 |      100 |     100 |     100 |                   
-----------------------|---------|----------|---------|---------|-------------------
Snapshot Summary
 โ€บ 6 snapshots failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them.

Desktop (please complete the following information):

X

Smartphone (please complete the following information):

X

Additional context

X

Screen show nothing when using SnackbarProvider with react-navigation

Describe the bug

When I wrapped NavigationContainer with the SnackbarProvider, the screen did not show anything.

To Reproduce

Wrap NavigationContainer component of react-navigation like below.

function RootNavigator(store: RootStore): React.ReactElement {
  const { deviceStore, accountStore } = store;
  const { deviceLoading } = deviceStore;
  const { isLoggedIn } = accountStore;

  return (
    <SnackbarProvider>      
      <NavigationContainer>
          <Stack.Navigator
            initialRouteName="Splash"
            screenOptions={{
              headerShown: false,
            }}
          >          
            ...
          </Stack.Navigator>
      </NavigationContainer>
    </SnackbarProvider>
  );
}

Expected behavior

The child component shows normally.

Screenshots

Simulator Screen Shot - iPhone 11 - 2020-03-19 at 16 32 23

Smartphone (please complete the following information):

  • Device: Simulator - iPhone 11
  • OS: iOS13.3

Additional context

  • library version

    "@react-navigation/native": "^5.0.9",
    "@react-navigation/stack": "^5.1.1",

[Feature] PinchZoom

Describe the solution you'd like
A simple component that makes child components easily zoomable.

  1. It should have the ability to zoom in child component by the open two fingers gesture at both android and ios platform.
  2. It should also have the ability to zoom out child components by closing two fingers gesture.
  3. If the gesture is ended, the child components should freeze and the scale cannot less than 1 (It means the components don't get smaller than its original size.)
  4. It can move the child components by drag with a finger and rotate by changing the angle with two-finger when it's scale is bigger than 1.
  5. If possible, our component should be less dependent.

I made a pull request about this (#315) except 'rotating by changing the angle with two-finger' of the above.

[Feature][DatePicker]

Is your feature request related to a problem? Please describe.
Feature request: DatePicker

  • box for floating date picker

image

  • date picker

image

source

Describe the solution you'd like

  • picker title customizing
  • styling (text color, size, margin etc...)
  • enable to select start date and end date

Describe alternatives you've considered

  • is it possible to use CalendarCarousel of packages for implementing DatePicker.

Additional context
Refs

[Feature] Slider component

derived from #37

Discussion for component interface and spec

Goal

  • Implementing Slider component with test codes
  • Adding storybooks for Slider component and sub-components.
  • Examples

Hackatalk UI Design

Libraries

Structure

  • Rail

  • Track

  • Thumb

  • Label

[Rail] requires:

  • Draw a line.

[Marks] requires:

  • mark
  • Customizable step (default: 1)
  • mark reveals if step is not 1.

[Track] requires:

  • Draw a line until the value of Slider.
  • Three kinds of icon and effects

[Thumb] requires:

  • Active animation effect
  • Three kinds of icon and effects

[Label] requires:

  • Position icon with text

[Slider] requires:

  • [Track] on [Rail] and [Marks]
  • Customizable [Thumb]
  • Customizable [Label]
  • [Thumb] moves as step size.
  • Show [Label] on press
  • Modifiable with two [Thumb]s.
  • It can be disabled.

first PR test fail: `[error]Resource not accessible by integration`

Describe the bug
PR test is always failed by GitHub Actions in first contribution.

refs: actions/first-interaction#10

Example PR: https://github.com/dooboolab/dooboo-ui/runs/934834176

 /usr/bin/docker run --name c20184e65c4be38043b8ae5adc4dba411299_b9dbed --label 87c201 --workdir /github/workspace --rm -e INPUT_REPO-TOKEN -e INPUT_ISSUE-MESSAGE -e INPUT_PR-MESSAGE -e HOME -e GITHUB_JOB -e GITHUB_REF -e GITHUB_SHA -e GITHUB_REPOSITORY -e GITHUB_REPOSITORY_OWNER -e GITHUB_RUN_ID -e GITHUB_RUN_NUMBER -e GITHUB_ACTOR -e GITHUB_WORKFLOW -e GITHUB_HEAD_REF -e GITHUB_BASE_REF -e GITHUB_EVENT_NAME -e GITHUB_SERVER_URL -e GITHUB_API_URL -e GITHUB_GRAPHQL_URL -e GITHUB_WORKSPACE -e GITHUB_ACTION -e GITHUB_EVENT_PATH -e RUNNER_OS -e RUNNER_TOOL_CACHE -e RUNNER_TEMP -e RUNNER_WORKSPACE -e ACTIONS_RUNTIME_URL -e ACTIONS_RUNTIME_TOKEN -e ACTIONS_CACHE_URL -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/dooboo-ui/dooboo-ui":"/github/workspace" 87c201:84e65c4be38043b8ae5adc4dba411299
[@octokit/rest] `const Octokit = require("@octokit/rest")` is deprecated. Use `const { Octokit } = require("@octokit/rest")` instead
[@octokit/rest] `const Octokit = require("@octokit/rest")` is deprecated. Use `const { Octokit } = require("@octokit/rest")` instead
Checking if its the users first contribution
Checking...
Checking...
Checking...
Checking...
Adding message: Hey there thank you for you first pull request~! to pull request 273
##[error]Resource not accessible by integration

To Reproduce
Steps to reproduce the behavior:

  1. fork this repository
  2. make PR
  3. github action test failed

Expected behavior
A clear and concise description of what you expected to happen.

Have to pass test

Screenshots
image

Desktop (please complete the following information):

Doesn't matter.

Smartphone (please complete the following information):
Doesn't matter.

Additional context
Add any other context about the problem here.

[Feature] Select Component

derived from #37

GOAL

Implementing Selects component with test codes
Adding storybooks for Selects component and sub-components.

- Select component structure

Select Structure

1. Implement props related to "Root" section. [assigned @geoseong]

  • theme

Select themes

  • rootStyle
  • placehold
  • disable

2. Implement props related to "List" section. [assigned @gimeoni]

  • items
  • itemStyle
  • onSelect

3. Implement props related to "Title" section. [assigned @smallbee3]

  • title

4. Implement a callback function when the list's visible state changes. [assigned @dlgmltjr0925]

  • onShow
  • onDismiss

5. Implement StoryBook Component

  • default
  • custom style

(Additional)

6. Dialog Select. [assigned @Theoblanc]

  • mode ['dropdown', 'dialog', picker] default('dropdown');

7. Multi Select; [assigned @AddChan]

  • multiSelect boolean; default false;

8. Picker Select; [assigned @dlgmltjr0925]

  • mode ['dropdown', 'dialog', 'picker'] default('dropdown');

Examples

Libraries

Improve [Accordion] v2

We are currently refactoring Accrodion component and it won't be compatible with [email protected].

Related works

There are some works left before the initial release.

[Additional Improvements]

  1. Ability to add user-defined style in Container view of AccordionItem.
  2. Refactor below code. I don't think we need itemTitleLeft and itemBodyLeft.
    image
    • Let's make this simple. Provide renderCustomTitle and renderCustomBodyItem to customize the elements. We only need one default style. The only extra element could be toggleElement.
  3. Provide clearer naming to props. The changes I made in #216 are still not perfect. You need to determine the characteristics before naming things. So there is Accordion and it has its child which is called AccordionItem. AccordionItem has it's title and body and the body has an item. We should clarify these characteristics in our props. This is very important because it also affects naming types.
    titleStyle
    bodyStyle
    bodyItemStyle
    
    • We can shorten item since they will all start with item. Above is my proposal and you may think of better ones. If there aren't any, use mine.
  4. Renaming internal props. Try not to use similar words many times. itemData can be just an item or datum. Try to remove the word item as much as possible.
  5. Using space-between in aligning items in Title is a bad idea because child elements will affect each other which may be hard to provide identical layouts when child contents are different. Try to use absolute instead of placing the Arrow on the right.
  6. Lastly, try to use useCallback and useMemo where possible. Since shared components may be used in many elements, it is good to provide them efficiently.

[Upgrade] Upgrade react-native to 0.61.5

Since our project relies on UI components, I hope this can be migrated to expo project so we can upgrade the project more easily.

Since expo project depends on package.json main file, let's just keep going with the pure react-native project for now. Upgrade needed.

[Feature] How about adding duration prop to the LoadingIndicator component?

Is your feature request related to a problem? Please describe.

To make the LoadingIndicator component disappear, it have to rely on the elements outside of it.
And it doesn't have animating prop of ActivityIndicator for solving this problem.

Describe the solution you'd like

It is disappeared after the time entered.

Describe alternatives you've considered

Add duration prop of number type. Using this prop, it is changed animating prop to false after duration time.

Additional context

https://reactnative.dev/docs/activityindicator#animating

Accordion in FlatList: Header and Children disappear when typing content in <TextInput> in child

Describe the bug
The Header and Children gradually disappear when collapsing / expanding the Accordion after typing text in of the child. The Accordion is in the RenderItem function of a flatlist.

Any suggestion on how to fix? I am thinking about setting up a fixed headerHeight.

To Reproduce
Steps to reproduce the behavior:

    const activeRegattaGoalsList = [
        {
            id: 10,
            goalOrder: 1,
            goal: 'list goal',
            challenge: 'list 1. What needs to be improved',
            solution: 'How you plan to improve it',
            notes: 'SMART (Simple, Measurable, Achievable, Relevant, Time bound) goals to be accomplished to meet the next strategic goal.',
        },
        {
            id: 12,
            goalOrder: 2,
            goal: 'list goal',
            challenge: 'list 2. What needs to be improved',
            solution: 'How you plan to improve it',
            notes: 'Lorem Ipsum...',
        }, 
]


    renderGoal = ({ item }) => (
        <Accordion
            style={styles.dropDownHeader}
            contentVisible={false}
            invisibleElement={IC_ARR_DOWN}
            visibleElement={IC_ARR_UP}
            header={
                <View>
                    <Text style={styles.header2}>{item.goalOrder}. {item.goal}</Text>
                </View>
            }
        >
            <View style={styles.dropDownContent} >

                <View style={styles.insideLineStyle}></View>
                <Text style={styles.header3}>
                    Challenge
                </Text>
                <TextInput style={styles.textInputBox2} multiline={true}>
                    {item.challenge}
                </TextInput>
                <Text style={styles.header3}>
                    Solution
                </Text>
                <TextInput style={styles.textInputBox2} multiline={true}>
                    {item.solution}
                </TextInput>
                <Text style={styles.header3}>
                    Notes
                </Text>
                <TextInput style={styles.textInputBox2} multiline={true}>
                    {item.notes}
                </TextInput>
            </View>
        </Accordion>
    );

keyExtractor = (item) => String(item.id);

    return (
        <ScrollView style={styles.container}>

            <Text style={styles.header1}>Goals</Text>
            <FlatList
                keyExtractor={keyExtractor}
                data={activeRegattaGoalsList}
                renderItem={renderGoal}
            />
        </ScrollView>
    );
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 0,
        backgroundColor: '#fff',
    },
    dropDownHeader: {
        paddingTop: 10,
    },
    dropDownContent: {
        alignItems: 'stretch',
        marginLeft: 0,
        marginRight: 30,
        width: Dimensions.get('window').width - 60,
    }, 
    textInputBox2: {
        height: 80,
        borderWidth: 1,
        borderColor: CColors.greyGroup.lightGrey,
        borderRadius: 12,
        padding: 10,
        margin: 5,
        marginLeft: 0,
        marginRight: 0,
        fontFamily: 'futura-book',
        fontSize: 15,
    },
    insideLineStyle: {
        borderBottomColor: CColors.greyGroup.lightGrey,
        borderBottomWidth: 1,
        paddingTop: 5,
        paddingBottom: 5,
        marginLeft: 20,
        marginRight: 20,
    },
    header1: {
        fontFamily: 'futura-medium-bt',
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'left',
        color: CColors.blueGroup.blue5,
        marginTop: 10,
        paddingLeft: 30,
    },
    header2: {
        fontFamily: 'futura-medium-bt',
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'left',
        padding: 10,
        color: CColors.blueGroup.blue5,
        paddingLeft: 30,
    },
    header3: {
        fontFamily: 'futura-medium-bt',
        fontSize: 15,
        fontWeight: 'bold',
        textAlign: 'left',
        padding: 5,
        marginLeft: 10,
        color: CColors.blueGroup.blue5,
        paddingLeft: 0,
    },
});
  1. Display the content
  2. Expand one of the goals
  3. Type text in one of the TextInput boxes
  4. Collapse goal
  5. Expand the same goal
  6. Collapse the same goal
  7. The goal will gradually disappear until it is no longer visible

Expected behavior
The header and child should not disappear when collapsing / expanding the accordion

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

There is an error when enter command yarn Javascript bundleing .

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Switch Toggle Doesn't support RTL

Describe the bug
On RTL switch toggle goes out of boundary as shown below. This bug is also reported in the following deprecated repo yujonglee/react-native-switch-toggle#33

64347044-e9eee800-cffb-11e9-9e19-cadd22c9ee35

To Reproduce
Use RTL layout with simple switch toggle navigation

<SwitchToggle
  containerStyle={styles.switchContainer}
  circleStyle={styles.switchCircle}
  switchOn={toggleCompare}
  onPress={() => setToggleCompare(!toggleCompare)}
  circleColorOff={colors.superWhite}
  circleColorOn={colors.superWhite}
  backgroundColorOff={colors.darkGray}
  backgroundColorOn={colors.linkedinColor}
  duration={500}
/>

Expected behavior
On Toggle on RTL, position of circle should move in opposite direction

Screenshots
64347044-e9eee800-cffb-11e9-9e19-cadd22c9ee35

[Accordion] How i am changing the arrows images position?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Error occurs during javascript bundle becasue of invalid package path.

Describe the bug
Error occurs during javascript bundle becasue of invalid package path.
image

I found out why this error occurs. The reasons are as follows:
The package folder and the file extension(js -> tsx) were changed but were not reflected in the modules import and package.json.

To Reproduce

  • fork dooboo-ui
  • clone forked repo
  • yarn install
  • yarn run ios or start
    Expected behavior
    A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: macOs, Catalina

Smartphone (please complete the following information):

  • ios simulator IphonSE

context

  • I corrected path, and it works well. I would send pull request to correct it.

[Feature] AutoComplete

derived from #37

Material UI AutoComplete Page

Goal

  • Implementing strictly typed AutoComplete component with test codes
  • Adding storybooks for AutoComplete component and sub-components
    assigned to jb9229
  • Examples

Hackatalk UI Design

Material UI AutoComplete

Libraries

Structure

  • Render Input
    AutoComplete Render Input

  • Render Option
    AutoComplete Render Option

  • Options
    AutoComplete Options

[RenderInput] requires:

assigned to vanayun, impressor615

  • focus

    • Active
    AutoComplete Render Input Active
    • Inactive
    AutoComplete Render Input Inactive
  • filter
    assigned to hmhm2292
    AutoComplete Render Input filtered

  • scroll top to the screen as the screenshot when touched

[Render Option] requires:

assigned to imjihun

  • background highlight when touched
  • set value for Render Input when selected
  • have various options such as icon, image, styles, etc.

[Options] requires:

  • resize to max out the device's screen size and scroll top along with the Render Input
  • filtered when the value of Render Input satisfies search requirements
  • scrollable if height of its contents exceeds the screenHeight subtracts to the renderInput height

TODO

  • to accept various types of input data
  • to accept placeholder style prop
  • smooth animation for open/close optionList (sizes, colors)
  • smooth animation for optionItem onPress event (sizes, colors, underlay color, selected color)
  • smooth keyframe rotation animation for caret arrow
  • accept external caret component
  • accept external reset button component
  • test codes
  • storybook integration with webpage configuration

[Feature][ListItem] for lists as FlatList

Is your feature request related to a problem? Please describe.
New Cell component for FlatList and others like react-native-elements.

Describe the solution you'd like
Create new feature called Cell or ListItem.

Describe alternatives you've considered

Additional context

  • Do not use external libraries as react-natve-vector-icons

[Feature][Select] component

I'll begin implementation of Select component following the idea derived from #60

Required

  • 1. Implement props related to "Root" section.
  • 2. Implement props related to "List" section.
  • 3. Implement a callback function when the list's visible state changes.
  • 4. Implement StoryBook Component

derived from #37

GOAL

Implementing Selects component with test codes
Adding storybooks for Selects component and sub-components.

- Select component structure

Select Structure

1. Implement props related to "Root" section. [assigned @geoseong]

  • theme
Select themes
  • rootStyle
  • placehold
  • disable

2. Implement props related to "List" section. [assigned @gimeoni]

  • items
  • itemStyle
  • onSelect

3. Implement props related to "Title" section. [assigned @smallbee3]

  • title

4. Implement a callback function when the list's visible state changes. [assigned @dlgmltjr0925]

  • onShow
  • onDismiss

5. Implement StoryBook Component

  • default
  • custom style

(Additional)

6. Dialog Select. [assigned @Theoblanc]

  • mode ['dropdown', 'dialog', picker] default('dropdown');

7. Multi Select; [assigned @AddChan]

  • multiSelect boolean; default false;

8. Picker Select; [assigned @dlgmltjr0925]

  • mode ['dropdown', 'dialog', 'picker'] default('dropdown');

Examples

Libraries

[Question] Actions payload in web addons

Hello guys!

First of all, you're work is amazing! I'm basically trying to understand how to set up properly storybook for RN, as I need to do build something similar to your package.
Currently, I'm stuck with actions-addon on web-server. As you already discovered, you need to downgrade the version storybookjs/react-native#24
I have another problem, when I tap on the device to swap story or simply opening the ondevice addon section, my actions on browser are cleared. Also the content of the synthetic event isn't correct on web-server side. Are you experiencing similar issues?

(feel free to close the issue, I'm just looking for some suggestions and information about storybook + RN are really hard to find)

Thank you so much for your time!

[Warning] useNativeDriver

Describe the bug
From react-native 0.62 on it is required to give the option useNativeDriver. If not, every time there comes a warning like this:

Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`
    in SwitchToggle (at Switch.js:39)

To Reproduce
Steps to reproduce the behavior:

  1. Go to a page with a switch toggle
  2. You can see the warning

Expected behavior
No warning

Additional context
@dooboo-ui/native-switch-toggle version: 0.4.1

[Checkbox][Web] outline style glitch

Describe the bug

Checkbox border has glitches on the web environment.

To Reproduce
Steps to reproduce the behavior:

  1. yarn web
  2. Check the Checkbox story

Expected behavior

All outlines must be uniform.

Screenshots

image

Desktop (please complete the following information):

  • OS: [Mac]
  • Browser [chrome]
  • Version [5.0.4183.83 (Official Build) (64-bit)]

Smartphone (please complete the following information):

X

Additional context

X

Accoridon improvement

Describe the bug

Currently, the Accordion component doesn't work nicely in dooboo-ui web. Also, since useNativeDriver is now necessary, we need to migrate the component to work in mobile too.

To Reproduce

Test the Accordion component in both web and ios or android storybook

Expected behavior

Work as expected.Accordion collapsible

Screenshots
image
Y8Bgtu6GLk

Desktop (please complete the following information):

  • OS: MacOS
  • Browser chrome
  • Version Version 83.0.4103.61 (Official Build) (64-bit)

Smartphone (please complete the following information):

  • Device: iPhone11
  • OS: iOS 13.3
  • Version: 11.5

Elements hides after updating the state

Hi
I have Accordion component, inside each visible element there's a checkbox select option, once i've checked any element and collapse the section, the section won't appear any more

here's my code

import React from 'react';
import {
  View,
  StyleSheet,
  Text,
  ScrollView,
  Dimensions,
  TouchableOpacity,
} from 'react-native';
import {connect} from 'react-redux';
import find from 'lodash/find';
import Icon from 'react-native-vector-icons/FontAwesome';
import colors from '../../../assets/style/colors';
import normalize from 'react-native-normalize';
import SafeAreaView from 'react-native-safe-area-view';
import Accordion from '@dooboo-ui/native-accordion';

const {width} = Dimensions.get('screen');
const allQuestions = [
  {
    title: 'Identify',
    category: 'latent',
    questions: [],
  },
  {
    title: 'Qualify',
    category: 'admitted',
    questions: [],
  },
  {
    title: 'Value',
    category: 'vision',
    questions: [],
  },
  {
    title: 'Close',
    category: 'evaluation',
    questions: [],
  },
];
const style = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.paleGrey,
  },
  hint: {
    color: colors.greyishBrown,
    fontFamily: 'Lato-Regular',
    fontSize: normalize(14),
    lineHeight: normalize(18),
    marginHorizontal: 20,
    marginVertical: 20,
  },
  Accordion: {
    elevation: 10,
    backgroundColor: colors.paleGrey,
    width,
    marginHorizontal: 15,
  },
  section: {
    flexDirection: 'row',
    paddingVertical: 20,
    paddingHorizontal: 20,
    marginHorizontal: 10,
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: colors.White,
    borderColor: colors.veryLightGrey,
    borderWidth: 0.5,
  },
  sectionTitle: {
    color: colors.greyishBrown,
    fontFamily: 'Lato-Black',
    fontSize: normalize(16),
    lineHeight: normalize(18),
  },
  questionTitle: {
    color: colors.greyishBrown,
    fontFamily: 'Lato-Bold',
    fontSize: normalize(15),
    lineHeight: normalize(18),
  },
  questionWrapper: {
    width: '95%',
    borderColor: colors.White,
    flexDirection: 'row',
    borderBottomWidth: 0.7,
    paddingVertical: 15,
  },
  question: {
    color: colors.greyishBrown,
    fontFamily: 'Lato-Regular',
    fontSize: normalize(14),
    lineHeight: normalize(18),
  },
  icon: {
    marginHorizontal: 7,
    alignSelf: 'center',
  },
  button: {
    backgroundColor: colors.cerulean,
    width: width * 0.85,
    borderRadius: 5,
    paddingVertical: 10,
    paddingHorizontal: 20,
    alignSelf: 'center',
    marginVertical: 15,
    shadowOffset: {width: 1, height: 1},
    shadowColor: colors.veryLightGrey,
    shadowOpacity: 1.0,
    alignItems: 'center',
  },
  buttonText: {
    color: colors.White,
    fontFamily: 'Lato-Bold',
    fontSize: normalize(14),
    textAlign: 'center',
  },
});

class ManualFeedbackForm extends React.Component {
  constructor() {
    super();
    this.state = {
      activeToggle: undefined,
      isLoading: false,
      currentQuestions: [],
      selectedQuestions: [],
    };
  }

  componentWillReceiveProps() {
    const {manualQuestions} = this.props;
    allQuestions[0].questions = manualQuestions.latent;
    allQuestions[1].questions = manualQuestions.admitted;
    allQuestions[2].questions = manualQuestions.vision;
    allQuestions[3].questions = manualQuestions.evaluation;
  }
  componentDidMount() {
    const {manualQuestions} = this.props;
    allQuestions[0].questions = manualQuestions.latent;
    allQuestions[1].questions = manualQuestions.admitted;
    allQuestions[2].questions = manualQuestions.vision;
    allQuestions[3].questions = manualQuestions.evaluation;
  }

  setActiveToggle = item => {
    const {manualQuestions} = this.props;
    this.setState({activeToggle: item});

    if (item !== undefined) {
      this.setState({currentQuestions: manualQuestions[item]});
    }
  };

  selectQuestion = question => {
    const {selectedQuestions} = this.state;
    let newQuestions = [];
    if (this.isSelectedQuestion(question.id)) {
      // unselect
      newQuestions = selectedQuestions.filter(item => item.id !== question.id);
    } else {
      newQuestions = [...selectedQuestions, question];
    }
    this.setState({selectedQuestions: newQuestions});
  };

  isSelectedQuestion = qid => {
    try {
      const {selectedQuestions} = this.state;

      const results = find(selectedQuestions, function(sq) {
        return sq.id === qid;
      });
      console.log('results', results);
      return results;
    } catch (e) {
      console.log(e);
    }
  };

  render() {
    const {navigation} = this.props;
    return (
      <SafeAreaView style={style.container}>
        <Text style={style.hint}>
          Please select questions from one. Please aim for no more than 10
          questions for a higher response rate.
        </Text>
        <ScrollView contentContainerStyle={{alignItems: 'center'}}>
          {allQuestions.map((element, index) => {
            return (
              <Accordion
                key={index}
                style={style.Accordion}
                contentVisible={false}
                visibleElement={
                  <Icon
                    name="angle-up"
                    color={colors.MedGrey}
                    size={25}
                    style={{position: 'absolute', right: 30, top: 20}}
                  />
                }
                invisibleElement={
                  <Icon
                    name="angle-down"
                    color={colors.MedGrey}
                    size={25}
                    style={{position: 'absolute', right: 30, top: 20}}
                  />
                }
                header={
                  <View
                    style={[
                      style.section,
                      index === 0 && {
                        borderTopRightRadius: 15,
                        borderTopLeftRadius: 15,
                      },
                      index === 3 && {
                        borderBottomEndRadius: 15,
                        borderBottomStartRadius: 15,
                      },
                    ]}>
                    <Text style={style.sectionTitle}>{element.title}</Text>
                  </View>
                }>
                <View style={{width: '90%'}}>
                  {element.questions.map((question, questionIndex) => {
                    return (
                      <View style={style.questionWrapper} key={questionIndex}>
                        <Icon
                          onPress={() => this.selectQuestion(question)}
                          name={
                            this.isSelectedQuestion(question.id)
                              ? 'square'
                              : 'square'
                          }
                          color={colors.cerulean}
                          size={30}
                          style={style.icon}
                        />
                        {this.isSelectedQuestion(question.id) ? (
                          <Text>ok</Text>
                        ) : (
                          <Text>no</Text>
                        )}
                        <View>
                          <Text style={style.questionTitle}>
                            {question.competency}
                          </Text>
                          <Text style={style.question}>
                            {question.description}
                          </Text>
                        </View>
                      </View>
                    );
                  })}
                </View>
              </Accordion>
            );
          })}
        </ScrollView>
        <TouchableOpacity
          style={style.button}
          onPress={() => navigation.goBack()}>
          <Text allowFontScaling={false} style={style.buttonText}>
            Save question selection and return to customer request form
          </Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}
const mapStateToProps = state => {
  return {
    manualQuestions: state.feedbackReducer.manualQuestions,
  };
};

export default connect(mapStateToProps)(ManualFeedbackForm);

'react-native-svg' module is not contained in the library dependency

Describe the bug
'react-native-svg' module is not contained in the project dependency.

To Reproduce
Steps to reproduce the behavior:

  1. install dooboo-ui
  2. import SwitchToggle Component in my project
  3. it shows unable to resolve module error.

Screenshots
If applicable, add screenshots to help explain your problem.
Simulator Screen Shot - iPhone 11 - 2020-08-13 at 14 31 27

Smartphone (please complete the following information):

  • Device: [iPhone11]
  • OS: [iOS13.6]

Additional context
Add any other context about the problem here.

To solve this problem, it seems to be removed react-native-svg dependency from Arrow of Select Component or add this module to library dependency.

[Enhance] Refactor native StyleSheet to style-components.

Enhancement derived from a discussion of dooboolab-community/hackatalk#34, suggested by @hyochan

We should use style-components, instead of StyleSheet of react-native, due to the following issues.

  • More difficult to manage StyleSheet styles than styled-components.
  • Hard to migrate common components coded by styled-components from other projects to @dooboo-ui/native.
  • @dooboo-ui/native has the both StyledSheet and styled-components. Should use one of them to keep code consistency.

Error when running "yarn add @dooboo-ui/core"

Hello. I hope this is the good place to report this.

Describe the bug
I was trying to install the component SwitchToggle (found here : https://github.com/dooboolab/dooboo-ui/tree/master/main/SwitchToggle)

I tried running "yarn add @dooboo-ui/core" as described on the link above. And the following error appeared :
error An unexpected error occurred: "https://registry.yarnpkg.com/@dooboo-ui%2fcore: Not found".

To Reproduce

simply run "yarn add @dooboo-ui/core" in your terminal

Problem with snapshot testing environment of CalendarCarousel

Describe the bug
yarn testing fails in packages/tests/CalendarCarousel.test.tsx

To Reproduce

  1. $yarn jest packages/__tests__/CalendarCarousel.test.tsx

  2. Then I get following error message.

$ tsc
 FAIL  packages/__tests__/CalendarCarousel.test.tsx
  โ— [Calendar] โ€บ should render without crashing

    expect(received).toMatchSnapshot()

    Snapshot name: `[Calendar] should render without crashing 1`

    - Snapshot  - 24
    + Received  + 24

    @@ -62,11 +62,11 @@
                      "textAlign": "center",
                      "width": 300,
                    }
                  }
                >
    -             July
    +             7์›”
                </Text>
                <Text
                  style={
                    Object {
                      "fontSize": 12,
    @@ -114,11 +114,11 @@
                      "fontSize": 20,
                      "textAlign": "center",
                    }
                  }
                >
    -             S
    +             ์ผ
                </Text>
              </View>
              <View
                style={
                  Object {

...

      16 |   it('should render without crashing', () => {
      17 |     const rendered = renderer.create(component());
    > 18 |     expect(rendered).toMatchSnapshot();
         |                      ^
      19 |     expect(rendered).toBeTruthy();
      20 |   });
      21 | });

      at Object.<anonymous> (packages/__tests__/CalendarCarousel.test.tsx:18:22)

 โ€บ 1 snapshot failed.
Snapshot Summary
 โ€บ 1 snapshot failed from 1 test suite. Inspect your code changes or run `yarn run jest -u` to update them.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   1 failed, 1 total
Time:        2.181 s, estimated 4 s
Ran all test suites matching /packages\/__tests__\/CalendarCarousel.test.tsx/i.
error Command failed with exit code 1.

Expected behavior
This test failure seems to be happening only in my terminal.

Screenshots
X

Desktop (please complete the following information):

  • OS: [mac OS]

Smartphone (please complete the following information):
X

Additional context
X

[Discussion] Slider component interface

derived from #41

This issue is to discuss [Slider] interface(like props) or others what [Slider] should have.

CONTRIBUTORS

Task status

Component Implement Test Storybook Component files
Slider Done Done except gesture test Done Done
Rail Done Done - Done
Marks Done Done - Done
Track Done Done - Done
Thumb Done Done - Done
Label Done Done - Done

Components

Slider

Prop Type Default Purpose Required
hideMark boolean false hide marks X
hideLabel boolean true hide label X
autoLabel boolean false show label automatically X
step number 1 distance between two marks X
defaultValue number 0 default value X
minValue number 0 minimum value X
maxValue number 100 maximum value X
mark ReactElement - custom mark X
customMarkWidth number - custom mark width required if custom mark
startMark boolean true show the first mark if ture X
endMark boolean true show the last mark if true X
markStyle StyleProp - mark style X
railStyle StyleProp - rail style X
trackStyle StyleProp - track style X
thumbStyle StyleProp - thumbstyle X
labelStyle StyleProp - label style X
labelTextStyle StyleProp - label text style X
labelSize number - label size X
onChange (value: number) => void - change event handler X

Rail

Prop Type Default Purpose Required
testID string - testing X
style StyleProp<ViewStyle> - rail style X

Marks

Prop Type Default Purpose Required
testID string - testing X
sliderWidth number - sllider width O
style StyleProp<ViewStyle> - marks style X
mark ReactElement - custom mark X
customMarkWidth number - custom mark width required if custom mark
step number 1 distance between two marks X
startMark boolean true show the first mark if ture X
endMark boolean true show the last mark if true X
disabled boolean false disable mark press X
onInit (markValues: number[], markPositions: number[]) => void | Promise<void> - event fired on mount X
onMarkPress (value: number, position: number, index: number) => void | Promise<void> - event fired on mark press X

Track

Prop Type Default Purpose Required
testID string - testing X
style StyleProp<ViewStyle> - track style X
percent number - position of Thumb O

Thumb

Prop Type Default Purpose Required
testID string - testing X
percent number 12 position of thumb X
size number 12 size of thumb X
scaleValue number Animated.Value(0.01) animation scale X
opacityValue number Animated.Value(0.12) animation opacity X
customThumb React.ReactElement - Custom thumb X

Label

Prop Type Default Purpose Required
testID string - testing X
percentValue Animated.Value - position of Label with animation O
value number - value to display O
size number 32 size of thumb X

Issues

  • Resizing in storybook
  • Horizontal mode
  • disabling
  • gesture out of line or thumb

More

  • Multiple thumbs
  • Custom thumb as designed in Figma

SwitchToggle makes error if containderStyle be added without padding.

Describe the bug
When I set the containerStyle and circleStyle of SwitchToggle, I received an error message like below and it not works.

Malformed calls from JS: field sizes are different.

[[71,71,54,54,72,54,54,54,54,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,54,54,54,54,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,54,54,54,9,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,54,54,54,54,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,81,54,54,54,54,54,54,54,54,72,75,92,92,92,92,92,92,92,75,92,92,92,92,92,92,92],[0,0,1,1,5,1,1,1,1,5,5,3,5,5,3,5,5,5,3,5,5,3,5,5,5,3,5,5,5,3,5,3,5,3,5,3,5,5,3,5,5,5,3,5,5,3,5,5,5,3,5,3,5,3,5,3,5,3,5,3,5,3,5,5,3,5,5,5,3,5,5,3,5,5,5,3,5,3,5,3,5,3,5,3,5,3,5,3,5,5,3,5,5,5,3,5,5,3,5,5,5,3,5,3,5,3,5,3,5,3,5,3,5,3,5,5,5,3,5,1,1,1,1,5,5,3,5,3,5,3,5,5,3,5,3,5,3,5,3,5,5,3,5,5,3,5,5,3,5,5,3,5,5,3,5,5,3,5,3,5,3,5,5,3,5,3,5,3,5,3,5,3,0,0,0,3,10,2,2,2,2,2,11,2,11,11,11,11,11,10,2,2,2,2,11,11,11,11,11,0,0,0,0,15,10,2,2,2,2,11,11,11,11,10,2,2,2,2,11,11,11,11,11,0,0,0,0,0,0,0,0,4,0,4,4,4,4,4,4,0,1,4,4,4,4,4,4,0],[[972,1,1587972732478,false],[973,99.99,1587972732478,false],["keyboardDidShow"],["keyboardDidHide"],[6935,"RCTView",81,{"bottom":0,"pointerEvents":"none","shadowOffset":{"height":1,"width":-1},"position":"absolute","shadowColor":4278190080,"shadowOpacity":0.3,"width":3,"left":0,"backgroundColor":4294967295,"top":0,"shadowRadius":5}],["keyboardWillShow"],["keyboardWillHide"],["keyboardDidShow"],["keyboardDidHide"],[6937,"RCTView",81,null],[6939,"RCTView",81,{"zIndex":10,"onLayout":true,"transform":[{"translateY":0}],"collapsable":false}],[6939,[6937]],[6943,"RCTRawText",81,{"text":"Push ์•Œ๋ฆผ ํ—ˆ์šฉ"}],[6945,"RCTText",81,{"color":4282536558,"accessible":true,"allowFontScaling":true,"fontFamily":"SpoqaHanSans-Regular","ellipsizeMode":"tail","fontSize":17}],[6945,[6943]],[6947,"RCTView",81,{"flex":1}],[6949,"RCTText",81,{"ellipsizeMode":"tail","allowFontScaling":true,"accessible":true}],[6953,"RCTView",81,null],[6953,[6949]],[6955,"RCTText",81,{"ellipsizeMode":"tail","allowFontScaling":true,"accessible":true}],[6957,"RCTView",81,null],[6957,[6955]],[6963,"RCTText",81,{"ellipsizeMode":"tail","allowFontScaling":true,"accessible":true}],[6965,"RCTView",81,null],[6965,[6963]],[6967,"RCTView",81,{"onLayout":true}],[6969,"RCTRawText",81,{"text":"Push ์•Œ๋ฆผ ํ•ญ๋ชฉ"}],[6973,"RCTText",81,{"fontSize":13,"allowFontScaling":true,"fontFamily":"SpoqaHanSans-Regular","accessible":true,"ellipsizeMode":"tail","color":4284378244}],[6973,[6969]],[6975,"RCTView",81,{"height":26,"paddingTop":0,"paddingRight":16,"paddingLeft":16,"justifyContent":"center","paddingBottom":0,"backgroundColor":4293651954}],[6975,[6973]],[6977,"RCTView",81,null],[6977,[6975]],[6979,"RCTView",81,{"zIndex":10,"onLayout":true,"transform":[{"translateY":0}],"collapsable":false}],[6979,[6977]],[6983,"RCTRawText",81,{"text":"Patient"}],[6985,"RCTText",81,{"color":4282536558,"accessible":true,"allowFontScaling":true,"fontFamily":"SpoqaHanSans-Regular","ellipsizeMode":"tail","fontSize":17}],[6985,[6983]],[6987,"RCTView",81,{"flex":1}],[6989,"RNSVGPath",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"name":"prefix__a","fill":[0,4278190080],"strokeOpacity":1,"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"d":"M.31 2.457a1 1 0 011.415-1.414l3.892 3.892a1.5 1.5 0 010 2.121l-3.905 3.905A.999.999 0 11.298 9.547l3.551-3.551L.311 2.457z","propList":[],"strokeDashoffset":null,"strokeWidth":1}],[6993,"RNSVGDefs",81,null],[6993,[6989]],[6995,"RNSVGUse",81,{"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"stroke":null,"href":"prefix__a","width":0,"fillRule":1,"strokeDasharray":null,"propList":[],"matrix":[1,0,0,1,0,0],"fill":[0,4278190080],"y":0,"strokeOpacity":1,"fillOpacity":1,"strokeLinecap":0,"strokeWidth":1,"strokeDashoffset":null,"x":0,"opacity":1,"height":0}],[6997,"RNSVGMask",81,{"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"stroke":null,"fillRule":1,"maskContentUnits":1,"x":"0%","strokeDasharray":null,"propList":["fill"],"matrix":[1,0,0,1,0,0],"fill":[0,4294967295],"y":"0%","strokeOpacity":1,"fillOpacity":1,"strokeLinecap":0,"strokeWidth":1,"strokeDashoffset":null,"name":"prefix__b","opacity":1,"height":"100%","maskTransform":[1,0,0,1,0,0],"width":"100%","maskUnits":0}],[6997,[6995]],[6999,"RNSVGUse",81,{"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"stroke":null,"href":"prefix__a","width":0,"fillRule":1,"strokeDasharray":null,"propList":["fill","fillRule"],"matrix":[1,0,0,1,0,0],"fill":[0,4282536558],"y":0,"strokeOpacity":1,"fillOpacity":1,"strokeLinecap":0,"strokeWidth":1,"strokeDashoffset":null,"x":0,"opacity":1,"height":0}],[7003,"RNSVGPath",81,{"vectorEffect":0,"strokeLinejoin":0,"strokeMiterlimit":4,"stroke":null,"opacity":1,"strokeOpacity":1,"fill":[0,4278190080],"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"d":"M-10 18h24V-6h-24z","propList":[],"strokeDashoffset":null,"strokeWidth":1}],[7005,"RNSVGGroup",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"strokeOpacity":1,"fill":[0,4282536558],"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"font":{},"propList":["fill"],"mask":"prefix__b","strokeDashoffset":null,"strokeWidth":1}],[7005,[7003]],[7007,"RNSVGGroup",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"strokeOpacity":1,"fill":null,"matrix":[1,0,0,1,10,6],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":0,"font":{},"propList":["fill","fillRule"],"strokeDashoffset":null,"strokeWidth":1}],[7007,[6997,6999,7005]],[7009,"RNSVGGroup",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"strokeOpacity":1,"fill":[0,4278190080],"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"font":{},"propList":[],"strokeDashoffset":null,"strokeWidth":1}],[7009,[6993,7007]],[7013,"RNSVGSvgView",81,{"meetOrSlice":0,"vbWidth":24,"minY":0,"vbHeight":24,"borderWidth":0,"flex":0,"height":24,"backgroundColor":0,"opacity":1,"bbWidth":24,"minX":0,"width":24,"bbHeight":24,"align":"xMidYMid"}],[7013,[7009]],[7015,"RCTView",81,{"flex":1,"alignItems":"center","paddingHorizontal":16,"accessible":true,"focusable":true,"flexDirection":"row","opacity":1}],[7015,[6985,6987,7013]],[7017,"RCTView",81,{"alignItems":"center","backgroundColor":4294967295,"height":56,"width":"100%"}],[7017,[7015]],[7019,"RCTView",81,{"onLayout":true}],[7019,[7017]],[7023,"RCTRawText",81,{"text":"Screening"}],[7025,"RCTText",81,{"color":4282536558,"accessible":true,"allowFontScaling":true,"fontFamily":"SpoqaHanSans-Regular","ellipsizeMode":"tail","fontSize":17}],[7025,[7023]],[7027,"RCTView",81,{"flex":1}],[7029,"RNSVGPath",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"name":"prefix__a","fill":[0,4278190080],"strokeOpacity":1,"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"d":"M.31 2.457a1 1 0 011.415-1.414l3.892 3.892a1.5 1.5 0 010 2.121l-3.905 3.905A.999.999 0 11.298 9.547l3.551-3.551L.311 2.457z","propList":[],"strokeDashoffset":null,"strokeWidth":1}],[7033,"RNSVGDefs",81,null],[7033,[7029]],[7035,"RNSVGUse",81,{"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"stroke":null,"href":"prefix__a","width":0,"fillRule":1,"strokeDasharray":null,"propList":[],"matrix":[1,0,0,1,0,0],"fill":[0,4278190080],"y":0,"strokeOpacity":1,"fillOpacity":1,"strokeLinecap":0,"strokeWidth":1,"strokeDashoffset":null,"x":0,"opacity":1,"height":0}],[7037,"RNSVGMask",81,{"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"stroke":null,"fillRule":1,"maskContentUnits":1,"x":"0%","strokeDasharray":null,"propList":["fill"],"matrix":[1,0,0,1,0,0],"fill":[0,4294967295],"y":"0%","strokeOpacity":1,"fillOpacity":1,"strokeLinecap":0,"strokeWidth":1,"strokeDashoffset":null,"name":"prefix__b","opacity":1,"height":"100%","maskTransform":[1,0,0,1,0,0],"width":"100%","maskUnits":0}],[7037,[7035]],[7039,"RNSVGUse",81,{"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"stroke":null,"href":"prefix__a","width":0,"fillRule":1,"strokeDasharray":null,"propList":["fill","fillRule"],"matrix":[1,0,0,1,0,0],"fill":[0,4282536558],"y":0,"strokeOpacity":1,"fillOpacity":1,"strokeLinecap":0,"strokeWidth":1,"strokeDashoffset":null,"x":0,"opacity":1,"height":0}],[7043,"RNSVGPath",81,{"vectorEffect":0,"strokeLinejoin":0,"strokeMiterlimit":4,"stroke":null,"opacity":1,"strokeOpacity":1,"fill":[0,4278190080],"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"d":"M-10 18h24V-6h-24z","propList":[],"strokeDashoffset":null,"strokeWidth":1}],[7045,"RNSVGGroup",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"strokeOpacity":1,"fill":[0,4282536558],"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"font":{},"propList":["fill"],"mask":"prefix__b","strokeDashoffset":null,"strokeWidth":1}],[7045,[7043]],[7047,"RNSVGGroup",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"strokeOpacity":1,"fill":null,"matrix":[1,0,0,1,10,6],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":0,"font":{},"propList":["fill","fillRule"],"strokeDashoffset":null,"strokeWidth":1}],[7047,[7037,7039,7045]],[7049,"RNSVGGroup",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"strokeOpacity":1,"fill":[0,4278190080],"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"font":{},"propList":[],"strokeDashoffset":null,"strokeWidth":1}],[7049,[7033,7047]],[7053,"RNSVGSvgView",81,{"meetOrSlice":0,"vbWidth":24,"minY":0,"vbHeight":24,"borderWidth":0,"flex":0,"height":24,"backgroundColor":0,"opacity":1,"bbWidth":24,"minX":0,"width":24,"bbHeight":24,"align":"xMidYMid"}],[7053,[7049]],[7055,"RCTView",81,{"flex":1,"alignItems":"center","paddingHorizontal":16,"accessible":true,"focusable":true,"flexDirection":"row","opacity":1}],[7055,[7025,7027,7053]],[7057,"RCTView",81,{"alignItems":"center","backgroundColor":4294967295,"height":56,"width":"100%"}],[7057,[7055]],[7059,"RCTView",81,{"onLayout":true}],[7059,[7057]],[7063,"RCTRawText",81,{"text":"Ward"}],[7065,"RCTText",81,{"color":4282536558,"accessible":true,"allowFontScaling":true,"fontFamily":"SpoqaHanSans-Regular","ellipsizeMode":"tail","fontSize":17}],[7065,[7063]],[7067,"RCTView",81,{"flex":1}],[7069,"RNSVGPath",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"name":"prefix__a","fill":[0,4278190080],"strokeOpacity":1,"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"d":"M.31 2.457a1 1 0 011.415-1.414l3.892 3.892a1.5 1.5 0 010 2.121l-3.905 3.905A.999.999 0 11.298 9.547l3.551-3.551L.311 2.457z","propList":[],"strokeDashoffset":null,"strokeWidth":1}],[7073,"RNSVGDefs",81,null],[7073,[7069]],[7075,"RNSVGUse",81,{"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"stroke":null,"href":"prefix__a","width":0,"fillRule":1,"strokeDasharray":null,"propList":[],"matrix":[1,0,0,1,0,0],"fill":[0,4278190080],"y":0,"strokeOpacity":1,"fillOpacity":1,"strokeLinecap":0,"strokeWidth":1,"strokeDashoffset":null,"x":0,"opacity":1,"height":0}],[7077,"RNSVGMask",81,{"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"stroke":null,"fillRule":1,"maskContentUnits":1,"x":"0%","strokeDasharray":null,"propList":["fill"],"matrix":[1,0,0,1,0,0],"fill":[0,4294967295],"y":"0%","strokeOpacity":1,"fillOpacity":1,"strokeLinecap":0,"strokeWidth":1,"strokeDashoffset":null,"name":"prefix__b","opacity":1,"height":"100%","maskTransform":[1,0,0,1,0,0],"width":"100%","maskUnits":0}],[7077,[7075]],[7079,"RNSVGUse",81,{"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"stroke":null,"href":"prefix__a","width":0,"fillRule":1,"strokeDasharray":null,"propList":["fill","fillRule"],"matrix":[1,0,0,1,0,0],"fill":[0,4282536558],"y":0,"strokeOpacity":1,"fillOpacity":1,"strokeLinecap":0,"strokeWidth":1,"strokeDashoffset":null,"x":0,"opacity":1,"height":0}],[7083,"RNSVGPath",81,{"vectorEffect":0,"strokeLinejoin":0,"strokeMiterlimit":4,"stroke":null,"opacity":1,"strokeOpacity":1,"fill":[0,4278190080],"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"d":"M-10 18h24V-6h-24z","propList":[],"strokeDashoffset":null,"strokeWidth":1}],[7085,"RNSVGGroup",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"strokeOpacity":1,"fill":[0,4282536558],"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"font":{},"propList":["fill"],"mask":"prefix__b","strokeDashoffset":null,"strokeWidth":1}],[7085,[7083]],[7087,"RNSVGGroup",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"strokeOpacity":1,"fill":null,"matrix":[1,0,0,1,10,6],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":0,"font":{},"propList":["fill","fillRule"],"strokeDashoffset":null,"strokeWidth":1}],[7087,[7077,7079,7085]],[7089,"RNSVGGroup",81,{"stroke":null,"strokeMiterlimit":4,"vectorEffect":0,"strokeLinejoin":0,"opacity":1,"strokeOpacity":1,"fill":[0,4278190080],"matrix":[1,0,0,1,0,0],"fillOpacity":1,"strokeLinecap":0,"strokeDasharray":null,"fillRule":1,"font":{},"propList":[],"strokeDashoffset":null,"strokeWidth":1}],[7089,[7073,7087]],[7093,"RNSVGSvgView",81,{"meetOrSlice":0,"vbWidth":24,"minY":0,"vbHeight":24,"borderWidth":0,"flex":0,"height":24,"backgroundColor":0,"opacity":1,"bbWidth":24,"minX":0,"width":24,"bbHeight":24,"align":"xMidYMid"}],[7093,[7089]],[7095,"RCTView",81,{"flex":1,"alignItems":"center","paddingHorizontal":16,"accessible":true,"focusable":true,"flexDirection":"row","opacity":1}],[7095,[7065,7067,7093]],[7097,"RCTView",81,{"alignItems":"center","backgroundColor":4294967295,"height":56,"width":"100%"}],[7097,[7095]],[7099,"RCTView",81,{"onLayout":true}],[7099,[7097]],[7103,"RCTView",81,{"onLayout":true}],[7105,"RCTView",81,{"importantForAccessibility":"auto","onLayout":true,"pointerEvents":"box-none","accessibilityElementsHidden":false}],[7107,"RCTView",81,{"right":0,"top":0,"pointerEvents":"box-none","position":"absolute","left":0}],[7107,[7105]],[7109,"RCTSinglelineTextInputView",81,{"onTextInput":true,"borderBottomLeftRadius":5,"backgroundColor":4293322470,"accessible":true,"borderBottomRightRadius":5,"borderTopLeftRadius":5,"testID":"Storybook.ListView.SearchBar","placeholder":"Filter","borderTopRightRadius":5,"color":4282664004,"onScroll":true,"marginHorizontal":5,"clearButtonMode":"while-editing","allowFontScaling":true,"paddingVertical":5,"onChange":true,"fontSize":16,"returnKeyType":"search","onSelectionChange":true,"paddingHorizontal":5,"marginVertical":5,"text":""}],["keyboardWillShow"],["keyboardWillHide"],["keyboardDidShow"],["keyboardDidHide"],[7113,"RCTScrollContentView",81,{"onLayout":true}],[7115,"RCTScrollView",81,{"scrollEventThrottle":50,"DEPRECATED_sendUpdatedChildFrames":false,"testID":"Storybook.ListView","onLayout":true,"flexGrow":1,"alwaysBounceHorizontal":false,"onScrollEndDrag":true,"onScroll":true,"overflow":"scroll","marginBottom":40,"snapToStart":true,"pagingEnabled":false,"onMomentumScrollBegin":true,"onMomentumScrollEnd":true,"onScrollBeginDrag":true,"alwaysBounceVertical":true,"flexShrink":1,"flexBasis":0,"snapToEnd":true,"flexDirection":"column"}],[7115,[7113]],[7117,"RCTSafeAreaView",81,{"flex":1,"emulateUnlessSupported":true}],[7117,[7109,7115]],[7119,"RCTView",81,{"bottom":0,"position":"absolute","width":243.74999999999997,"left":0,"backgroundColor":4294967295,"transform":[{"translateX":-244.74999999999997}],"right":0,"top":0}],[7119,[7117]],[7123,"RCTRawText",81,{"text":"No addons loaded."}],[7125,"RCTText",81,{"color":4278190080,"accessible":true,"ellipsizeMode":"tail","allowFontScaling":true,"fontSize":18}],[7125,[7123]],[7127,"RCTView",81,{"flexBasis":0,"alignItems":"center","justifyContent":"center","flexShrink":1,"flexGrow":1}],[7127,[7125]],[7129,"RCTSafeAreaView",81,{"flex":1,"emulateUnlessSupported":true}],[7129,[7127]],[7133,"RCTView",81,{"bottom":0,"position":"absolute","width":243.74999999999997,"left":0,"backgroundColor":4294967295,"transform":[{"translateX":375}],"right":0,"top":0}],[7133,[7129]],[7135,"RCTRawText",81,{"text":"NAVIGATOR"}],[7137,"RCTText",81,{"fontSize":11,"allowFontScaling":true,"paddingVertical":10,"color":4288256409,"accessible":true,"paddingHorizontal":8,"ellipsizeMode":"tail"}],[7137,[7135]],[7139,"RCTView",81,{"backgroundColor":0,"height":3}],[7143,"RCTView",81,{"opacity":1,"focusable":true,"accessible":true}],[7143,[7137,7139]],[7145,"RCTRawText",81,{"text":"PREVIEW"}],[7147,"RCTText",81,{"fontSize":11,"allowFontScaling":true,"paddingVertical":10,"color":4282664004,"accessible":true,"paddingHorizontal":8,"ellipsizeMode":"tail"}],[7147,[7145]],[7149,"RCTView",81,{"backgroundColor":4293322470,"height":3}],[7153,"RCTView",81,{"opacity":1,"focusable":true,"accessible":true}],[7153,[7147,7149]],[7155,"RCTRawText",81,{"text":"ADDONS"}],[7157,"RCTText",81,{"fontSize":11,"allowFontScaling":true,"paddingVertical":10,"color":4288256409,"accessible":true,"paddingHorizontal":8,"ellipsizeMode":"tail"}],[7157,[7155]],[7159,"RCTView",81,{"backgroundColor":0,"height":3}],[7163,"RCTView",81,{"opacity":1,"focusable":true,"accessible":true}],[7163,[7157,7159]],[7165,"RCTView",81,{"paddingHorizontal":8,"borderColor":4293322470,"borderTopWidth":1,"flexDirection":"row","backgroundColor":4294967295,"borderBottomWidth":1}],[7165,[7143,7153,7163]],[7167,"RCTView",81,null],[7167,[7165]],[7169,"RCTRawText",81,{"text":"โ–ก"}],[7173,"RCTText",81,{"color":4288256409,"accessible":true,"ellipsizeMode":"tail","allowFontScaling":true,"fontSize":14}],[7173,[7169]],[7175,"RCTView",81,{"zIndex":100,"position":"absolute","opacity":1,"accessibilityLabel":"Storybook.OnDeviceUI.toggleUI","bottom":12,"testID":"Storybook.OnDeviceUI.toggleUI","accessible":true,"focusable":true,"hitSlop":{"bottom":5,"left":5,"top":5,"right":5},"right":8,"backgroundColor":0}],[7175,[7173]],[7177,"RCTView",81,null],[7177,[7175]],[7179,"RCTSafeAreaView",81,{"emulateUnlessSupported":true}],[7179,[7167,7177]],[7183,"RCTView",81,null],[7183,[7179]],[1],[1],[1],[7],[1090,5915],[1089,1090],[1088,1089],[1087,1088],[1086,1087],[1024,1086],[1086],[951,1087],[951],[1087],[1088],[1089],[1090],[1093,5717],[1092,1093],[1091,1092],[1024,1091],[956,1024],[956],[1024],[1091],[1092],[1093],[1],[1],[1],[1],[6849,"onScroll",1037],[1081,6669],[1080,1081],[1079,1080],[1078,1079],[1037,1078],[1078],[1079],[1080],[1081],[1085,6723],[1084,1085],[1083,1084],[1082,1083],[1037,1082],[1037],[1082],[1083],[1084],[1085],[1],[1],[1],[1],[1],[1],[1],[1],[81,[],[],[],[],[0]],["Invariant Violation: [6959,\"RCTView\",81,{\"width\":24,\"height\":24,\"borderRadius\":12,\"backgroundColor\":4294967295,\"transform\":[{\"translateX\":\"<<NaN>>\"}]}] is not usable as a native method argument\n\nThis error is located at:\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at package/index.js:70)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at package/index.js:56)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at TouchableOpacity.js:308)\n    in TouchableOpacity (at package/index.js:55)\n    in SwitchToggle (at Settings.tsx:130)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at TouchableOpacity.js:308)\n    in TouchableOpacity (at MenuItem.tsx:23)\n    in RCTView (at MenuItem.tsx:22)\n    in MenuItem (at Settings.tsx:302)\n    in ItemWithSeparator (at VirtualizedSectionList.js:332)\n    in RCTView (at VirtualizedList.js:1925)\n    in CellRenderer (at VirtualizedList.js:767)\n    in RCTScrollContentView (at ScrollView.js:1038)\n    in RCTScrollView (at ScrollView.js:1178)\n    in ScrollView (at VirtualizedList.js:1183)\n    in VirtualizedList (at VirtualizedSectionList.js:215)\n    in VirtualizedSectionList (at SectionList.js:301)\n    in SectionList (at Settings.tsx:294)\n    in RCTView (created by Context.Consumer)\n    in StyledNativeComponent (created by Styled(RCTView))\n    in Styled(RCTView) (at Settings.tsx:293)\n    in Settings (created by inject-with-deviceStore-accountStore-patientStore(Settings))\n    in inject-with-deviceStore-accountStore-patientStore(Settings) (at stories/index.tsx:80)\n    in NavigationParamsComponent (at stories/index.tsx:109)\n    in Screen (at stories/index.tsx:22)\n    in MobXProvider (at MobxRnnProvider.tsx:10)\n    in MobxRnnProvider (at stories/index.tsx:21)\n    in Screen (at SceneView.tsx:98)\n    in StaticContainer\n    in StaticContainer (at SceneView.tsx:89)\n    in EnsureSingleNavigator (at SceneView.tsx:88)\n    in SceneView (at useDescriptors.tsx:125)\n    in RCTView (at CardContainer.tsx:190)\n    in RCTView (at CardContainer.tsx:189)\n    in RCTView (at Card.tsx:513)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at Card.tsx:496)\n    in PanGestureHandler (at Card.tsx:489)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at Card.tsx:485)\n    in RCTView (at Card.tsx:479)\n    in Card (at CardContainer.tsx:156)\n    in CardContainer (at CardStack.tsx:519)\n    in RCTView (at CardStack.tsx:109)\n    in MaybeScreen (at CardStack.tsx:512)\n    in RCTView (at CardStack.tsx:92)\n    in MaybeScreenContainer (at CardStack.tsx:410)\n    in CardStack (at StackView.tsx:384)\n    in KeyboardManager (at StackView.tsx:382)\n    in RNCSafeAreaView (at src/index.tsx:28)\n    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)\n    in SafeAreaProviderCompat (at StackView.tsx:379)\n    in RCTView (at StackView.tsx:378)\n    in StackView (at createStackNavigator.tsx:67)\n    in StackNavigator (at stories/index.tsx:49)\n    in RCTView (at stories/index.tsx:48)\n    in RCTView (at Snackbar/index.tsx:30)\n    in SnackbarProvider (at stories/index.tsx:33)\n    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:267)\n    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:39)\n    in ThemeProvider (at NavigationContainer.tsx:38)\n    in ForwardRef(NavigationContainer) (at stories/index.tsx:32)\n    in RCTView (at StoryView/index.tsx:79)\n    in StoryView (at OnDeviceUI/index.tsx:144)\n    in RCTView (created by Context.Consumer)\n    in emotion(RCTView) (at OnDeviceUI/index.tsx:143)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at OnDeviceUI/index.tsx:142)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at OnDeviceUI/index.tsx:141)\n    in RCTView (at absolute-positioned-keyboard-aware-view.tsx:91)\n    in RCTView (at absolute-positioned-keyboard-aware-view.tsx:90)\n    in AbsolutePositionedKeyboardAwareView (at OnDeviceUI/index.tsx:136)\n    in RCTView (at KeyboardAvoidingView.js:207)\n    in KeyboardAvoidingView (at OnDeviceUI/index.tsx:130)\n    in RCTSafeAreaView (at SafeAreaView.js:55)\n    in SafeAreaView (at OnDeviceUI/index.tsx:129)\n    in OnDeviceUI (at preview/index.tsx:148)\n    in ThemeProvider (at preview/index.tsx:147)\n    in StorybookRoot\n    in RCTView (at AppContainer.js:101)\n    in RCTView (at AppContainer.js:119)\n    in AppContainer (at renderApplication.js:39)",[{"arguments":[],"lineNumber":9591,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"MessageQueue.enqueueNativeCall","column":11},{"arguments":[],"lineNumber":9222,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"Object.fn [as createView]","column":25},{"arguments":[],"lineNumber":21918,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"createInstance","column":47},{"arguments":[],"lineNumber":30115,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"completeWork","column":36},{"arguments":[],"lineNumber":32917,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"completeUnitOfWork","column":22},{"arguments":[],"lineNumber":32895,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"performUnitOfWork","column":18},{"arguments":[],"lineNumber":32867,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"workLoopSync","column":28},{"arguments":[],"lineNumber":32631,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"renderRoot","column":17},{"arguments":[],"lineNumber":32392,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"runRootCallback","column":26}],1],["didSendNetworkData"],["didReceiveNetworkResponse"],["didReceiveNetworkData"],["didReceiveNetworkIncrementalData"],["didReceiveNetworkDataProgress"],["didCompleteNetworkResponse"],[{"responseType":"blob","url":"http://172.30.1.3:8081/symbolicate","data":{"trackingName":"unknown","string":"{\"stack\":[{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"MessageQueue.enqueueNativeCall\",\"arguments\":[],\"lineNumber\":9591,\"column\":11},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"Object.fn [as createView]\",\"arguments\":[],\"lineNumber\":9222,\"column\":25},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"createInstance\",\"arguments\":[],\"lineNumber\":21918,\"column\":47},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"completeWork\",\"arguments\":[],\"lineNumber\":30115,\"column\":36},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"completeUnitOfWork\",\"arguments\":[],\"lineNumber\":32917,\"column\":22},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"performUnitOfWork\",\"arguments\":[],\"lineNumber\":32895,\"column\":18},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"workLoopSync\",\"arguments\":[],\"lineNumber\":32867,\"column\":28},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"renderRoot\",\"arguments\":[],\"lineNumber\":32631,\"column\":17},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"runRootCallback\",\"arguments\":[],\"lineNumber\":32392,\"column\":26}]}"},"timeout":0,"method":"POST","headers":{"content-type":"text/plain;charset=UTF-8"},"withCredentials":true,"incrementalUpdates":false},23405],["Invariant Violation: [6959,\"RCTView\",81,{\"width\":24,\"height\":24,\"borderRadius\":12,\"backgroundColor\":4294967295,\"transform\":[{\"translateX\":\"<<NaN>>\"}]}] is not usable as a native method argument\n\nThis error is located at:\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at package/index.js:70)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at package/index.js:56)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at TouchableOpacity.js:308)\n    in TouchableOpacity (at package/index.js:55)\n    in SwitchToggle (at Settings.tsx:130)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at TouchableOpacity.js:308)\n    in TouchableOpacity (at MenuItem.tsx:23)\n    in RCTView (at MenuItem.tsx:22)\n    in MenuItem (at Settings.tsx:302)\n    in ItemWithSeparator (at VirtualizedSectionList.js:332)\n    in RCTView (at VirtualizedList.js:1925)\n    in CellRenderer (at VirtualizedList.js:767)\n    in RCTScrollContentView (at ScrollView.js:1038)\n    in RCTScrollView (at ScrollView.js:1178)\n    in ScrollView (at VirtualizedList.js:1183)\n    in VirtualizedList (at VirtualizedSectionList.js:215)\n    in VirtualizedSectionList (at SectionList.js:301)\n    in SectionList (at Settings.tsx:294)\n    in RCTView (created by Context.Consumer)\n    in StyledNativeComponent (created by Styled(RCTView))\n    in Styled(RCTView) (at Settings.tsx:293)\n    in Settings (created by inject-with-deviceStore-accountStore-patientStore(Settings))\n    in inject-with-deviceStore-accountStore-patientStore(Settings) (at stories/index.tsx:80)\n    in NavigationParamsComponent (at stories/index.tsx:109)\n    in Screen (at stories/index.tsx:22)\n    in MobXProvider (at MobxRnnProvider.tsx:10)\n    in MobxRnnProvider (at stories/index.tsx:21)\n    in Screen (at SceneView.tsx:98)\n    in StaticContainer\n    in StaticContainer (at SceneView.tsx:89)\n    in EnsureSingleNavigator (at SceneView.tsx:88)\n    in SceneView (at useDescriptors.tsx:125)\n    in RCTView (at CardContainer.tsx:190)\n    in RCTView (at CardContainer.tsx:189)\n    in RCTView (at Card.tsx:513)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at Card.tsx:496)\n    in PanGestureHandler (at Card.tsx:489)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at Card.tsx:485)\n    in RCTView (at Card.tsx:479)\n    in Card (at CardContainer.tsx:156)\n    in CardContainer (at CardStack.tsx:519)\n    in RCTView (at CardStack.tsx:109)\n    in MaybeScreen (at CardStack.tsx:512)\n    in RCTView (at CardStack.tsx:92)\n    in MaybeScreenContainer (at CardStack.tsx:410)\n    in CardStack (at StackView.tsx:384)\n    in KeyboardManager (at StackView.tsx:382)\n    in RNCSafeAreaView (at src/index.tsx:28)\n    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)\n    in SafeAreaProviderCompat (at StackView.tsx:379)\n    in RCTView (at StackView.tsx:378)\n    in StackView (at createStackNavigator.tsx:67)\n    in StackNavigator (at stories/index.tsx:49)\n    in RCTView (at stories/index.tsx:48)\n    in RCTView (at Snackbar/index.tsx:30)\n    in SnackbarProvider (at stories/index.tsx:33)\n    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:267)\n    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:39)\n    in ThemeProvider (at NavigationContainer.tsx:38)\n    in ForwardRef(NavigationContainer) (at stories/index.tsx:32)\n    in RCTView (at StoryView/index.tsx:79)\n    in StoryView (at OnDeviceUI/index.tsx:144)\n    in RCTView (created by Context.Consumer)\n    in emotion(RCTView) (at OnDeviceUI/index.tsx:143)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at OnDeviceUI/index.tsx:142)\n    in RCTView (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at OnDeviceUI/index.tsx:141)\n    in RCTView (at absolute-positioned-keyboard-aware-view.tsx:91)\n    in RCTView (at absolute-positioned-keyboard-aware-view.tsx:90)\n    in AbsolutePositionedKeyboardAwareView (at OnDeviceUI/index.tsx:136)\n    in RCTView (at KeyboardAvoidingView.js:207)\n    in KeyboardAvoidingView (at OnDeviceUI/index.tsx:130)\n    in RCTSafeAreaView (at SafeAreaView.js:55)\n    in SafeAreaView (at OnDeviceUI/index.tsx:129)\n    in OnDeviceUI (at preview/index.tsx:148)\n    in ThemeProvider (at preview/index.tsx:147)\n    in StorybookRoot\n    in RCTView (at AppContainer.js:101)\n    in RCTView (at AppContainer.js:119)\n    in AppContainer (at renderApplication.js:39)",[{"arguments":[],"lineNumber":9591,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"MessageQueue.enqueueNativeCall","column":11},{"arguments":[],"lineNumber":9222,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"Object.fn [as createView]","column":25},{"arguments":[],"lineNumber":21918,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"createInstance","column":47},{"arguments":[],"lineNumber":30115,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"completeWork","column":36},{"arguments":[],"lineNumber":32917,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"completeUnitOfWork","column":22},{"arguments":[],"lineNumber":32895,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"performUnitOfWork","column":18},{"arguments":[],"lineNumber":32867,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"workLoopSync","column":28},{"arguments":[],"lineNumber":32631,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"renderRoot","column":17},{"arguments":[],"lineNumber":32392,"file":"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false","methodName":"runRootCallback","column":26}],2],["didSendNetworkData"],["didReceiveNetworkResponse"],["didReceiveNetworkData"],["didReceiveNetworkIncrementalData"],["didReceiveNetworkDataProgress"],["didCompleteNetworkResponse"],[{"responseType":"blob","url":"http://172.30.1.3:8081/symbolicate","data":{"trackingName":"unknown","string":"{\"stack\":[{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"MessageQueue.enqueueNativeCall\",\"arguments\":[],\"lineNumber\":9591,\"column\":11},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"Object.fn [as createView]\",\"arguments\":[],\"lineNumber\":9222,\"column\":25},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"createInstance\",\"arguments\":[],\"lineNumber\":21918,\"column\":47},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"completeWork\",\"arguments\":[],\"lineNumber\":30115,\"column\":36},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"completeUnitOfWork\",\"arguments\":[],\"lineNumber\":32917,\"column\":22},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"performUnitOfWork\",\"arguments\":[],\"lineNumber\":32895,\"column\":18},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"workLoopSync\",\"arguments\":[],\"lineNumber\":32867,\"column\":28},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"renderRoot\",\"arguments\":[],\"lineNumber\":32631,\"column\":17},{\"file\":\"http://172.30.1.3:8081/index.bundle?platform=ios&dev=true&minify=false\",\"methodName\":\"runRootCallback\",\"arguments\":[],\"lineNumber\":32392,\"column\":26}]}"},"timeout":0,"method":"POST","headers":{"content-type":"text/plain;charset=UTF-8"},"withCredentials":true,"incrementalUpdates":false},23421]],11463]

To Reproduce
Steps to reproduce the behavior:

Use SwitchToggle component like below.

<SwitchToggle
            backgroundColorOn={colors.babyblue}
            backgroundColorOff={colors.gray_4}
            circleColorOn={colors.white}
            duration={500}
            onPress={togglePushAllowed}
            switchOn={isPushAllowed}
            containerStyle={{
              width: 48,
              height: 28,
              // padding: 0,
              borderRadius: 14
            }}
            circleStyle={{
              width: 24,
              height: 24,
              borderRadius: 12,
            }}
          />

Expected behavior
The SwitchToggle component works normally.

skipped

Desktop (please complete the following information):
skipped

Smartphone (please complete the following information):
skipped

Additional context
I found the cause so I skipped some informations(Screenshots etc).
It is because of that the padding value is not included in the containerStyle.
It makes circlePosXEnd to undefined and the error occurred.
I think It's so minor issue because if padding is not added to the containerStyle, it would look a little strange. But it will be better if some caution or the codes avoiding this issue be added.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.