mlouro

'use strict';
var gulp = require('gulp');
var gutil = require('gulp-util');
var del = require('del');
var uglify = require('gulp-uglify');
var gulpif = require('gulp-if');
var exec = require('child_process').exec;


var notify = require('gulp-notify');

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

aksonov

What is RNRF (react-native-router-flux)?

React Native is great product but lacks for stable, intuitive and easy navigation API during many years. Every year we see new, better API: Native Navigator, ex-Navigator, NavigationExperimental, ex-Navigation, wix native navigation, airbnb native navigation, ReactNavigation...

Once I've started React Native development, in 2015, I created RNRF - simple API for easy navigation. It was clear that better navigation instruments will come later but I didn't want to change my code again and again to switch for better API. Every new major version of RNRF is based on different navigation framework and mostly preserves own API.

Another goal was to represent all navigation flow within one place in clear, human-readable way - similar to iOS Storyboards concept. This way other engineers could understand your app flow faster.

ryanflorence

/* eslint no-undef: 0*/
/* eslint react/jsx-no-undef: 0*/
import React from "react"

const chart = {
  id: "purchase",
  initial: "fetchingWorkshopData",
  states: {
    fetchingWorkshopData: {
      on: {

browniefed

import { StyleSheet, View, Text, ActivityIndicator } from "react-native";
import Sizer from "react-native-size";
import {
  VictoryChart,
  VictoryLine,
  VictoryTheme,
  VictoryAxis,
  VictoryContainer,
  VictoryCursorContainer,
  Line,

jordwalke

#!/bin/bash

# Invoke like this:
# ./watch.sh my command here
# And it will run 'my command here' once, and then when it detects changes.

# TODO: Don't just search in the last second. Search for updates since the last
# completed build. Otherwise for big directories, midway through your search
# you've already taken 1s and you will miss updates.

piaskowyk

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function ParticleButton() {
  const [pressed, setPressed] = useState(false);
  const [showParticles, setShowParticles] = useState(false);

  return (
    <Pressable 

piaskowyk

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function OutlineButton() {
  const [pressed, setPressed] = useState(false);

  const animation1 = {
    animationName: css.keyframes({
      '0%': {

piaskowyk

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function PhysicalButton() {
  const [pressed, setPressed] = useState(false);

  return (
    <Pressable onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)}>
      <Animated.View style={[styles.button, pressed ? styles.animationDown : styles.animationUp]}>

piaskowyk

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function GlowButton() {
  const [pressed, setPressed] = useState(false);

  return (
    <Pressable onPress={() => setPressed(!pressed)}>
      <Animated.View