Skip to content

Latest commit

 

History

History
160 lines (121 loc) · 7.39 KB

README.md

File metadata and controls

160 lines (121 loc) · 7.39 KB
Raw

React Native Poll

Voting and poll library for React Native with fully customizable options

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Poll

React Native Poll React Native Poll Choice Selected
React Native Poll React Native Poll

Installation

Add the dependency:

npm i react-native-poll

Peer Dependencies

IMPORTANT! You need install them
"@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 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
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
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, [email protected]

License

React Native Poll is available under the MIT license. See the LICENSE file for more info.