## Workflow when creating new component: - Let's go with priority of a component - atoms / molecules / organisms / templates / pages - each component should have an API defined before implementeation - we need to predict usage of this component and find the most optimal way - good way to go is look through UI libraries written bellow and try to propose something and later on select best pratices - we can do brainstorm to find the best solution for all the RN guys in the whole team ## Libraries - https://github.com/react-native-elements/react-native-elements - https://github.com/GeekyAnts/NativeBase - https://github.com/akveo/react-native-ui-kitten - https://github.com/creativetimofficial/material-kit - https://github.com/shoutem/ui - https://github.com/wix/react-native-ui-lib - https://github.com/Trixieapp/react-virgin - https://github.com/jxom/bumbag-ui - https://github.com/nachos-ui/nachos-ui - https://github.com/rilyu/teaset - https://avocode.com/nachos-ui - https://github.com/rcaferati/react-native-really-awesome-button - https://bumbag.style/ albo https://github.com/jxom/bumbag-ui - https://magnus-ui.com/docs/portal/ - https://github.com/99x/first-born - https://github.com/panza-org/panza - https://github.com/VitorCodes/react-native-motion-slider - https://github.com/acerbastimur/React-Native-Awesome-Loading - https://github.com/netbeast/react-native-big-slider - https://github.com/nidorx/react-native-ui-blueprint - https://github.com/cawfree/react-native-label * React Native SVG \* - copy element as svg from Figma design - go to https://react-svgr.com/playground/ - select "React Native" on the left - copy code for react native - width, height and color (fill) can be added as props to the SVG component ## Layouts - https://github.com/ATF19/react-native-shop-ui - https://github.com/gorhom/react-native-paper-onboarding - https://github.com/calebnance/expo-spotify - https://github.com/nattatorn-dev/react-native-user-profile ## Components Absolute - DONE Accordion ActionButtons ActionSheet ActivityIndicator Alert AlertDialog Appbar Appbar.Action Appbar.BackAction Appbar.Content Appbar.Header Autocomplete Autosuggest Avatar Avatar.Icon Avatar.Image Avatar.Text Badge Banner BasePage BottomNav BottomNavigation BottomSheet BottomTabs Bubble Button // TODO: ButtonGroup ButtonIcon Calendar Caption // TODO: Card Carousel Center - DONE Chip CircularSlider CodeInput Collapse ColorPicker Column // TODO: Container Countdown Counter Dash DataTable DataTable.Cell DataTable.Header DataTable.Pagination DataTable.Row DataTable.Title DatePicker DateTimePicker Dialog Dialog.Actions Dialog.Content Dialog.ScrollArea Dialog.Title DialogAlert Div Divider Drawer Drawer.Item Drawer.Section Dropdown DropdownMenu EmptyState Expand Expandable FAB / Fab FAB.Group Fail // Toast FieldWrapper FlatList FlashList Flex // TODO: FloatingMenu Form // TODO: FormControl Gravatar Grid Group Header Heading // TODO: Headline // TODO: HelperText // TODO: Hidden Hide HorizontalPager HStack / Row // TODO: Icon IconButton IconToggle Image // TODO: ImageBackground // TODO: ImageGallery Indicator InlineDropDownMenu Input // TODO: Fix typing on a ControlledInput Path. KeyboardAvoidingView KeyboardSpace Label // TODO: LabelRating Layout Level Lightbox Linear Progress LinearGradient Link // TODO: List List.Accordion List.AccordionGroup List.Icon List.Item List.Nested List.Section List.Subheader ListItem ListSection MediaControls MentionInput Menu Menu.Item Modal MotionSlider OverflowMenu Overlay Page PageViewer Paper Paragraph // TODO: PhoneInput Picker Pincode Popover Portal Pressable // TODO: Pricing Progress ProgressBar ProgressCircle ProgressSteps Range RangeSlider Rating ReadMore RefreshControl Ribbon Ripple RippleFeedback Row // TODO: Screen ScrollView SearchBar SearchField Section SectionList Segment SegmentedBar SegmentedControl SegmentedControlButton SegmentedView Select Separator Set Shapes ??? Show Skeleton Slider Snackbar Social Icons / Social Icon Buttons SocialIcon SpeedDial Spinner Stack StatusBar Stepper Subheader // TODO: Subheading // TODO: Subtitle // TODO: Success // Toast Surface Switch Switcher SwitchField SwitchGroup Tab TabButton Tabs TabView Tag Text // TODO: TextArea TextInput // TODO: TextInput.Affix TextInput.Icon Thumbnail Tile TimePicker TimePicker Title // TODO: Toast Toggle ToggleButton ToggleButton.Group ToggleButton.Row Toolbar Tooltip TopNav TopNavigationover TopTabs TouchableOpacity // TODO: TouchableRipple // TODO: Touchable // all // TODO: Typography // TODO: View ViewPager VStack / Column // TODO: Wheel ZStack // TODO: