fix:新增@uiw/react-native-image-picker

example/base/metro.config.js

@@ -10,6 +10,7 @@ module.exports = {
   resolver: {
     extraNodeModules: {
       '@uiw/react-native': path.resolve(`${__dirname}/lib/`),
+      '@uiw/react-native-image-picker': path.resolve(`${__dirname}/lib2/`),
       // '@uiw/react-native': path.resolve(`${__dirname}/../../packages/core/`),
       // 'react-native-svg': path.resolve(
       //   `${__dirname}/../../node_modules/react-native-svg/`,

example/base/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@uiw/react-native": "3.2.3",
-    "react": "18.0.0",
+    "@uiw/react-native-image-picker": "3.2.3",
+    "react": "18.2.0",
     "react-native": "0.69.7",
     "react-native-svg": "12.1.1"
   },

example/examples/lib2/ImagePicker/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ImagePicker: () => JSX.Element;
+export default ImagePicker;

example/examples/lib2/ImagePicker/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+const ImagePicker = () => {
+  return (
+    <View style={styles.tree}>
+      <Text>ImagePicker</Text>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  tree: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    backgroundColor: '#fff',
+  },
+});
+export default ImagePicker;

example/examples/lib2/index.d.ts

@@ -0,0 +1,2 @@
+export {default as ImagePicker} from './ImagePicker';
+export * from './ImagePicker';

example/examples/lib2/index.js

@@ -0,0 +1,2 @@
+export {default as ImagePicker} from './ImagePicker';
+export * from './ImagePicker';

example/examples/metro.config.js

@@ -10,6 +10,7 @@ module.exports = {
   resolver: {
     extraNodeModules: {
       '@uiw/react-native': path.resolve(`${__dirname}/lib/`),
+      '@uiw/react-native-image-picker': path.resolve(`${__dirname}/lib2/`),
       // '@uiw/react-native': path.resolve(`${__dirname}/../../packages/core/`),
       // 'react-native-svg': path.resolve(
       //   `${__dirname}/../../node_modules/react-native-svg/`,

example/examples/package.json

@@ -14,12 +14,13 @@
     "@react-navigation/native": "~6.0.11",
     "@react-navigation/stack": "~6.2.2",
     "@uiw/react-native": "3.2.3",
-    "react": "18.0.0",
+    "react": "18.2.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-safe-area-context": "~4.3.1",
     "react-native-screens": "~3.15.0",
-    "react-native-svg": "12.1.1"
+    "react-native-svg": "12.1.1",
+    "@uiw/react-native-image-picker": "3.2.3"
   },
   "devDependencies": {
     "@babel/core": "~7.20.7",

example/examples/src/routes/ActionBar/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {ActionBar, Button, Icon} from '@uiw/react-native';
+import {ActionBar} from '@uiw/react-native';
+import {ImagePicker} from '@uiw/react-native-image-picker';
 import {View, Alert} from 'react-native';
 import {ComProps} from '../../routes';
 import Layout from '../../Layout';
@@ -37,6 +38,7 @@ export default class ActionBarDemo extends React.Component<ActionBarProps> {
               },
             ]}
           />
+          <ImagePicker />
         </View>
       </React.Fragment>
     );

package.json

@@ -25,7 +25,15 @@
     "build": "npm run lib:build && npm run lib:build:base && npm run lib:build:examples && npm run lib:build:test && npm run build:doc",
     ">>>>>>>": ">>>>>>>",
     "lib:build": "lerna exec --scope @uiw/react-native -- tsbb build --disable-babel-option --no-esm",
-    "lib:watch": "lerna exec --scope @uiw/react-native -- tsbb watch --disable-babel-option --no-esm",
+    "lib:watch": "lerna exec --scope @uiw/react-native  -- tsbb watch --disable-babel-option --no-esm",
+    "⬇️⬇️⬇️⬇️⬇️ image-picker ⬇️⬇️⬇️⬇️⬇️": "▼▼▼▼▼ example::base ▼▼▼▼▼",
+    "lib:build:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb build",
+    "lib:watch:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb watch",
+    "lib:build:examples:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb build --disable-babel-option --no-esm --cjs ../../example/examples/lib2",
+    "lib:watch:examples:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb watch --disable-babel-option --no-esm --cjs ../../example/examples/lib2",
+    "lib:build:base:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb build --disable-babel-option --no-esm --cjs ../../example/base/lib2",
+    "lib:watch:base:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb watch --disable-babel-option --no-esm --cjs ../../example/base/lib2",
+    "⬆️⬆️⬆️⬆️⬆️ image-picker ⬆️⬆️⬆️⬆️⬆️": "▲▲▲▲▲ example::base ▲▲▲▲▲",
     "start": "lerna exec --scope website -- npm run start",
     "doc": "lerna exec --scope website -- npm run build",
     "<<<<<<<": "<<<<<<<",
@@ -45,7 +53,7 @@
     "babel-preset-react-native": "4.0.1",
     "fs-extra": "~10.1.0",
     "metro-react-native-babel-preset": "0.73.6",
-    "react": "18.0.0",
+    "react": "18.2.0",
     "react-native": "0.69.7"
   },
   "dependencies": {
@@ -56,6 +64,10 @@
     "tsbb": "^3.7.6",
     "typescript": "^4.7.4"
   },
+  "resolutions": {
+    "react":"~18.2.0",
+    "react-dom": "~18.2.0"
+  },
   "workspaces": {
     "packages": [
       "example/*",

packages/core/src/ImageViewer/index.tsx

@@ -106,8 +106,6 @@ function ImageViewer(props: ImageViewerProps) {
     </PinchGestureHandler>
   );
 
-  console.log('src', typeof src);
-
   return (
     <View style={{}}>
       <TransitionImage

packages/core/src/Picker/README.md

@@ -10,14 +10,14 @@ Picker 选择器
 
 ### 基础示例
 
-```jsx mdx:preview&background=#bebebe29
+```jsx
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Picker } from '@uiw/react-native';
 
 function Demo() {
   const [value, setValue] = React.useState(['5'])
-  const arr1 = [
+  const arr = [
     { label: '3', value: '3' },
     { label: '4', value: '4' },
     { label: '5', value: '5' },
@@ -28,7 +28,7 @@ function Demo() {
         cols={1}
         value={value}
         displayType="view"
-        data={arr2}
+        data={arr}
         onChange={val => setValue(val)}
       />
     </SafeAreaView>
@@ -39,7 +39,7 @@ export default Demo
 
 ### modal弹框 & 联动
 
-```jsx mdx:preview&background=#bebebe29
+```jsx
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Picker,Button } from '@uiw/react-native';

packages/core/src/index.tsx

@@ -125,6 +125,7 @@ export { default as ImageViewer } from './ImageViewer';
 export * from './ImageViewer';
 export { default as Form } from './Form';
 export * from './Form';
+
 /**
  * Typography
  */

packages/react-native-image-picker/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-typescript"]
+}

packages/react-native-image-picker/README.md

@@ -0,0 +1,112 @@
+<p align="center">
+  <a href="https://uiwjs.github.io">
+    <img width="150" src="https://raw.githubusercontent.com/uiwjs/uiw/92f189f53312f1177466f48991736f95f86da0a6/src/assets/logo-README.svg?sanitize=true">
+  </a>
+</p>
+<p align="center">
+  <a href="https://github.com/uiwjs/react-native-uiw/issues">
+    <img src="https://img.shields.io/github/issues/uiwjs/react-native-uiw.svg">
+  </a>
+  <a href="https://github.com/uiwjs/react-native-uiw/network">
+    <img src="https://img.shields.io/github/forks/uiwjs/react-native-uiw.svg">
+  </a>
+  <a href="https://github.com/uiwjs/react-native-uiw/stargazers">
+    <img src="https://img.shields.io/github/stars/uiwjs/react-native-uiw.svg">
+  </a>
+  <br>
+  <a href="https://github.com/uiwjs/react-native-uiw/releases">
+    <img src="https://img.shields.io/github/release/uiwjs/react-native-uiw.svg">
+  </a>
+  <a href="https://github.com/uiwjs/react-native-uiw">
+    <img src="https://img.shields.io/dub/l/vibe-d.svg">
+  </a>
+  <a href="https://www.npmjs.com/package/@uiw/react-native">
+    <img src="https://img.shields.io/npm/v/@uiw/react-native.svg">
+  </a>
+</p>
+
+React Native UIW
+---
+
+A UI component library based on React Native (Android & iOS).
+
+[快速上手](https://uimjs.github.io/#/docs/getting-started) | [参与组件开发](https://uimjs.github.io/#/docs/development/components) | [参与文档/网站编辑开发](https://uimjs.github.io/#/docs/development/document) | [组件库](https://uimjs.github.io/#/components/about)
+
+您可以使用我们制定的模版([`@uiw/react-native-template`](https://github.com/uiwjs/react-native-template))创建一个新项目：
+
+<!--rehype:style=background-color: rgb(118 247 149);-->
+```shell
+# 此模板默认集成了一些必用的依赖，如路由，组件库等
+npx react-native init AwesomeProject --template @uiw/react-native-template
+```
+
+## Install
+```bash
+yarn add @uiw/react-native react-native-svg@12.1.1 react-native-root-siblings@4.1.1  react-native-gesture-handler@2.8.0
+```
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { Icon } from '@uiw/react-native'
+
+export default class Demo extends React.Component {
+  render() {
+    return (
+      <View>
+        <Icon name='apple' size={46} color='#50CB42' />
+      </View>
+    )
+  }
+}
+```
+
+## Other
+
+- [@uiw/react-native-alipay](https://github.com/uiwjs/react-native-alipay)
+- [@uiw/react-native-amap-geolocation](https://github.com/uiwjs/react-native-amap-geolocation)
+
+## Development
+
+```bash
+# Install current dependencies, and dependencies in sub-packages
+yarn install
+yarn run build # Compile package
+```
+
+Real-time monitoring of package and document website local preview
+
+```bash
+# Step 1
+yarn run lib:watch      # Compile and output JS file
+# Step 2
+yarn run lib:watch:type # Output type file d.ts
+# Step 3
+yarn run start          # Run the preview document website locally
+```
+
+## 文档本地预览
+
+**第一步安装文档包和预览工具**
+
+```bash
+ npm install @uiw/react-native-doc @kkt/doc -D # yarn add @uiw/react-native-doc @kkt/doc -D
+```
+
+**第二步配置命令**
+
+在`package.json`文件中配置命令
+
+```json
+  // ... 
+  "scripts":{
+    "doc":"kktd @uiw/react-native-doc/doc/build"
+  }
+```
+
+
+### License
+
+Licensed under the MIT License.

packages/react-native-image-picker/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@uiw/react-native-image-picker",
+  "version": "3.2.3",
+  "description": "UIW for React Native",
+  "homepage": "https://uiwjs.github.io/react-native-uiw/",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {},
+  "keywords": [
+    "uiw",
+    "react-native",
+    "ImagePicker"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-native-uiw"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md"
+  ],
+  "dependencies": {
+    "@babel/runtime": "~7.20.7",
+    "@types/lodash": "~4.14.191",
+    "@types/react-native": "0.69.1",
+    "@uiw/icons": "2.5.3",
+    "ahooks": "2.10.14",
+    "lodash": "4.17.21",
+    "prop-types": "15.7.2",
+    "react-native-svg": "12.1.1",
+    "@shopify/restyle":"~2.4.2",
+    "@uiw/react-native":"~3.2.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-native": ">=0.60.0",
+    "react-native-svg": ">=9.9.3"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.20.7",
+    "@babel/preset-typescript": "~7.18.6"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

packages/react-native-image-picker/src/ImagePicker/index.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const ImagePicker = () => {
+  return (
+    <View style={styles.tree}>
+      <Text>ImagePicker</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  tree: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    backgroundColor: '#fff',
+  },
+});
+
+export default ImagePicker;

packages/react-native-image-picker/src/index.ts

@@ -0,0 +1,2 @@
+export { default as ImagePicker } from './ImagePicker';
+export * from './ImagePicker';

packages/react-native-image-picker/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "outDir": "lib",
+    "declaration": true,
+    "jsx": "react-native",
+    "lib": ["es6"],
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": false,
+    "target": "esnext",
+    "module": "esnext",
+    "baseUrl": "."
+  },
+  "exclude": ["node_modules"],
+  "include": ["src"]
+}