0.1.2 • Published 3 years ago
react-native-poll v0.1.2
Installation
Add the dependency:
npm i react-native-pollPeer Dependencies
"@freakycoder/react-native-bounceable": ">= 0.2.4",Usage
Import
import RNPoll, { IChoice } from "react-native-poll";Fundamental Usage
<RNPoll
totalVotes={30}
choices={choices}
onChoicePress={(selectedChoice: IChoice) =>
console.log("SelectedChoice: ", selectedChoice)
}
/>Advanced Usage
import RNAnimated from "react-native-animated-component";
<RNPoll
appearFrom="left"
animationDuration={750}
totalVotes={30}
choices={choices}
PollContainer={RNAnimated}
PollItemContainer={RNAnimated}
onChoicePress={(selectedChoice: IChoice) =>
console.log("SelectedChoice: ", selectedChoice)
}
/>;Data Format (IChoice)
You must use this data format for generating the poll choices
const choices: Array<IChoice> = [
{ 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 ireact-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 |
| style | ViewStyle | default | set or override the style object for the main 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 |
| borderColor | color | #aabee3 | change the border color |
| fillBackgroundColor | color | #aabee3 | change the filling background color |
| checkMarkIconImageSource | ISource | default | change the check mark image source |
| PollContainer | component | default | set your own component instead of default react-native View component such as react-native-animated-component |
| PollItemContainer | component | default | set your own component instead of default react-native View component such as react-native-animated-component |
| ImageComponent | component | default | set your own component instead of default react-native Image component such as FastImage |
Future Plans
LICENSE- More animation options
- Other poll design options
- Write an article about the lib on Medium
Credits
Inspired on aarkalyk
Author
FreakyCoder, kurayogun@gmail.com
License
React Native Poll is available under the MIT license. See the LICENSE file for more info.