feat: added value input prop

This change allows you to set a `value` that you can use to forcibly update the UI's displayed
selected item. However, this does not introduce a breaking change. This means that `onSelect`
_will_ visually update the UI, THEN the `value` update will take over and update the UI.

Keep in mind that we _will_ be changing this behavior in the next version release.
If you are not currently using `value`, I suggest updating to it, as it will be required
in the next major semver update.

Closes #1

Author: crutchcorn

index.d.ts

@@ -1,7 +1,9 @@
+import { Component } from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 
 export interface ButtonToggleGroupProps {
 	values: string[];
+	value: string;
 	onSelect: (val: string) => void;
 	style?: StyleProp<ViewStyle>;
 	highlightBackgroundColor: string;
@@ -11,7 +13,7 @@ export interface ButtonToggleGroupProps {
 	textStyle?: StyleProp<TextStyle>;
 }
 
-export default class ButtonToggleGroup extends React.Component<
+export default class ButtonToggleGroup extends Component<
 	ButtonToggleGroupProps,
 	any
 > {}

index.js

@@ -5,6 +5,7 @@ import MaskedView from "@react-native-community/masked-view";
 
 const ButtonToggleGroup = ({
 	values,
+	value,
 	onSelect,
 	style,
 	highlightBackgroundColor,
@@ -39,6 +40,14 @@ const ButtonToggleGroup = ({
 		});
 	}, [widthSize, selectedPanelLeft, selectedIndex]);
 
+	React.useEffect(() => {
+		const newIndex = values.findIndex((v) => v === value);
+		setPrevSelectedIndex(selectedIndex);
+		setSelectedIndex(newIndex);
+	}, [values, value, selectedIndex]);
+
+	// This allows the text to render under the related animation while the mask is gliding across
+	// Notice the `.start(setPrevIndex)` to reset the previous index once the animation has stabilized
 	const maxIndex =
 		selectedIndex > prevSelectedIndex ? selectedIndex : prevSelectedIndex;
 	const minIndex =
@@ -66,7 +75,7 @@ const ButtonToggleGroup = ({
 	 * the ripple effect continues to work on Android. As such, we conditionally
 	 * apply the logic for Android vs iOS
 	 */
-	const inactiveContainerIOS = Platform.OS === 'ios' ? {zIndex: -1} : {};
+	const inactiveContainerIOS = Platform.OS === "ios" ? { zIndex: -1 } : {};
 
 	return (
 		<View style={[styles.container, style]}>
@@ -114,7 +123,11 @@ const ButtonToggleGroup = ({
 				</View>
 			</MaskedView>
 			<View
-				style={[styles.baseButtonContainer, styles.inactiveButtonContainer, inactiveContainerIOS]}
+				style={[
+					styles.baseButtonContainer,
+					styles.inactiveButtonContainer,
+					inactiveContainerIOS,
+				]}
 			>
 				{values.map((value, i) => (
 					<TouchableRipple