Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-poll
Voting and poll library for React Native with fully customizable options
https://github.com/wrathchaos/react-native-poll
android app application choice front-end ios javascript mobile poll polling react react-native react-native-poll react-native-vote reactjs typescript vote voting
Last synced: 3 months ago
JSON representation
Voting and poll library for React Native with fully customizable options
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-poll
- Owner: WrathChaos
- Created: 2020-10-21T14:36:56.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-10T07:32:44.000Z (over 1 year ago)
- Last Synced: 2024-10-25T16:59:45.897Z (3 months ago)
- Topics: android, app, application, choice, front-end, ios, javascript, mobile, poll, polling, react, react-native, react-native-poll, react-native-vote, reactjs, typescript, vote, voting
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 4.16 MB
- Stars: 53
- Watchers: 4
- Forks: 21
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-poll)
[](https://www.npmjs.com/package/react-native-poll)
[](https://www.npmjs.com/package/react-native-poll)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
React Native Poll
React Native Poll Choice Selected
# Installation
Add the dependency:
```bash
npm i react-native-poll
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"@freakycoder/react-native-bounceable": ">= 0.2.4",
```
# Usage
## Import
```jsx
import RNPoll, { IChoice } from "react-native-poll";
```
## Fundamental Usage
```jsx
import RNPoll, { IChoice } from "react-native-poll";
console.log("SelectedChoice: ", selectedChoice)
}
/>
```
## Advanced Usage
```jsx
import RNAnimated from "react-native-animated-component";
import RNPoll, { IChoice } from "react-native-poll";
console.log("SelectedChoice: ", selectedChoice)
}
/>;
```
## Data Format (IChoice)
You must use this data format for generating the poll choices
```js
const choices: Array = [
{ id: 1, choice: "Nike", votes: 12 },
{ id: 2, choice: "Adidas", votes: 1 },
{ id: 3, choice: "Puma", votes: 3 },
{ id: 4, choice: "Reebok", votes: 5 },
{ id: 5, choice: "Under Armour", votes: 9 },
];
```
## Example Project 😍
You can checkout the example project 🥰
Simply run
- `npm i`
- `react-native run-ios/android`
should work of the example project.
# Configuration - Props
## Fundamentals
| Property | Type | Default | Description |
|---------------|:--------------:|:---------:|------------------------------------------------------|
| totalVotes | number | undefined | set the total votes of the poll |
| choices | Array | undefined | set the choices array for the generating them |
| onChoicePress | function | default | set your own logic when a choice is pressed/selected |
## Customization (Optionals)
| Property | Type | Default | Description |
|----------------------------|:----------:|:---------:|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| hasBeenVoted | boolean | false | let you to enable if the poll is already voted |
| votedChoiceByID | number(id) | undefined | let you to select the already voted poll choice |
| disableBuiltInIncreaseVote | boolean | false | enable/disable the built-in automatically increase the vote system when a choice is selected |
| disableBuiltInIncreaseVote | boolean | false | enable/disable the built-in automatically increase the vote system when a choice is selected |
| style | ViewStyle | default | set or override the style object for the main container |
| pollContainerStyle | ViewStyle | default | set or override the style object for the poll inner container |
| choiceTextStyle | TextStyle | default | set or override the style object for the choice text style |
| percentageTextStyle | TextStyle | default | set or override the style object for the percentage text style |
| checkMarkImageStyle | ImageStyle | default | set or override the style object for the checkmark image style |
| pollItemContainerStyle | ViewStyle | default | set or override the style object for the poll item container |
| borderColor | color | #aabee3 | change the border color |
| fillBackgroundColor | color | #aabee3 | change the filling background color |
| checkMarkIconImageSource | ISource | default | change the check mark image source |
| defaultChoiceBorderWidth | number | 0.5 | change the default choice's border width |
| selectedChoiceBorderWidth | number | 1 | change the selected choice's border width |
| PollContainer | component | default | set your own component instead of default react-native View component such as [react-native-animated-component](https://github.com/WrathChaos/react-native-animated-component) |
| PollItemContainer | component | default | set your own component instead of default react-native View component such as [react-native-animated-component](https://github.com/WrathChaos/react-native-animated-component) |
| ImageComponent | component | default | set your own component instead of default react-native Image component such as `FastImage` |
## Future Plans
- [x] ~~LICENSE~~
- [ ] More animation options
- [ ] Other poll design options
- [ ] Write an article about the lib on Medium
## Credits
Inspired on [aarkalyk](https://github.com/aarkalyk/react-native-polls-api-example)
## Author
FreakyCoder, [email protected]
## License
React Native Poll is available under the MIT license. See the LICENSE file for more info.