chore: added runnable examples subdir and updated README accordingly

.npmignore

@@ -1,4 +1,4 @@
 .github/
 node_modules/
-
+rndp-examples
 package-lock.json

README.md

@@ -1,15 +1,11 @@
 # React Native Dropdown Picker
 
-<p align="left">
-  <a href="https://github.com/hossein-zare/react-native-dropdown-picker/blob/dev-5.x/LICENSE">
-    <img src="https://img.shields.io/badge/license-MIT-blue.svg"
-      alt="react-native-dropdown-picker is released under the MIT license." />
-  </a>
-  <a href="https://www.npmjs.org/package/react-native-dropdown-picker">
-    <img src="https://img.shields.io/npm/v/react-native-dropdown-picker?color=brightgreen&label=npm%20package"
-      alt="Current npm package version." />
-  </a>
-</p>
+[![react-native-dropdown-picker is released under the MIT license.](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/hossein-zare/react-native-dropdown-picker/blob/dev-5.x/LICENSE)
+[![Current npm package version.](https://img.shields.io/npm/v/react-native-dropdown-picker?color=brightgreen&label=npm%20package)](https://www.npmjs.org/package/react-native-dropdown-picker)
+
+[//]: # (TODO: add badge linking to GitHub repo)
+
+---
 
 ## Screenshots
 
@@ -22,17 +18,24 @@
       width="270" alt="Screenshot showing dark theme and parent items" />
 </p>
 
-The above screenshots are taken from the following
-example: [https://snack.expo.dev/8mHmLfcZf](https://snack.expo.dev/8mHmLfcZf)
+The above screenshots were taken
+from [this example](https://snack.expo.dev/8mHmLfcZf).
 
 ## Usage
 
-See [the relevant documentation](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage).
+You can find runnable examples in the `rndp-examples` subdirectory, which is a
+working [Expo](https://github.com/expo/expo) project demonstrating this library.
+Navigate into the directory, run `npm install` and then `expo start` to see the
+examples working.
+
+For further information on how to use this library,
+read [the relevant documentation](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage).
 
 ## Further documentation
 
 The docs can be read
 at: [https://hossein-zare.github.io/react-native-dropdown-picker-website](https://hossein-zare.github.io/react-native-dropdown-picker-website).
+
 The docs can be edited
 at: [https://github.com/hossein-zare/react-native-dropdown-picker-website](https://github.com/hossein-zare/react-native-dropdown-picker-website)
 
@@ -60,9 +63,8 @@ To make a new release, follow these steps:
   works well
 * You can test changes to the library and experiment easily
   with [patch-package](https://www.npmjs.com/package/patch-package)
-* Use `npm pack` to test the new version of the library locally and check it
-  works correctly;
-  see [https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e](https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e)
+* Once you have made changes, and after finalizing them, use `npm pack`
+  to [test your new, changed version of the library locally and check it works correctly](https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e)
 * Make and merge a final PR into the development branch that increments the
   version number in `package.json`
 * Make and merge a PR from the development branch to the release branch

index.d.ts

@@ -281,16 +281,16 @@ declare module 'react-native-dropdown-picker' {
     multiple?: false;
     onChangeValue?: (value: T | null) => void;
     onSelectItem?: (item: ItemType<T>) => void;
-    setValue: Dispatch<SetStateAction<T | null>>;
     value: T | null;
+    setValue: Dispatch<SetStateAction<T | null>>;
   }
 
   interface DropDownPickerMultipleProps<T extends ValueType> {
     multiple: true;
     onChangeValue?: (value: Array<T> | null) => void;
     onSelectItem?: (items: Array<ItemType<T>>) => void;
-    setValue: Dispatch<SetStateAction<Array<T> | null>>;
     value: Array<T> | null;
+    setValue: Dispatch<SetStateAction<Array<T> | null>>;
   }
 
   interface DropDownPickerInterface {

package.json

@@ -49,8 +49,8 @@
   "devDependencies": {
     "@types/react": "^18.2.21",
     "@types/react-native": "^0.72.2",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
     "eslint": "^8.48.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",

rndp-examples/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

rndp-examples/App.tsx

@@ -0,0 +1,159 @@
+import React, { JSX } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import DropDownPicker, { ItemType } from 'react-native-dropdown-picker';
+import JavascriptClassExample from './javascript-class-example';
+import JavascriptFunctionExample from './javascript-function-example';
+import TypescriptClassExample from './typescript-class-example';
+import TypescriptFunctionExample from './typescript-function-example';
+
+enum ExampleComponent {
+  JavaScriptClassSingleValue,
+  JavaScriptClassMultiValue,
+  JavaScriptFunctionSingleValue,
+  JavaScriptFunctionMultiValue,
+  TypeScriptClassSingleValue,
+  TypeScriptClassMultiValue,
+  TypeScriptFunctionSingleValue,
+  TypeScriptFunctionMultiValue,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // backgroundColor: "#fff",
+    // alignItems: "center",
+    // justifyContent: "center",
+    flexDirection: 'column',
+    margin: 3,
+    marginTop: 20,
+    padding: 3,
+  },
+});
+
+const EXAMPLE_COMPONENT_ITEMS: Array<ItemType<ExampleComponent>> = [
+  {
+    label: 'JavaScript; class component; single-item',
+    value: ExampleComponent.JavaScriptClassSingleValue,
+  },
+  {
+    label: 'JavaScript; class component; multiple-item',
+    value: ExampleComponent.JavaScriptClassMultiValue,
+  },
+  {
+    label: 'JavaScript; function component; single-item',
+    value: ExampleComponent.JavaScriptFunctionSingleValue,
+  },
+  {
+    label: 'JavaScript; function component; multiple-item',
+    value: ExampleComponent.JavaScriptFunctionMultiValue,
+  },
+  {
+    label: 'TypeScript; class component; single-item',
+    value: ExampleComponent.TypeScriptClassSingleValue,
+  },
+  {
+    label: 'TypeScript; class component; multiple-item',
+    value: ExampleComponent.TypeScriptClassMultiValue,
+  },
+  {
+    label: 'TypeScript; function component; single-item',
+    value: ExampleComponent.TypeScriptFunctionSingleValue,
+  },
+  {
+    label: 'TypeScript; function component; multiple-item',
+    value: ExampleComponent.TypeScriptFunctionMultiValue,
+  },
+];
+
+type Props = Record<string, never>;
+type State = {
+  currentExample: ExampleComponent;
+  examplePickerOpen: boolean;
+  exampleComponents: Array<ItemType<ExampleComponent>>;
+};
+
+export default class App extends React.Component<Props, State> {
+  constructor(props: Readonly<Props>) {
+    super(props);
+    this.state = {
+      currentExample: ExampleComponent.JavaScriptClassSingleValue,
+      exampleComponents: EXAMPLE_COMPONENT_ITEMS,
+      examplePickerOpen: false,
+    };
+
+    this.setOpen = this.setOpen.bind(this);
+    this.setCurrentExample = this.setCurrentExample.bind(this);
+  }
+
+  private static getExample(egComponent: ExampleComponent): JSX.Element {
+    switch (egComponent) {
+      case ExampleComponent.JavaScriptClassSingleValue:
+        return <JavascriptClassExample multiple={false} />;
+      case ExampleComponent.JavaScriptClassMultiValue:
+        return <JavascriptClassExample multiple />;
+      case ExampleComponent.JavaScriptFunctionSingleValue:
+        return <JavascriptFunctionExample multiple={false} />;
+      case ExampleComponent.JavaScriptFunctionMultiValue:
+        return <JavascriptFunctionExample multiple />;
+      case ExampleComponent.TypeScriptClassSingleValue:
+        return <TypescriptClassExample multiple={false} />;
+      case ExampleComponent.TypeScriptClassMultiValue:
+        return <TypescriptClassExample multiple />;
+      case ExampleComponent.TypeScriptFunctionSingleValue:
+        return <TypescriptFunctionExample multiple={false} />;
+      case ExampleComponent.TypeScriptFunctionMultiValue:
+        return <TypescriptFunctionExample multiple />;
+      default:
+        throw new Error(
+          "couldn't match example component in getExample() in App.tsx. egComponent was: ",
+          egComponent,
+        );
+    }
+  }
+
+  setOpen(examplePickerOpen: boolean): void {
+    this.setState({ examplePickerOpen });
+  }
+
+  setCurrentExample(
+    callback: (prevState: ExampleComponent | null) => ExampleComponent | null,
+  ): void {
+    this.setState((state: Readonly<State>) => ({
+      currentExample: callback(state.currentExample),
+    }));
+  }
+
+  // todo: fix picker items being under text
+
+  render(): JSX.Element {
+    const { currentExample, examplePickerOpen, exampleComponents } = this.state;
+
+    return (
+      <View style={styles.container}>
+        <View style={{ flex: 1 }}>
+          <View style={{ flex: 1 }}>
+            <Text>Choose example:</Text>
+          </View>
+
+          <View style={{ flex: 1 }}>
+            <DropDownPicker
+              setValue={this.setCurrentExample}
+              value={currentExample}
+              items={exampleComponents}
+              open={examplePickerOpen}
+              setOpen={this.setOpen}
+            />
+          </View>
+        </View>
+
+        <View style={{ flex: 3 }}>
+          <View style={{ flex: 1 }}>
+            <Text>Example:</Text>
+          </View>
+
+          {App.getExample(currentExample)}
+        </View>
+      </View>
+    );
+  }
+}

rndp-examples/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "rndp-examples",
+    "slug": "rndp-examples",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

rndp-examples/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};