0

I am trying to use npm oxford-dictionary package in react-native, I installed "npm install oxford-dictioary" and run this file as "node app.js" on a terminal and works fine, However, when I tried to use in react native it doesn't work, can anyone help me what's is the problem. Is it possible to use this api at all with just react-native or I would have to build backend with nodejs ?

app.js

var Dictionary = require("oxford-dictionary");    
var config = {
 app_id : "-------",
 app_key : "--------",
 source_lang : "en"
};
      
var dict = new Dictionary(config);

var props = {
 word: "stupendous",
};


var oxfordApi = {
getRovers(){
 var lookup = dict.synonyms(props);
 return fetch(lookup).then((res) => res.json());
  }
  }





      import React from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      //import oxfordApi from './oxfordApi';
      import globals from 'node-libs-react-native/globals';
           var Dictionary = require("oxford-dictionary");  
           var config = {
           app_id : "-------",
           app_key : "--------------------------",
        source_lang : "en"
      };
      
       export default class App extends React.Component {


     constructor(props) {
      super(props);
       this.state = {
         rovers: []
          }
        }

     componentWillMount() {
     var dict = new Dictionary(config);
      var lookup = dict.find("awesome");

       lookup.then((res) => {
         this.setState({
           rovers: res.rovers
           })
          });
          }

        render() {
        console.log("Rovers: ", this.state.rovers);
         return (
           <View style={styles.container}>
          <Text>Hello wordl</Text>
          </View>
           );
         }
             }

       const styles = StyleSheet.create({
      container: {
       flex: 1,
           backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
            },
            });

The result When I run "run npm ios"

The package at "node_modules/oxford-dictionary/index.js" attempted to import the Node standard library module "https". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo

Bayram
  • 181
  • 2
  • 11
  • Possible duplicate of [Can we use nodejs code inside react native application?](https://stackoverflow.com/questions/40629856/can-we-use-nodejs-code-inside-react-native-application) – Njuguna Mureithi Jan 02 '19 at 15:12
  • I re-wrote the package, methods and published it to the npm. [react-native-oxford-dictionary](https://www.npmjs.com/package/react-native-oxford-dictionary) – Bayram Nov 08 '21 at 18:03

2 Answers2

1

Unfortunately as you have quite rightly identified you cannot use that npm package with react-native as it does not have the https module.

However, looking at the package oxford-dictionary it is a single file that provides a few helper methods to construct specific network requests to the Oxford Dictionary api.

It wouldn't be too difficult to re-write these in terms of fetch and make your own helper file. You could even create your own react-native package for the Oxford Dictionary api and publish it to npm.

With regard to accessing the Oxford Dictionary's api, there shouldn't be an issue doing it as it is just network requests. fetch should be able to cope with it. You just won't be able to use the oxford-dictionary npm package to make the requests.

Andrew
  • 26,706
  • 9
  • 85
  • 101
  • Thank you, that's very good news, would mind elaborating a little bit? I very new to advanced JavaScript and react native, Where specifically in the package do I need use fetch? I think its where htpps request being handled? – Bayram Jan 05 '19 at 04:59
  • You need to use `fetch` everywhere you are using `https`. It may also require you to update the the helper functions as they are designed for use with `https`. To be honest I would use that package as a guide and just write the functions that I required in terms of `fetch`. Start simply by writing a single function that makes one type of request then you can abstract your code for reuse for different requests. – Andrew Jan 05 '19 at 09:27
0

I re-wrote the package, methods and published it to the npm. react-native-oxford-dictionary

Bayram
  • 181
  • 2
  • 11