search

microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.4k stars 1.14k forks source link

Found a Windows solution for react-native-document-picker but no React Native for Windows native module projects. (It happens to any npm package) #9962

Closed Invius closed 2 years ago

Invius commented 2 years ago

Problem Description

After installing npm package, auto link does not work sending bak this message: "Found a Windows solution for react-native-document-picker but no React Native for Windows native module projects." When running: npx react-native autolink-windows --check --sln "windows\lenastoregep2.sln" --proj "windows\lenastoregep2\lenastoregep2.vcxproj"

or

npx react-native run-windows --sln .\windows\lenastoregep2.sln --proj .\windows\lenastoregep2\lenastoregep2.vcxproj

This happens to every package that I try to install. I tried with: "react-native-fs" "react-native-document-picker" and "react-native-windows-uwp-camera"

Steps To Reproduce

  1. npm install --save react-native-document-picker
  2. npx react-native autolink-windows --check --sln "windows\lenastoregep2.sln" --proj "windows\lenastoregep2\lenastoregep2.vcxproj"

Expected Results

Autolink to work and let the project compile.

CLI version

7.0.3

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 22.87 GB / 31.95 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 29, 30, 31, 32
      Build Tools: 28.0.3, 32.0.0, 32.1.0
      System Images: android-29 | Android TV Intel x86 Atom, android-29 | ARM 64 v8a, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64, android-30 | Android TV Intel x86 Atom, android-30 | China version of Wear OS 3 - Preview Intel x86 Atom, android-30 | Wear OS 3 - Preview ARM 64 v8a, android-30 | Wear OS 3 - Preview Intel x86 Atom, android-30 | ARM 64 v8a, android-30 | Intel x86 Atom_64, android-30 | Google TV Intel x86 Atom, android-30 | Google APIs ARM 64 v8a, android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64, android-31 | Android TV Intel x86 Atom, android-31 | ARM 64 v8a, android-31 | Intel x86 Atom_64, android-31 | Google TV Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.10240.0, 10.0.10586.0, 10.0.14393.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Version     2021.1.0.0 AI-211.7628.21.2111.8193401
    Visual Studio: 16.11.32428.217 (Visual Studio Community 2019), 15.9.28307.1093 (Visual Studio Community 2017)
  Languages:
    Java: 1.8.0_312 - C:\Program Files\OpenJDK\openjdk-8u312-b07\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.68.0 => 0.68.0
    react-native-windows: 0.68.3 => 0.68.3
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

No response

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2019

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

Restoring NuGet packages

chrisglein commented 2 years ago

Those modules may not support your version of react native for Windows.

Some of these have in-progress PRs you can look at, others you'll have to look for alternative modules (or fill in support on your own).

frontenddev344 commented 4 months ago

can u plaese fix it

import React, { useState } from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView } from 'react-native'; //import * as DocumentPicker from 'expo-document-picker';

const CustomPopup = ({ visible, onClose, onSubmit }) => { const [formData, setFormData] = useState({ vendorCode: '', contactNumber: '', email: '', ordersPerDay: '', alreadyTieUp: '', gst: '', packingCharges: '', menuFile: null, queryCallback: false, });

const handleInputChange = (field, value) => {
    setFormData({ ...formData, [field]: value });
};

const handleFilePick = async () => {
    let result = await DocumentPicker.getDocumentAsync({});
    if (result.type === 'success') {
        setFormData({ ...formData, menuFile: result });
    }
};

if (!visible) {
    return null;
}

return (
    <View style={styles.overlay}>
        <View style={styles.popup}>
            <ScrollView contentContainerStyle={styles.scrollViewContent}>
                <Text style={styles.popupTitle}>Are you sure you want to activate Zomato?</Text>

                <Text>Already tie up with Zomato?</Text>
                <View style={styles.radioContainer}>
                    <View style={[styles.radioOptionContainer , styles.radiofirst]}>
                        <TouchableOpacity
                            style={[styles.radioOption, formData.alreadyTieUp === 'Yes' && styles.radioOptionSelected]}
                            onPress={() => handleInputChange('alreadyTieUp', 'Yes')}>
                            {formData.alreadyTieUp === 'Yes' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>Yes</Text>
                    </View>
                    <View style={styles.radioOptionContainer}>
                        <TouchableOpacity
                            style={[styles.radioOption, formData.alreadyTieUp === 'No' && styles.radioOptionSelected]}
                            onPress={() => handleInputChange('alreadyTieUp', 'No')}>
                            {formData.alreadyTieUp === 'No' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>No</Text>
                    </View>
                </View>

                <Text>Vendor Code <Text style={styles.required}>*</Text></Text>
                <TextInput
                    placeholder="Vendor Code"
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('vendorCode', value)}
                    value={formData.vendorCode}
                />

                <Text>Reachable Contact No. <Text style={styles.required}>*</Text></Text>
                <TextInput
                    placeholder="Reachable Contact No."
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('contactNumber', value)}
                    value={formData.contactNumber}
                />

                <Text>Reachable Email ID <Text style={styles.required}>*</Text></Text>
                <TextInput
                    placeholder="Reachable Email ID"
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('email', value)}
                    value={formData.email}
                />

                <Text>Number of Orders Per Day (Approx.)</Text>
                <TextInput
                    placeholder="Number of Orders Per Day (Approx.)"
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('ordersPerDay', value)}
                    value={formData.ordersPerDay}
                />

                <Text>Number of Orders Restaurant Receiving from Zomato</Text>
                <TextInput
                    placeholder="100"
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('ordersFromZomato', value)}
                    value={formData.ordersFromZomato}
                />

                <Text>Do you charge GST on your Zomato menu?</Text>
                <View style={styles.radioContainer}>
                    <View style={[styles.radioOptionContainer , styles.radiofirst]}>
                        <TouchableOpacity
                            style={[styles.radioOption, formData.gst === 'Yes' && styles.radioOptionSelected]}
                            onPress={() => handleInputChange('gst', 'Yes')}>
                            {formData.gst === 'Yes' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>Yes</Text>
                    </View>
                    <View style={styles.radioOptionContainer}>
                        <TouchableOpacity
                            style={[styles.radioOption, formData.gst === 'No' && styles.radioOptionSelected]}
                            onPress={() => handleInputChange('gst', 'No')}>
                            {formData.gst === 'No' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>No</Text>
                    </View>
                </View>

                <Text>Do you have packing charges applied on your Zomato menu?</Text>
                <View style={styles.radioContainer}>
                    <View style={[styles.radioOptionContainer , styles.radiofirst]}>
                        <TouchableOpacity
                            style={[
                                styles.radioOption,
                                formData.packingCharges === 'Yes' && styles.radioOptionSelected,
                            ]}
                            onPress={() => handleInputChange('packingCharges', 'Yes')}>
                            {formData.packingCharges === 'Yes' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>Yes</Text>
                    </View>
                    <View style={styles.radioOptionContainer}>
                        <TouchableOpacity
                            style={[
                                styles.radioOption,
                                formData.packingCharges === 'No' && styles.radioOptionSelected,
                            ]}
                            onPress={() => handleInputChange('packingCharges', 'No')}>
                            {formData.packingCharges === 'No' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>No</Text>
                    </View>
                </View>

                <Text>Upload the menu to be used for Zomato integration.</Text>
                <TouchableOpacity style={styles.fileUploadButton} onPress={handleFilePick}>
                    <Text style={styles.fileUploadButtonText}>
                        {formData.menuFile ? formData.menuFile.name : 'Choose File'}
                    </Text>
                </TouchableOpacity>

                <Text>Have queries? Request for a call back.</Text>
                <View style={styles.checkboxContainer}>
                    <TouchableOpacity
                        style={[
                            styles.checkbox,
                            formData.queryCallback && styles.checkboxSelected,
                        ]}
                        onPress={() => handleInputChange('queryCallback', !formData.queryCallback)}>
                        {formData.queryCallback && <View style={styles.checkboxInnerSquare} />}
                    </TouchableOpacity>
                    <Text style={styles.checkboxText}>Request for a call back</Text>
                </View>

            </ScrollView>
            <View style={styles.buttonContainer}>
                <TouchableOpacity style={[styles.button, styles.buttoncanel]} onPress={onClose}>
                    <Text style={styles.buttonText}>Cancel</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => onSubmit(formData)}>
                    <Text style={styles.buttonText}>Submit</Text>
                </TouchableOpacity>
            </View>
        </View>
    </View>
);

};

const styles = StyleSheet.create({ overlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)', }, popup: { width: '80%', maxHeight: '80%', backgroundColor: '#fff', borderRadius: 10, }, scrollViewContent: { flexGrow: 1, padding: 30, }, popupTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 15, }, input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, padding: 10, marginTop: 10, marginBottom:15 }, required: { color: 'red', }, radioContainer: { flexDirection: 'row', marginTop:10, marginBottom:15

},
radiofirst:{
    marginRight:20
},
radioOptionContainer: {
    flexDirection: 'row',
    alignItems: 'center',
},
radioOption: {
    width: 24,
    height: 24,
    borderWidth: 2,
    borderColor: '#ccc',
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
},
radioOptionSelected: {
    borderColor: '#00c0ff',
},
radioInnerCircle: {
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: '#00c0ff',
},
radioText: {
    fontSize: 16,
},
fileUploadButton: {
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    alignItems: 'center',
    marginBottom: 15,
    marginTop:10
},
fileUploadButtonText: {
    color: '#000',
},
checkboxContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
    marginTop:10
},
checkbox: {
    width: 24,
    height: 24,
    borderWidth: 2,
    borderColor: '#ccc',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
},
checkboxSelected: {
    borderColor: '#00c0ff',
},
checkboxInnerSquare: {
    width: 12,
    height: 12,
    backgroundColor: '#00c0ff',
},
checkboxText: {
    fontSize: 16,
},
buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    backgroundColor:'#fff',
    padding:20,

    borderTopWidth: 1,
    borderTopColor: '#ccc',
},
button: {

    paddingVertical: 10,
    paddingHorizontal:30,
    borderRadius: 5,
    backgroundColor: '#00c0ff',
    alignItems: 'center',
    marginHorizontal: 5,
},
buttoncanel:{
    backgroundColor:'red'
},
buttonText: {
    color: '#fff',
    fontWeight: 'bold',
},
footer: {
    marginTop: 20,
    alignItems: 'center',
},
footerText: {
    fontSize: 16,
    color: '#000',
},

});

export default CustomPopup;