Travis Nuttall Traviskn

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.

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.

	import React from 'react';
	import { View } from 'react-native';
	import Animated, { css } from 'react-native-reanimated';

	export default function Ball() {

	return (
	<View style={styles.container}>
	<Animated.View style={styles.blob} />
	<Animated.View style={styles.shadow} />

	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

	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]}>

	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%': {

	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

	#!/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.

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

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

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