Dalci de Jesus Bagolin dalcib

Running Node Modules in React Native

How to use packages that depend on Node.js core modules in React Native.

See the [node-libs-react-native][node-libs-react-native] library as a convenience for implementing this method.

Take components from react-native-material-design and react-native-material-kit and create a new library to replace both.

Deciding how to handle ripples will be very important as both do it differently.

rnmd does it using a Ripple polyfill:

	import React from 'react'
	import { render } from 'react-dom'
	import { Router, browserHistory, match } from 'react-router'
	import createStore from '../shared/lib/create-store.js'
	import ContextProvider from '../shared/lib/context-provider.js'
	import { fetchDataOnLocationMatch } from '../shared/lib/fetch-data.js'
	import Root from './Root.jsx'
	import routes from '../shared/routes.jsx'
	import { AppContainer } from 'react-hot-loader'
	import { observable, computed, autorun } from 'mobx'

	import React, { Component } from 'react'
	import {
	StyleSheet,
	Image,
	StatusBar,
	ListView,
	RefreshControl,
	Text,
	View
	} from 'react-native'

	import React from 'react'
	import {observer} from 'mobx-react'
	import {observable} from 'mobx'

	const state = observable({
	value: 0
	})

	const Comp = (props) => {
	return <div onClick={() => state.value++}>click to increase counter value: {state.value}</div>

	// @flow

	// partial dirty implementation of react-native Picker
	// should match http://facebook.github.io/react-native/docs/picker.html

	// https://github.com/necolas/react-native-web/issues/184
	import createDOMElement from "react-native-web/dist/modules/createDOMElement"

	import PickerItem from "./item.web.js"

	/**
	* PROBLEM:
	* In next.js, each route points to a distinct top-level component.
	* Since there is no higher-level components in next.js, how to have
	* a store that persists between route changes is not immediately
	* obvious. One solution is this: a higher-order component that you
	* wrap each of your top-level route components with.
	*
	* This is borrowed from next.js' Redux example from here:
	* https://github.com/zeit/next.js/wiki/Redux-example

	export const bindField = (form, field, {error = 'error', value = 'value', floatLabel = false, onChangeFn, onChange = 'onChange', placeholder = 'placeholder'}={}) => ({
	name: form.$(field).name,
	[value]: form.$(field).value,
	[placeholder]: form.$(field).label,
	...floatLabel === true && {floatingLabelText: form.$(field).label},
	[onChange]: onChangeFn \|\| form.$(field).sync,
	[error]: form.$(field).error
	});