How to make this piece of code work with React Native?

Question

I began to learn React Native recently, I hope someone will help me.

I've tried for hours to make the following code work with React Native: ResultList.js from simple-dictionary. The problem is the plain HTML here:

  return (
    <div className="bg-gray-700">
      <div className="container mx-auto py-8">
        <h1 className="text-3xl font-bold text-center text-white">Simple Dictionary</h1>
        <p className="text-center mt-1 mb-10 text-slate-300 text-lg">Find definisions for word</p>
      
        <div className="flex items-center justify-center mt-5">
          <div className="flex border-2 border-gray-200 rounded">
            <input className="px-4 py-2 md:w-80" type="text" placeholder="Search..." onChange={handleInputChange} value={value} onKeyDown={handleInputKeyDown} />
            <button className="bg-blue-400 border-l px-4 py-2 text-white" onClick={handleSubmit}>Search</button>
          </div>
        </div>

        { inputValue && (
          <h3 className="text-gray-50 text-center mt-4">Result for: <span className="text-white font-bold">{inputValue}</span></h3>
        ) }
      </div>
    </div>

The error is

ERROR  Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in h1 (created by SearchHeader)
    in div (created by SearchHeader)
    in div (created by SearchHeader)
    in SearchHeader (created by App)
    in div (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in AwesomeProject(RootComponent), js engine: hermes

I tried "WebView" ... no success ... what should I do?

Kind regards, Frank

Edit: I oversaw the tailwind initialization ... I proceeded the way described in the documentation, the build process was started by

npx react-native run-android

but the same error ... I don't what I'm doing wrong.

In your case, it's not just html but css as well (or whatever the framework it uses for the classnames. If it's only the piece of code you are showing that you want to use, I would re-type it in the React-Native way. — JSharles, Oct 10 '22 at 18:16
Thank you ... the classnames are from tailwind, https://tailwindcss.com/docs/guides/create-react-app I tried npm install -D -force tailwindcss postcss autoprefixer npx tailwindcss init -p as described, without success ... maybe retyping is a little bit too much for me at the moment ... any other ideas? — Metamorphosis, Oct 10 '22 at 18:25

score 1 · Answer 1 · answered Oct 11 '22 at 08:07

1

try below code using webview:

import React from 'react';
import { View, StyleSheet  } from 'react-native';

import { WebView } from 'react-native-webview';

const HTML = `
<div className="bg-gray-700">
      <div className="container mx-auto py-8">
        <h1 className="text-3xl font-bold text-center text-white">Simple Dictionary</h1>
        <p className="text-center mt-1 mb-10 text-slate-300 text-lg">Find definisions for word</p>
      
        <div className="flex items-center justify-center mt-5">
          <div className="flex border-2 border-gray-200 rounded">
            <input className="px-4 py-2 md:w-80" type="text" placeholder="Search..." onChange={handleInputChange} value={value} onKeyDown={handleInputKeyDown} />
            <button className="bg-blue-400 border-l px-4 py-2 text-white" onClick={handleSubmit}>Search</button>
          </div>
        </div>
      </div>
    </div>
`;

export default function App() {
  return (
    <View style={styles.container}>
      <WebView
        originWhitelist={['*']}
        source={{ html: HTML }}
        style={styles.webview}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 100,
  },
});

answered Oct 11 '22 at 08:07

Virendrasinh R

89
5

Dear Virendrashin thanks a lot for your efforts!!!! It looks amazing ... In the meantime, another problem appeared ... I don't know how this can be submitted to another component ... I'm going to create another post. Again: Thank you very much!!! – Metamorphosis Oct 11 '22 at 12:47
can you vote my Ans if you get solution. – Virendrasinh R Oct 11 '22 at 13:20
Of course ... but what do you mean by "vote" ... do you mean "quote"? Surely, I'd like to appreciate your efforts, but what do you mean by "vote"? Sorry for my "naivity", but I'm relatively new to Stackoverflow ... – Metamorphosis Oct 11 '22 at 13:35
I hope it's ok if I contact you a second time ... I noticed on my tablet that the input field cannot be activated, this means I'm not able to input text there ... would you be so kind and give me a hint if you know a solution? – Metamorphosis Oct 11 '22 at 14:26
Found a solution here, I just have to add android:windowSoftInputMode="adjustResize" to android:windowSoftInputMode="stateAlwaysHidden|adjustPan" in android/app/src/main/AndroidManifest.xml (found here: https://stackoverflow.com/questions/62706889/react-native-android-textinput-fail-to-show-keyboard) – Metamorphosis Oct 11 '22 at 15:08
... and now I've found out what was meant by "vote my Ans" ... vote your Ans this minute :) – Metamorphosis Oct 11 '22 at 15:55
where are you from? – Virendrasinh R Oct 17 '22 at 04:27
I'm from Stuttgart in Germany ... my best wishes to you in India! Your advice with the HTML above was very useful for me ... I'm developing my own dictionary app at the moment. It's nice to see how people help each other on the world! – Metamorphosis Oct 18 '22 at 18:43

How to make this piece of code work with React Native?

1 Answers1