CODEWITHSUNDEEP
reactjsreact-native
Sagar Chavan
Sagar Chavan

Reputation: 259

unable to render HTML inside react native

I want to run this component inside react native

<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />

currently, I am using react-native-render-html package

and doing likewise

import React from "react";
import { View, Text } from "react-native";
import HTML from "react-native-render-html";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";

const PhoneAuth = () => {
    const uiConfig = {
        signInFlow: "popup",
        signInOptions: [
            {
                provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
                recaptchaParameters: {
                    type: "image",
                    size: "invisible",
                    badge: "bottomleft",
                },

                defaultCountry: "+91",
                whitelistedCountries: ["IN", "+91"],
            },
        ],
        // callbacks: {
        //  signInSuccessWithAuthResult: function (authResult) {
        //      var user = authResult.user;
        //      const data = { phone: user.phoneNumber };
        //      props.setPhoneNumber(data);
        //  },
        // },
    };

    const htmlContent =  
        `<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />`
    
    return (
        <View>
            <HTML  html={htmlContent} />
        </View>
    );
};
export default PhoneAuth;

but as HTML content is a string it's not picking the variables and I get a blank screen.

Upvotes: 0

Views: 6015

Answers (3)

Falyoun
Falyoun

Reputation: 3966

If you're creating a custom HTML tag or element you have to tell the renderers to do so, i.e.:

const content = `<bluecircle></bluecircle>`;
...
 
renderers: {
    bluecircle: () => <View style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: 'blue' }} />
}

You might try the following

import HTML from 'react-native-render-html'

...

render() {
    // The html you want to render
    const html = `
        <div>
        </div>
    `

    const styles = {}

    const renderers = {
        StyledFirebaseAuth: (htmlAttribs, children, passProps) => {
            return (
        <StyledFirebaseAuth
          {...passProps} />)
        }
    }

    return (
        <HTML
            // Required. The html snippet you want to render as a string
            html={html}

            // The styles to supply for each html tag. Default styles
            // are already pre-provided in HTMLStyles.js. The additional
            // styles that you provide will be merged over these, so if
            // you need some funky red background on your h1, just set
            // the background
            htmlStyles={styles}

            // Renderers to use for rendering specific HTML elements.
            // Default renderers are pre-provided in HTMLRenderers.js.
            renderers={renderers}
    )
}

See docs

Upvotes: 2

atitpatel
atitpatel

Reputation: 3184

You can use WebView for this purpose. No need to use any other library.

<WebView
    originWhitelist={['*']}
    source={{ html: htmlContent }}   
/>

See API reference for more details.

Upvotes: 0

Lilian Tonofa
Lilian Tonofa

Reputation: 311

set style to view flex: 1 as showed in example

<ScrollView style={{ flex: 1 }}>
   <HTML
     html={htmlContent}
     imagesMaxWidth={Dimensions.get("window").width}
    />
</ScrollView>

Upvotes: 0

Related Questions