# react-native-dod

**Repository Path**: lxfriday/react-native-dod

## Basic Information

- **Project Name**: react-native-dod
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-05-17
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Dod Library

> Give what you need **now**, give what you need in **futrue**

<div style="text-align: center;">
  <img src="http://qiniu1.lxfriday.xyz/dodlibrary/logo.png" alt="logo">
</div>

## Component List
### Finished
- `react-navigation`
- `ActionSheet`
- `Badge`
- `Button`
- `Divider`
- `HText`
- `Navbar`
- `RootSiblings`
- `SegmentedControl`
- `Spinner`
- `Toast`
- `ScrollableTabview`

### Todo
<div style="height: 5px;background-color: red;"></div>

- `PopOver` a component wrapper, used to display message when click a trigger
- `PopConfirm` a component that shows buttons and messages，position: center or right at the top of the trigger
- `Carousel` image gallery
- `SwipeButton` a swipable button (test `react-native-interactable`, the animation is nice)

<div style="height: 5px;background-color: red;"></div>

---
- **`SQLite`** sqlite intergrated to RN
- <div style="text-decoration: underline;"> **`StructurizedAsyncStorage`** design structurized data, used to store data that is easy to get and set
- <div style="text-decoration: underline;">`Svg` svg usage and some awesomme demos, `react-native-svg`, `react-native-svg-uri`
- <div style="text-decoration: underline;">`Picker`  a preview designed picker using `react-native-image-picker` returning the uri
- <div style="text-decoration: underline;">`Uploader` a pre designed uploader that you only need to care about the token and the result , use with `Picker`
- <div style="text-decoration: underline;">`screenshot` see <a href="https://github.com/gre/react-native-view-shot">react-native-view-shot</a></div>
- <div style="text-decoration: line-through;">**`Dragger`** `react-native-sortable-listview` like, you can drag the items and reorder, `PanResponder` to drag anything, see  `react-native-view-transformer`
- <div style="text-decoration: line-through;"> **`FloatingLabelTextInput`**
- <div style="text-decoration: line-through;">`PhotoView` show a Image which is can be zoom using native methods, see `react-native-photo-view` ` react-native-transformable-image`
- <div style="text-decoration: line-through;">`AutoCountDown`
- <div style="text-decoration: line-through;">`ColorHText` Htext that with color left or right
- <div style="text-decoration: line-through;">`CardView` material style card item to display info (today), and ColorCardView
- <div style="text-decoration: line-through;">`SettingItem` a setting style component, container several components ( 1.today style 2.yuren style 3.ios style )
- <div style="text-decoration: line-through;">`SearchBar SearchView` a searchbar that when you clicked search results will show bottom (this means that it is a search `View`, search and show result)
- <div style="text-decoration: line-through;">`Avatar` a simple avatar component
- <div style="text-decoration: line-through;">`Modal` several kinds of modals, used to show new page or as a component wrapper,with nice animation (ripple-modal 36kr-like-modal bottom-text-modal)
- <div style="text-decoration: line-through;">`SizedImage` load the given sized image, which is used to reduce the usage of RAM</div> it should be defined when using the Image component
---

- <div style="text-decoration: line-through;">`PanResponder` monitor gestures and response ( spin and zoom )
- <div style="text-decoration: line-through;">`Interactable` responsive top view 
- <div style="text-decoration: line-through;">`Communication` open something on you phone `react-native-communication`
- <div style="text-decoration: underline;">`Notification` notifications that show from the top
- <div style="text-decoration: underline;">`InfiniteScrollView` a demo that show how to load net data and process paging


### Existing Nice Components
- `Progress` [react-native-progress](https://github.com/oblador/react-native-progress)
- `AppIntro` [react-native-app-intro](https://github.com/FuYaoDe/react-native-app-intro)
- `SwiperView` [react-native-swiper](https://github.com/leecade/react-native-swiper)
- `SnapCarousel` [react-native-snap-carousel](https://github.com/archriss/react-native-snap-carousel) it can be used to display card info
- `AutoClearTimerOut` [react-native-smart-timer-enhance](https://github.com/react-native-component/react-native-smart-timer-enhance)