npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

babel-plugin-styled-components-react-native-web

v0.2.2

Published

babel plugin for styled-components/native with react-native-web

Downloads

1,106

Readme

Features

This plugin was created because by default, styled-components/native imports all react-native-web without any possibilities for tree-shaking. For example, if you use only View in your project, you will still have animations and virtualized lists in the final bundle. That takes a huge space ! Plus, in my testing, react-native-web was included twice because of the two ways it was imported (by the app with import and by styled-components/native with require maybe).

This plugin transforms styled.View into styled(View) and adds the import if necessary.

Note that it works if you use this plugin with react-native and metro, but it might not have the same impact.

Install

npm install --save-dev --save-exact babel-plugin-styled-components-react-native-web

Then, patch styled-components/native

With patch-package

Install the lib:

npm install --save-dev --save-exact patch-package

Add in package.json

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

Edit node_modules/styled-components/native/dist/styled-components.native.esm.js to change these lines at the end of the file:

import { StyleSheet as ReactNativeStyleSheet } from 'react-native';
// var reactNative = require('react-native');

var InlineStyle = _InlineStyle(ReactNativeStyleSheet);

var StyledNativeComponent$1 = _StyledNativeComponent(InlineStyle);

var styled = function styled(tag) {
  return constructWithOptions(StyledNativeComponent$1, tag);
};

/* React native lazy-requires each of these modules for some reason, so let's
 *  assume it's for a good reason and not eagerly load them all */


// var aliases = "ActivityIndicator ActivityIndicatorIOS ART Button DatePickerIOS DrawerLayoutAndroid\n Image ImageBackground ImageEditor ImageStore KeyboardAvoidingView ListView MapView Modal NavigatorIOS\n Picker PickerIOS ProgressBarAndroid ProgressViewIOS ScrollView SegmentedControlIOS Slider\n SliderIOS SnapshotViewIOS Switch RecyclerViewBackedScrollView RefreshControl SafeAreaView StatusBar\n SwipeableListView SwitchAndroid SwitchIOS TabBarIOS Text TextInput ToastAndroid ToolbarAndroid\n Touchable TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback\n View ViewPagerAndroid WebView FlatList SectionList VirtualizedList Pressable";
// /* Define a getter for each alias which simply gets the reactNative component
//  * and passes it to styled */

// aliases.split(/\s+/m).forEach(function (alias) {
//   return Object.defineProperty(styled, alias, {
//     enumerable: true,
//     configurable: false,
//     get: function get() {
//       return styled(reactNative[alias]);
//     }
//   });
// });

Usage

Via babel.config.json

{
  "plugins": ["babel-plugin-styled-components-react-native-web"]
}