Combining React and React-Native

I have a question regarding combining elements of React in React-native app. Could something like this be possible?

import React, { Component } from 'react';
import {
  AppRegistry,
    StyleSheet,
    Text, 
    View,
    Image,
    ListView,
    Switch,
    TextInput,
    AsyncStorage,
    BackAndroid,
    Navigator, 
    TouchableOpacity, } from 'react-native';  

var ReactDOM = require('react-dom');
var Barcode = require('react-barcode');


class Third extends React.Component { 
    ReactDOM.render(
        <Barcode value="http://github.com/kciter" />,
        mountNode 
    );
};

I am asking this because i have trouble finding barcode generator module for react-native. Any suggestions?

Thank you for all the replies,
Domen

Not possible. React Native environment uses native components under the hood, not the actual DOM, so you can't simply use React components in this environment and call it a day.

Your best shot is to look for native alternatives.

---

You could theoretically create a native component, which will create a web view, and render its children in that view. You will need to use the private ReactMultiChild API — in fact, this is what React components use to allow rendering on things other than DOM, like canvas.

For example, react-canvas does it, I also did it myself on my side project, also with canvas. It looks like this:

<Canvas>
  <CanvasRect frame={[10, 10, 20, 20]} color="black" />
</Canvas>

In this example, CanvasRect is going to be rendered by Canvas onto a canvas element, not the actual DOM.

So it is by all means possible to bridge several renderers together. For your use case, going ground-up and creating a bridge like that for web components in React Native might be an overkill though.

(Edit: I've wrote a post on custom React renderers. While it does not touch React Native, the approach is quite general.)

What you need essentially is a mapping from the react-native components to react components (actual DOM Object). React-Native-Web does just that. You can nest the components of the React and React-Native.

e.g.

<ScrollView>
 <div>Hello World</div>
</ScrollView>

This code will transform and will create actual DOM (not the prettiest one but does the job). Currently, it does not support mapping for all the components but supports most of them.

React-Native-Web heavily depends on the webpack. So make sure you have a good understanding of webpack before you get into it.