Skip to content

Commit 142fdea

Browse files
taeh98taeh98
authored
chore: added runnable examples subdir and updated README accordingly (#706)
1 parent e3f4d09 commit 142fdea

20 files changed

+14666
-288
lines changed

‎.npmignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.github/
22
node_modules/
3-
3+
examples
44
package-lock.json

‎README.md

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
# React Native Dropdown Picker
22

3-
<p align="left">
4-
<a href="https://github.com/hossein-zare/react-native-dropdown-picker/blob/dev-5.x/LICENSE">
5-
<img src="https://img.shields.io/badge/license-MIT-blue.svg"
6-
alt="react-native-dropdown-picker is released under the MIT license." />
7-
</a>
8-
<a href="https://www.npmjs.org/package/react-native-dropdown-picker">
9-
<img src="https://img.shields.io/npm/v/react-native-dropdown-picker?color=brightgreen&label=npm%20package"
10-
alt="Current npm package version." />
11-
</a>
12-
</p>
3+
[![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)
4+
[![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)
5+
6+
[//]: # (TODO: add badge linking to GitHub repo)
7+
8+
---
139

1410
## Screenshots
1511

@@ -22,17 +18,24 @@
2218
width="270" alt="Screenshot showing dark theme and parent items" />
2319
</p>
2420

25-
The above screenshots are taken from the following
26-
example: [https://snack.expo.dev/8mHmLfcZf](https://snack.expo.dev/8mHmLfcZf)
21+
The above screenshots were taken
22+
from [this example](https://snack.expo.dev/8mHmLfcZf).
2723

2824
## Usage
2925

30-
See [the relevant documentation](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage).
26+
You can find runnable examples in the `examples` subdirectory, which is a
27+
working [Expo](https://github.com/expo/expo) project demonstrating this library.
28+
Navigate into the `examples` subdirectory, run `npm install`, and then run
29+
`npx expo start` to see the examples working.
30+
31+
For further information on how to use this library,
32+
read [the relevant documentation](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage).
3133

3234
## Further documentation
3335

3436
The docs can be read
35-
at: [https://hossein-zare.github.io/react-native-dropdown-picker-website](https://hossein-zare.github.io/react-native-dropdown-picker-website).
37+
at: [https://hossein-zare.github.io/react-native-dropdown-picker-website](https://hossein-zare.github.io/react-native-dropdown-picker-website)
38+
3639
The docs can be edited
3740
at: [https://github.com/hossein-zare/react-native-dropdown-picker-website](https://github.com/hossein-zare/react-native-dropdown-picker-website)
3841

@@ -60,9 +63,8 @@ To make a new release, follow these steps:
6063
works well
6164
* You can test changes to the library and experiment easily
6265
with [patch-package](https://www.npmjs.com/package/patch-package)
63-
* Use `npm pack` to test the new version of the library locally and check it
64-
works correctly;
65-
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)
66+
* Once you have made changes, and after finalizing them, use `npm pack`
67+
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)
6668
* Make and merge a final PR into the development branch that increments the
6769
version number in `package.json`
6870
* Make and merge a PR from the development branch to the release branch

‎examples/.gitignore

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
11+
# Native
12+
*.orig.*
13+
*.jks
14+
*.p8
15+
*.p12
16+
*.key
17+
*.mobileprovision
18+
19+
# Metro
20+
.metro-health-check*
21+
22+
# debug
23+
npm-debug.*
24+
yarn-debug.*
25+
yarn-error.*
26+
27+
# macOS
28+
.DS_Store
29+
*.pem
30+
31+
# local env files
32+
.env*.local
33+
34+
# typescript
35+
*.tsbuildinfo

‎examples/App.tsx

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import React, { JSX } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
import DropDownPicker, { ItemType } from 'react-native-dropdown-picker';
4+
import JavascriptClassExample from './example-src-files/javascript-class-example';
5+
import JavascriptFunctionExample from './example-src-files/javascript-function-example';
6+
import TypescriptClassExample from './example-src-files/typescript-class-example';
7+
import TypescriptFunctionExample from './example-src-files/typescript-function-example';
8+
9+
enum ExampleComponent {
10+
JavaScriptClassSingleValue,
11+
JavaScriptClassMultiValue,
12+
JavaScriptFunctionSingleValue,
13+
JavaScriptFunctionMultiValue,
14+
TypeScriptClassSingleValue,
15+
TypeScriptClassMultiValue,
16+
TypeScriptFunctionSingleValue,
17+
TypeScriptFunctionMultiValue,
18+
}
19+
20+
const styles = StyleSheet.create({
21+
container: {
22+
flex: 1,
23+
// backgroundColor: "#fff",
24+
// alignItems: "center",
25+
// justifyContent: "center",
26+
flexDirection: 'column',
27+
margin: 3,
28+
marginTop: 20,
29+
padding: 3,
30+
},
31+
});
32+
33+
const EXAMPLE_COMPONENT_ITEMS: Array<ItemType<ExampleComponent>> = [
34+
{
35+
label: 'JavaScript; class component; single-item',
36+
value: ExampleComponent.JavaScriptClassSingleValue,
37+
},
38+
{
39+
label: 'JavaScript; class component; multiple-item',
40+
value: ExampleComponent.JavaScriptClassMultiValue,
41+
},
42+
{
43+
label: 'JavaScript; function component; single-item',
44+
value: ExampleComponent.JavaScriptFunctionSingleValue,
45+
},
46+
{
47+
label: 'JavaScript; function component; multiple-item',
48+
value: ExampleComponent.JavaScriptFunctionMultiValue,
49+
},
50+
{
51+
label: 'TypeScript; class component; single-item',
52+
value: ExampleComponent.TypeScriptClassSingleValue,
53+
},
54+
{
55+
label: 'TypeScript; class component; multiple-item',
56+
value: ExampleComponent.TypeScriptClassMultiValue,
57+
},
58+
{
59+
label: 'TypeScript; function component; single-item',
60+
value: ExampleComponent.TypeScriptFunctionSingleValue,
61+
},
62+
{
63+
label: 'TypeScript; function component; multiple-item',
64+
value: ExampleComponent.TypeScriptFunctionMultiValue,
65+
},
66+
];
67+
68+
type Props = Record<string, never>;
69+
type State = {
70+
currentExample: ExampleComponent;
71+
examplePickerOpen: boolean;
72+
exampleComponents: Array<ItemType<ExampleComponent>>;
73+
};
74+
75+
export default class App extends React.Component<Props, State> {
76+
constructor(props: Readonly<Props>) {
77+
super(props);
78+
this.state = {
79+
currentExample: ExampleComponent.JavaScriptClassSingleValue,
80+
exampleComponents: EXAMPLE_COMPONENT_ITEMS,
81+
examplePickerOpen: false,
82+
};
83+
84+
this.setOpen = this.setOpen.bind(this);
85+
this.setCurrentExample = this.setCurrentExample.bind(this);
86+
}
87+
88+
private static getExample(egComponent: ExampleComponent): JSX.Element {
89+
switch (egComponent) {
90+
case ExampleComponent.JavaScriptClassSingleValue:
91+
return <JavascriptClassExample multiple={false} />;
92+
case ExampleComponent.JavaScriptClassMultiValue:
93+
return <JavascriptClassExample multiple />;
94+
case ExampleComponent.JavaScriptFunctionSingleValue:
95+
return <JavascriptFunctionExample multiple={false} />;
96+
case ExampleComponent.JavaScriptFunctionMultiValue:
97+
return <JavascriptFunctionExample multiple />;
98+
case ExampleComponent.TypeScriptClassSingleValue:
99+
return <TypescriptClassExample multiple={false} />;
100+
case ExampleComponent.TypeScriptClassMultiValue:
101+
return <TypescriptClassExample multiple />;
102+
case ExampleComponent.TypeScriptFunctionSingleValue:
103+
return <TypescriptFunctionExample multiple={false} />;
104+
case ExampleComponent.TypeScriptFunctionMultiValue:
105+
return <TypescriptFunctionExample multiple />;
106+
default:
107+
throw new Error(
108+
"couldn't match example component in getExample() in App.tsx. egComponent was: ",
109+
egComponent,
110+
);
111+
}
112+
}
113+
114+
setOpen(examplePickerOpen: boolean): void {
115+
this.setState({ examplePickerOpen });
116+
}
117+
118+
setCurrentExample(
119+
callback: (prevState: ExampleComponent | null) => ExampleComponent | null,
120+
): void {
121+
this.setState((state: Readonly<State>) => ({
122+
currentExample: callback(state.currentExample),
123+
}));
124+
}
125+
126+
// todo: fix picker items being under text
127+
128+
render(): JSX.Element {
129+
const { currentExample, examplePickerOpen, exampleComponents } = this.state;
130+
131+
return (
132+
<View style={styles.container}>
133+
<View style={{ flex: 1 }}>
134+
<View style={{ flex: 1 }}>
135+
<Text>Choose example:</Text>
136+
</View>
137+
138+
<View style={{ flex: 1 }}>
139+
<DropDownPicker
140+
setValue={this.setCurrentExample}
141+
value={currentExample}
142+
items={exampleComponents}
143+
open={examplePickerOpen}
144+
setOpen={this.setOpen}
145+
/>
146+
</View>
147+
</View>
148+
149+
<View style={{ flex: 3 }}>
150+
<View style={{ flex: 1 }}>
151+
<Text>Example:</Text>
152+
</View>
153+
154+
{App.getExample(currentExample)}
155+
</View>
156+
</View>
157+
);
158+
}
159+
}

‎examples/app.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"expo": {
3+
"name": "examples",
4+
"slug": "examples",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/icon.png",
8+
"userInterfaceStyle": "light",
9+
"splash": {
10+
"image": "./assets/splash.png",
11+
"resizeMode": "contain",
12+
"backgroundColor": "#ffffff"
13+
},
14+
"assetBundlePatterns": ["**/*"],
15+
"ios": {
16+
"supportsTablet": true
17+
},
18+
"android": {
19+
"adaptiveIcon": {
20+
"foregroundImage": "./assets/adaptive-icon.png",
21+
"backgroundColor": "#ffffff"
22+
}
23+
},
24+
"web": {
25+
"favicon": "./assets/favicon.png"
26+
}
27+
}
28+
}

‎examples/assets/adaptive-icon.png

17.1 KB
Loading

‎examples/assets/favicon.png

1.43 KB
Loading

‎examples/assets/icon.png

21.9 KB
Loading

‎examples/assets/splash.png

46.2 KB
Loading

‎examples/babel.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = function (api) {
2+
api.cache(true);
3+
return {
4+
presets: ['babel-preset-expo'],
5+
};
6+
};

0 commit comments

Comments
 (0)