Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-web-polyfill

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-web-polyfill

A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)

  • 0.0.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4
decreased by-60%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-web-polyfill

A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)

  • Slack channel on reactiflux!

WARNING!

This package is in pre-pre-pre-pre-pre-pre-pre-pre-pre-beta version! API will not change (as we are emulating the react-native ones ahah) but lots of components or properties could be missing. We encourage you to help us by reporting those or PR implementation of them! :D

What limitations?

Since it is all plain javascript, any native binary module won't be supported. By the way we are planning to provide an extra folder that will contains polyfills and workaround for the exposed api of some of these modules.

Check out the examples!

NOTE: Since the original UIExplorer contains a lot of examples that also uses native modules, we have copied only the components already ported, but the may miss support for some props.

How can i install this?

  • Move into your react-native project folder and install react-native-web-polyfill
npm install react-native-web-polyfill
  • Setup a webpack.config.js file for your project
  • Inside your webpack configuration, alias the react-native package to the react-native-web-polyfill package, and setup the external for the image loader.
{
  // other webpack config
  resolve: {
    alias: {
      "react-native": "react-native-web-polyfill"
    }
  }
  // setup the macro to resolve require("image!...")
  externals: [
    require("react-native-web-polyfill/src/macro/image")
  ],
}
  • Run webpack
  • Create an HTML document, with a div with an id="app" including the bundled webpack script and linking the css stylesheet node_modules/react-native-web-polyfill/style.css
  • Report any error to let us improve and help you! :D

Building the library

Move into the package folder and run in your terminal:

npm run build

Supported Classes & Components

  • StyleSheet

    • create
  • AppRegistry

    • getAppKeys
    • registerComponent
    • registerConfig
    • registerRunnable
    • runApplication
  • View

    • accessible
    • accessibilityLabel
    • accessibilityComponentType
    • accessibilityLiveRegion
    • accessibilityTraits
    • onAcccessibilityTap
    • onMagicTap
    • testID
    • onMoveShouldSetResponder
    • onResponderGrant
    • onResponderMove
    • onResponderReject
    • onResponderRelease
    • onResponderTerminate
    • onResponderTerminationRequest
    • onStartShouldSetResponder
    • onStartShouldSetResponderCapture
    • onLayout
    • pointerEvents
    • style
    • removeClippedSubviews useless
    • renderToHardwareTextureAndroid useless
    • shouldRasterizeIOS useless
    • collapsable
  • Text

    • numberOfLines
    • onLayout
    • onPress
    • suppressHighlighting
    • style
    • testID
    • allowFontScaling
  • Image

    • onLayout
    • resizeMode
    • source
    • style
    • testID
    • accessibilityLabel
    • accessible
    • capInsets
    • defaultSource
    • onError
    • onLoad
    • onLoadEnd
    • onLoadStart
    • onProgress
  • ScrollView

    • alwaysBounceHorizontal
    • alwaysBounceVertical
    • automaticallyAdjustContentInsets
    • bounces
    • bouncesZoom
    • canCancelContentTouches
    • centerContent
    • contentContainerStyle
    • contentInset
    • contentOffset
    • decelerationRate
    • directionalLockEnabled
    • horizontal
    • keyboardDismissMode
    • keyboardShouldPersistTaps
    • maximumZoomScale
    • minimumZoomScale
    • onScroll
    • onScrollAnimationEnd
    • pagingEnabled
    • removeClippedSubviews
    • scrollEnabled
    • scrollEventThrottle
    • scrollIndicatorInsets
    • scrollsToTop
    • showsHorizontalScrollIndicator
    • showsVerticalScrollIndicator
    • stickyHeaderIndices
    • style
    • zoomScale
  • TextInput

    • autoCapitalize
    • autoCorrect
    • autoFocus
    • clearButtonMode
    • clearTextOnFocus
    • defaultValue
    • editable
    • enablesReturnKeyAutomatically
    • keyboardType
    • maxLength
    • multiline
    • onBlur
    • onChange
    • onChangeText
    • onEndEditing
    • onFocus
    • onLayout
    • onSubmitEditing
    • placeholder
    • placeholderTextColor
    • returnKeyType
    • secureTextEntry
    • selectTextOnFocus
    • selectionState
    • style
    • testID
    • textAlign
    • textAlignVertical
    • underlineColorAndroid
    • value
  • TouchableHighlight

    • activeOpacity
    • onHideUnderlay
    • onShowUnderlay
    • style
    • underlayColor
  • TouchableOpacity

    • ...TouchableWithoutFeedback properties
    • activeOpacity
  • TouchableWithoutFeedback

    • accessible
    • delayLongPress
    • delayPressIn
    • delayPressOut
    • onLongPress
    • onPress
    • onPressIn
    • onPressOut

Keywords

FAQs

Package last updated on 01 Sep 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc