New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-native-for-web

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-for-web

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

  • 0.1.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
16
increased by1500%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-for-web

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: The main UIExplorer app has been changed since the official UIExplorer app includes native binary components and non supported components at the moment.

How can i install this?

  • Move into your react-native project folder and install react-native-for-web
npm install react-native-for-web
  • Setup a webpack.config.js file for your project
  • Inside your webpack configuration, alias the react-native package to the react-native-for-web package, and setup the external for the image loader.
{
  // other webpack config
  resolve: {
    alias: {
      "react-native": "react-native-for-web"
    }
  }
  // setup the macro to resolve require("image!...")
  externals: [
    require("react-native-for-web/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-for-web/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 not planned to support
    • accessibilityLabel not planned to support
    • accessibilityComponentType not planned to support
    • accessibilityLiveRegion not planned to support
    • accessibilityTraits not planned to support
    • onAcccessibilityTap not planned to support
    • onMagicTap not planned to support
    • testID not planned to support
    • onMoveShouldSetResponder
    • onResponderGrant
    • onResponderMove
    • onResponderReject
    • onResponderRelease
    • onResponderTerminate
    • onResponderTerminationRequest
    • onStartShouldSetResponder
    • onStartShouldSetResponderCapture
    • onLayout
    • pointerEvents
    • style
    • removeClippedSubviews not planned to support
    • renderToHardwareTextureAndroid not planned to support
    • shouldRasterizeIOS not planned to support
    • collapsable
  • Text

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

    • onLayout
    • resizeMode
    • source
    • style
    • testID
    • accessibilityLabel not planned to support
    • accessible not planned to support
    • 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 06 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