CSS Modules, Webpack and Testing

The Problem

When getting into some basic React testing with CSS Modules I ran into one issue. How the hell do I test them?

You may see the issue that I faced requiring a .css file, if you don’t let me show you.

import React from "react";
import MyCss from "./somecss.css";
import classnames from "classnames";

const MyComponent = ({disabled}) => <div className={classnames(MyCss.container, {[MyCss.disabled]: disabled})} />

export default MyComponent;

So there isn’t really much to test here, but lets say we wanted to make sure that a div had the disabled class when it was given a disabled prop. We fire up our test, create it, babel compiles, but oh no, MyCss is undefined, or an empty object. Well duh, we’re using Webpack to process our CSS.

For that matter we could use something to mock the import right? Yeah you could but lets introduce something even more awesome so we don’t have to create custom mocks.

Babel Plugin Webpack Loaders Awesomeness

Babel Plugin Webpack Loaders allows us to run our tests and process all requires through our typical webpack loaders.

Read on →
Tagged under babel, css, css-modules,, modules,, react,, testing,, webpack,

React Native FlexboxFroggy

If you are in the React Native world and haven’t heard about Exponent then you’ve been living under a rock. It’s being built by James Ide, Brent Vatne, and Charlie Cheever. All who have contributed significantly to the React Native community and ecosystem.

Brent is holding a contest to win some awesome prizes, including tickets to the sold out ReactJS 2016 Conf. Check out the contest here https://gist.github.com/brentvatne/7d88f846417452355b18.

What does this have to do with flexbox? Well as my entry into the contest I converted http://flexboxfroggy.com/ to React Native.

Even adding animations was a breeze! One line of code LayoutAnimation.spring() easily makes all frogs spring into place!

You can check out the code here https://github.com/browniefed/flexboxfroggy

Or if you have Exponent installed you can run it easily on your phone by just tapping this link http://exp.host/@browniefed/flexboxfroggy

If you don’t have Exponent installed I highly suggest you install it!

That’s all from me for now. Looking forward to getting back to blogging in 2016!

Tagged under exponent, flexbox, flexboxfroggy, react-native

React Native Animated Book

So I wrote a book of sorts on React Native animations. Mostly covering the animated API, and soon much much more. Check it out here http://browniefed.com/react-native-animation-book/.

I cover the API, and walk through basic animation examples, and soon advanced topics. Learn to create a fun dragging, spinning square.

This is just a quick update :)

Tagged under animated, animation, book, react-native

React Native - How to bridge a Swift View

So in my previous article we bridged an Objective-C View component, I learned a lot, and also learned that I did a few unnecessary things. No worry though, we’ll learn from that and make improvements in our Swift bridging.

First off want to give a thanks to Tony Xiao. He’s been a great help in sharing code and giving explanations to a Swift and native development novice like myself. Also Asa Miller for writing some of the original code and always collaborating on whatever we’re both working on.


We’re going to bridge https://github.com/soffes/GradientView. Looks pretty nifty. Now we could also just use ReactART for this but we won’t.

Read on →
Tagged under bridge, gradient, react-native, swift, swift-view-component

React Native - How to Bridge an Objective-C View Component

I am not an Objective-C developer so some of the things I say here may be wrong, so tell me if I’m wrong! React Native is young enough that some cool existing native components need to still be bridged to take advantage of. There is plenty of information out there about bridging modules, and view components.

Here are a fiew

Some of these are more up to date and in depth and others lesser so.


Read on →
Tagged under bridging, objc, objective-c, react-native, view