Skip to content

Instantly share code, notes, and snippets.

Avatar
👊
Always Exploring

Zain Sajjad zsajjad

👊
Always Exploring
View GitHub Profile
@zsajjad
zsajjad / lefthook.yml
Last active Aug 25, 2021
Lefthook for React/ReactNative apps
View lefthook.yml
// cSpell:word commitlint typecheck
pre-commit:
parallel: true
commands:
type-check:
glob: '*.{ts,tsx}'
run: yarn typecheck
lint:
glob: '*.{js,ts,jsx,tsx}'
@zsajjad
zsajjad / interactions.js
Created Jan 19, 2020
React 360 Step 3: Interactions
View interactions.js
export default class soccerVR extends React.Component {
render() {
return (
<View style={styles.panel}>
<View style={styles.logosContainer}>
{/* Iterating over CLUBS and rendering content */}
{CLUBS.map(club => (
<VrButton
key={club.id}
onClick={() => console.log("Click")}
@zsajjad
zsajjad / content.js
Created Jan 18, 2020
React 360 Step 2: Images & Text
View content.js
const CLUBS = [
{
id: "manutd",
name: "Manchester United",
logoUrl: "https://i.ibb.co/mBnCHjY/manUtd.png"
},
{
id: "barcelona",
name: "Barcelona",
@zsajjad
zsajjad / layout.js
Created Jan 18, 2020
React 360 Step 1: Layout
View layout.js
export default class soccerVR extends React.Component {
render() {
return (
<View style={styles.panel}>
{/* This container will align all logos in center as row */}
<View style={styles.logosContainer}>
{/* Each view will have logo and name of club */}
<View style={styles.logoHolder} />
<View style={styles.logoHolder} />
@zsajjad
zsajjad / HookContainer.js
Created Jul 1, 2019
Hook based Container with children props
View HookContainer.js
/*
*
* HackerNews
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import { createStructuredSelector } from 'reselect';
@zsajjad
zsajjad / ClassContainer.js
Created Jul 1, 2019
Class based Container with children props
View ClassContainer.js
/*
*
* HackerNews
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
View fritzStyleModel-Usage.js
poppyField.style({
imagePath: 'https://farm9.staticflickr.com/8295/8007075227_dc958c1fe6_z_d.jpg',
}).then((resp) => {
this.setState((state) => ({
styledImagePath: state.styledImagePath.concat([resp.imagePath]),
}));
}).catch((err) => {
console.log(err);
});
View fritz.js
import RNFritz from 'react-native-fritz';
RNFritz.configure();
@zsajjad
zsajjad / frtizStyleModel.js
Last active Mar 19, 2019
Method to create & use JS instance of fritz builtin styling model
View frtizStyleModel.js
import { RNFritzVisionImageStyling } from 'react-native-fritz';
const poppyField = await RNFritzVisionImageStyling({
name: 'poppyField',
customModel: false,
});
@zsajjad
zsajjad / frtizStyleModel.js
Last active Mar 16, 2019
Method to create JS instance of fritz styling model
View frtizStyleModel.js
import { RNFritzVisionImageStyling } from 'react-native-fritz';
const darkKnights = await RNFritzVisionImageStyling({
name: 'darkKnights',
modelIdentifier: '55cdc02f89174e1c8458690d5b8621ae', // Your model identifier here
customModel: true,
modelVersion: 1,
});