Skip to content

Instantly share code, notes, and snippets.

View rajivnarayana's full-sized avatar

Rajiv Narayana Singaseni rajivnarayana

13 followers · 0 following
View GitHub Profile
@rajivnarayana
rajivnarayana / permutations.js
Created January 23, 2020 16:35
A routine to print all arrangements of the given numbers in an array avoiding duplicates.
const arr = [1,2,3,2];
const swap = (i, j) => {
const temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
const print = () => {
console.log(arr);
@rajivnarayana
rajivnarayana / CurveMotionTabs.jsx
Created March 14, 2019 09:41
A React Native example to show swipeable views along a curve.
import React, { Component } from "react";
import { Dimensions, View, Easing, StyleSheet, Animated, ART, PanResponder } from "react-native";
const { Path, Surface, Shape } = ART;
const { width : WIDTH } = Dimensions.get("window");
const RADIUS = 10;
const HEIGHT_OF_TABBAR = 64;
const arc = height => {
const w = WIDTH - 2 * RADIUS;
const h = height - 2 * RADIUS;
const r = (w ** 2 + 4 * h ** 2) / (8 * h);
@rajivnarayana
rajivnarayana / SmoothCurve.jsx
Created March 6, 2019 11:26
A React Native ART example to draw Smooth curve passing through a given set of points.
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { ART } from "react-native";
const { Surface, Shape, Path } = ART;
const POINTS_SPACING = 40;
const path = (values, height) => {
const d = new Path();
for (var i = 0; i < values.length; i++) {
@rajivnarayana
rajivnarayana / TrackingComponent.jsx
Created January 20, 2019 12:00
A ReactNative sample UI for tracking component.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{height:100}}/>
<View style={styles.trackingContainer}>
<TrackingItem stageName="Payment" left={false}/>
@rajivnarayana
rajivnarayana / Checkbox.js
Created November 27, 2018 16:37
A Checkbox control for ReactNative using ART
import React from 'react';
import { ART, TouchableOpacity, Text } from 'react-native';
/**
*
* Example usage below
*
export default class CheckboxDemo extends React.Component {
state = {
checked : true
@rajivnarayana
rajivnarayana / parallax.html
Created November 25, 2018 20:57
A container that expands only one of its children like the Rowdy App Home page.
<style>
#container {
height: 500px;
}
#container div:nth-child(1) {
background-color: red;
}
#container div:nth-child(2) {
background-color: blue;
}
@rajivnarayana
rajivnarayana / index.js
Last active November 18, 2018 18:10
Scroll Snapping with Javascript.
const goLeft = function(containerId) {
const container = document.getElementById(containerId);
const scrollLeft = container.scrollLeft;
const containerWidth = container.getBoundingClientRect().width
const childWidths = Array.prototype.map.call(container.children, (child => child.getBoundingClientRect().width))
const accumulatedWidths = childWidths.map((width, index, arr) => arr.slice(0, index + 1).reduce((x, y) => x+y, 0));
const childrenPastLeftEdge = accumulatedWidths.filter(width => width >= scrollLeft);
const newScrollLeft = Math.max(0, childrenPastLeftEdge.shift() - containerWidth);
scrollHorizontallyBy(container, newScrollLeft - container.scrollLeft, 300);
@rajivnarayana
rajivnarayana / traverseAndMerge.js
Created November 14, 2018 20:04
A function that traverses a single array (row) of elements moving and matching merges to the beginning of array like the game 2048.
const tests = [
[[4, 4, 2, 4],[8, 2, 4, 0]],
[[4, 0, 0, 4],[8, 0, 0, 0]],
[[2, 4, 4, 0],[2, 8, 0, 0]],
[[4, 4, 4, 4],[8, 8, 0, 0]],
[[4, 4, 4, 0],[8, 4, 0, 0]],
[[4, 4, 0, 4],[8, 4, 0, 0]],
[[2, 4, 0, 4],[2, 8, 0, 0]],
[[2, 4, 8, 4],[2, 4, 8, 4]],
[[2, 4, 8, 16],[2, 4, 8, 16]],
@rajivnarayana
rajivnarayana / react-counter.html
Last active November 13, 2018 13:46
Inline React component that shows animated counter updates using React Hooks.
<head>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js" crossorigin></script>
<style>
span.gone {
color : transparent;
transition: color 0.3s;
-webkit-transition: color 0.3s;
}
@rajivnarayana
rajivnarayana / FlexLayout.js
Created December 14, 2017 05:27
A React native component to horizontally layout flexbox elements.
import React, { Component } from "react";
import { Text, View } from "react-native";
class HelloWorldComponent extends Component {
render() {
return <View style={{
flexDirection:"row",
backgroundColor : 'green',
justifyContent: 'space-around'
}}>