React Native - Maintain Touchable Items with a Parent PanResponder

What Are We Building

Intro

One of the issues I’ve noticed with PanResponder is that people assume it is an all or nothing. By that I mean adding a PanResponder in a parent view means it will steal all of your touches and Touchable items won’t be touchable any longer.

You may be running into this because you copy and pasted it from here the documentation here https://facebook.github.io/react-native/docs/panresponder.html and it includes a capture phase returning true. (I copy and paste this all the time). We’ll talk about the capture phase next.

Read on →
Tagged under Native, PanResponder, React, Touchable

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.

1
2
3
4
5
6
7
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:[email protected]/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.

What

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