WrathChaos / react-native-poll

Voting and poll library for React Native with fully customizable options

React Native Poll	React Native Poll Choice Selected

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

import RNPoll, { IChoice } from "react-native-poll";

<RNPoll
  totalVotes={30}
  choices={choices}
  onChoicePress={(selectedChoice: IChoice) =>
    console.log("SelectedChoice: ", selectedChoice)
  }
/>

Advanced Usage

import RNAnimated from "react-native-animated-component";
import RNPoll, { IChoice } from "react-native-poll";

<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
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
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, [e-mail]

License

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