Is it possible to use
tag in React Native tag?

Question

Now I am using firebase JS SDK to use phone authentication. I followed the web method.

Here is my code:

  handleClick = () => {
    this.state.verify_otp = "flex";
    this.state.register = "none";
    this.recaptcha = new firebase.auth.RecaptchaVerifier("recaptcha1");
    this.number = this.state.phone;
  };

.

<View
    style={{
        alignItems: "center",
        justifyContent: "center",
        flex: 1,
        display: this.state.captcha,
    }}
>
    <div>
        <div id="recaptcha1"></div>
    </div>
</View>

Is it possible to use a tag in react-native code?

score 3 · Answer 1 · answered Jul 11 '20 at 19:02

3

No, not natively. React Native doesn't support direct HTML, as it is not a web framework.

For rendering HTML in React Native, see Render HTML in React Native

answered Jul 11 '20 at 19:02

ΔO 'delta zero'

3,506
1
19
31

score 1 · Answer 2 · answered Jul 11 '20 at 19:02

1

No, it's not possible to use html tags in react-native

edit: list of basic RN components https://reactnative.dev/docs/components-and-apis#basic-components

answered Jul 11 '20 at 19:02

Hyetigran

1,150
3
11
29

score 1 · Answer 3 · answered Jul 11 '20 at 19:03

1

No, you cannot use the <div> element inside a react native component because React Native does not have a DOM.

answered Jul 11 '20 at 19:03

Octamassss

11
1

score 1 · Answer 4 · answered Jul 11 '20 at 19:08

Unfortunately its not possible. Div is an HTML element which can be read by Browser. For mobile app, Its View

However you can build your own div

class Div extends Component {  //or Class Span extends Component

  static propTypes = {
      style : PropTypes.obj
      onClick : PropTypes.func   // ...
  }

  render (){
        return (
        <View>
        
    /* whatever is needed to pass everything through  ... */
  
       </View>
 )    }

}

score 1 · Answer 5 · answered Jul 13 '20 at 03:14

You could use react-native-render-html to achieve like follow. (if couldn't work have to install react-native-webview)

import * as React from 'react';
import { Text, View, StyleSheet,ScrollView, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import HTML from 'react-native-render-html';


const htmlContent = `
    <h1>This HTML snippet is Using react-native-render-html !</h1>
    <h2>Trying many tag to render html</h2>
    <img src="https://i.imgur.com/fJ71V9b.jpg" />
    <div>Here is what you want to add!!!!!<div>`
    ;
export default function App() {
  return (
    <View style={styles.container}>
     <ScrollView style={{ flex: 1 }}>
            <HTML html={htmlContent} imagesMaxWidth={Dimensions.get('window').width} />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  } 
});

Code example on snack

Is it possible to use tag in React Native tag?

5 Answers5

Is it possible to use
tag in React Native tag?