Skip to content

Instantly share code, notes, and snippets.

Avatar

Dmitriy Bryokhin asgvard

View GitHub Profile
@asgvard
asgvard / ReactNativeComponentBoilerplate.js
Last active Sep 7, 2017
React Native Component Boilerplate
View ReactNativeComponentBoilerplate.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
View,
StyleSheet
} from 'react-native';
const styles = StyleSheet.create({
});
View spatial-nav-focus-map.js
const HomeScreen extends PureComponent {
constructor(props) {
this.state = {
focusedKey: null
};
this.onSetFocus = this.onSetFocus.bind(this);
}
componentDidUpdate(oldProps) {
@asgvard
asgvard / spatial-nav-distributed-logic.js
Last active Apr 13, 2019
Spatial Navigation article. Distributed logic example
View spatial-nav-distributed-logic.js
const HomeScreen extends PureComponent {
constructor(props) {
this.state = {
focusedIndex: 0
};
this.onKeyPress = this.onKeyPress.bind(this);
}
componentDidMount() {
View focusable-wrapper-example.js
<Focusable>
<Component />
</Focusable>
View focusable-hoc-example.js
const FocusableComponent = withFocusable()(Component);
@asgvard
asgvard / spatial-nav-context-example.js
Created Apr 13, 2019
spatial-nav-context-example
View spatial-nav-context-example.js
const SpatialNavigableApp = withSpatialNavigation()(App);
@asgvard
asgvard / spatial-nav-full-example.js
Last active May 10, 2019
spatial-nav-full-example
View spatial-nav-full-example.js
// this example uses react-native-web syntax
import React, {PureComponent} from 'react';
import {View, ScrollView} from 'react-native';
import {initNavigation, withFocusable} from '@noriginmedia/react-spatial-navigation';
initNavigation();
const menuItems = [1, 2, 3, 4, 5];
const rowItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@asgvard
asgvard / FlatSwiper.js
Created Nov 10, 2017
Horizontal Paging Swiper based on FlatList
View FlatSwiper.js
/**
* TODO Finish this for optimized Android swiping
* Inspired by react-native-swiper but based on cross-platform and optimized FlatList
*/
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
FlatList,
@asgvard
asgvard / RootResponder.js
Created Mar 2, 2018
Root responder for global interception of touch events in RN
View RootResponder.js
/**
* Wrapper for creating Global (RootContainer) PanResponder
* Responder events are bubbled up by the View hierarchy, but sometimes it's needed to "move"
* touch handling to a sibling component. Instead we're creating Root Responder to capture the touch and
* delegate the callbacks to any component that wants to listen to it.
*
* Any component in the App can hook into the Root Responder lifecycle callbacks
* For capturing of the Root Responder the *Capture callbacks should return true
*
* Only one component at a time can be attached to Root Responder
View spatial-nav-hooks-distributed-logic.jsx
function GalleryRow({items, focused}) {
const [focusedItemIndex, setFocusedItemIndex] = useState(0);
const onKeyPress = useCallback(({keyCode}) => {
if (!focused) {
return;
}
let newIndex;