hyochan / dooboo-ui-legacy Goto Github PK
View Code? Open in Web Editor NEWReact Native UI Components with react-hook (web, ios, android)
License: MIT License
React Native UI Components with react-hook (web, ios, android)
License: MIT License
Is your feature request related to a problem? Please describe.
nope
Describe the solution you'd like
a Card component : Simple rectangular container.
go figma workspace to get more details
implementing it here
Is your feature request related to a problem? Please describe.
New Rating component related to #37.
Describe the solution you'd like
Ref: https://material-ui.com/components/rating
Do not use external library such as react-native-vector-icon
.
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.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
First (General)
import Button from 'dooboo-ui';
function Sample():ReactElement {
return <Button text="test"></Button>
}
Second ( Storybook, Gatsby)
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>
);
}
or
Expected behavior
A clear and concise description of what you expected to happen.
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!!
We are planning to support more UI components.
You can refer to the design in following link.
react-native-vector-icon
Radio Button Component
Ref: https://material-ui.com/components/radio-buttons/
from #37
Describe the solution you'd like
Create a new RadioButton component similar with RadioButton or Material UI
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.
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.
Describe alternatives you've considered
.
Additional context
Implement Floating Action Button.
Since #196 has been merged, we can drive forward to web implementation.
After we've tested implementing UI components in web, we can think of publishing our new packages and deprecate all previous @dooboo-ui/native-*
packages.
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]
And @JeffGuKang is another core maintainer of dooboo-ui
๐ ๐ ๐ ๐
Is your feature request related to a problem? Please describe.
Feature request: Checkbox.
Describe the solution you'd like
Describe alternatives you've considered
Additional context
Refs
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
Describe the bug
Props table and examples are not in sync with the actual source code of Button
component.
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.Describe the bug
password character ellipsis issue.
To Reproduce
Steps to reproduce the behavior:
ios test
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Smartphone (please complete the following information):
Additional context
I'll start fixing bugs.
Also, I will check if there are bugs in other iOS devices.
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):
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 :/
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
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
Smartphone (please complete the following information):
Additional context
library version
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
Describe the solution you'd like
A simple component that makes child components easily zoomable.
android
and ios
platform.I made a pull request about this (#315) except 'rotating by changing the angle with two-finger' of the above.
Is your feature request related to a problem? Please describe.
Feature request: DatePicker
Describe the solution you'd like
Describe alternatives you've considered
Additional context
Refs
derived from #37
Discussion for component interface and spec
step
size.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:
Expected behavior
A clear and concise description of what you expected to happen.
Have to pass test
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.
derived from #37
Implementing Selects component with test codes
Adding storybooks for Selects component and sub-components.
(Additional)
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]
style
in Container
view of AccordionItem
.itemTitleLeft
and itemBodyLeft
.renderCustomTitle
and renderCustomBodyItem
to customize the elements. We only need one default style. The only extra element could be toggleElement
.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
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.itemData
can be just an item
or datum
. Try to remove the word item
as much as possible.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.useCallback
and useMemo
where possible. Since shared components may be used in many elements, it is good to provide them efficiently.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.
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
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,
},
});
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
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
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
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.
derived from #37
Implementing Snackbars
component with test codes
Adding storybooks for Slider component and sub-components.
Hackatalk UI Design
https://www.figma.com/file/0WDPu0Cn9upY1TQcLuhLev/prototype?node-id=39%3A543
Snackbars
https://material-ui.com/components/snackbars
https://material.io/components/snackbars/
styled-components
storybook.js
@testing-library/react-native
Describe the bug
Error occurs during javascript bundle becasue of invalid package path.
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
yarn install
yarn run ios or start
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
context
derived from #37
assigned to vanayun, impressor615
focus
- Active
- Inactive
filter
assigned to hmhm2292
scroll top to the screen as the screenshot when touched
assigned to imjihun
- background highlight when touched
- set value for Render Input when selected
- have various options such as icon, image, styles, etc.
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
.
Additional context
react-natve-vector-icons
derived from #37
GOAL
Implementing Selects component with test codes
Adding storybooks for Selects component and sub-components.- Select component structure
1. Implement props related to "Root" section. [assigned @geoseong]
- theme
- 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
- https://www.figma.com/file/0WDPu0Cn9upY1TQcLuhLev/prototype?node-id=46%3A110
- https://material-ui.com/components/selects/
Libraries
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!
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:
Expected behavior
No warning
Additional context
@dooboo-ui/native-switch-toggle
version: 0.4.1
Describe the bug
Checkbox border has glitches on the web environment.
To Reproduce
Steps to reproduce the behavior:
yarn web
Checkbox
storyExpected behavior
All outlines must be uniform.
Screenshots
Desktop (please complete the following information):
Smartphone (please complete the following information):
X
Additional context
X
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
Desktop (please complete the following information):
Smartphone (please complete the following information):
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);
Describe the bug
'react-native-svg' module is not contained in the project dependency.
To Reproduce
Steps to reproduce the behavior:
Screenshots
If applicable, add screenshots to help explain your problem.
Smartphone (please complete the following information):
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.
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.
StyleSheet
styles than styled-components
.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.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
Describe the bug
yarn testing fails in packages/tests/CalendarCarousel.test.tsx
To Reproduce
$yarn jest packages/__tests__/CalendarCarousel.test.tsx
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):
Smartphone (please complete the following information):
X
Additional context
X
derived from #41
This issue is to discuss [Slider] interface(like props) or others what [Slider] should have.
CONTRIBUTORS
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 |
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 |
Prop | Type | Default | Purpose | Required |
---|---|---|---|---|
testID | string | - | testing | X |
style | StyleProp<ViewStyle> | - | rail style | X |
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 |
Prop | Type | Default | Purpose | Required |
---|---|---|---|---|
testID | string | - | testing | X |
style | StyleProp<ViewStyle> | - | track style | X |
percent | number | - | position of Thumb | O |
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 |
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 |
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.