Skip to content

Instantly share code, notes, and snippets.

View peterpme's full-sized avatar
🏠
Working from home

Peter Piekarczyk peterpme

🏠
Working from home
View GitHub Profile
@peterpme
peterpme / compose-imports.js
Created April 20, 2018 20:30
compose imports from redux / react-apollo
import { compose } from "redux";
import { compose } from "react-apollo";
// your InfoScreen implementation
// bottom of file:
export default compose(
connect(mapStateToProps, mapActionCreators),
withLoadingScreen
)(InfoScreen)
@peterpme
peterpme / withLoadingScreen-3.js
Created April 19, 2018 22:52
withLoadingScreen HOC with options
import * as React from "react";
import hoistNonReactStatics from 'hoist-non-react-statics';
import { View, ActivityIndicator } from "react-native";
const withLoadingScreen = (size = "small") => WrappedComponent => {
class LoadingScreen extends React.PureComponent {
render() {
if (this.props.loading) return <ActivityIndicator size={size} color="white" />
return <WrappedComponent {...this.props} />;
}
@peterpme
peterpme / withLoadingScreen-2.js
Last active April 19, 2018 22:01
withLoadingScreen with hoist-non
import * as React from "react";
import hoistNonReactStatics from 'hoist-non-react-statics';
import { View, ActivityIndicator } from "react-native";
const withLoadingScreen = WrappedComponent => {
class LoadingScreen extends React.PureComponent {
render() {
if (this.props.loading) return <ActivityIndicator size="small" color="white" />
return <WrappedComponent {...this.props} />;
}
@peterpme
peterpme / withLoadingScreen-1.js
Last active April 27, 2018 13:27
withLoadingScreen First pass
import * as React from "react";
import { View, ActivityIndicator } from "react-native";
const withLoadingScreen = WrappedComponent => {
return class LoadingScreen extends React.PureComponent {
render() {
if (this.props.loading) return <ActivityIndicator size="small" color="white" />
return <WrappedComponent {...this.props} />;
}
};
@peterpme
peterpme / loading.js
Created April 18, 2018 02:23
LOADING
class InfoScreen extends React.PureComponent {
render() {
if (this.props.loading) return <ActivityIndicator />
return (
<View style={styles.container}>
<Text>Hi</Text>
</View>
)
}
}
@peterpme
peterpme / Label.jsx
Last active March 2, 2018 19:10
ReactJS Component Label for Medium
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
const Label = ({ label }) => (
<View style={styles.container}>
<Text style={styles.label}>{label}</Text>
</View>
)
const styles = StyleSheet.create({
@peterpme
peterpme / User.graphql
Last active March 1, 2018 05:47
User Mutation Clarification - imagine User having 20 keys, 5 of which are non-nullable (email_verified: Boolean!)
type User = {
id: ID!
first_name: String
last_name: String
email_verified: Boolean!
}
input UpdateUserInput {
first_name: String
last_name: String
@peterpme
peterpme / Label.re
Last active March 3, 2018 19:01
Reason Label
open BsReactNative;
let component = ReasonReact.statelessComponent("Label");
let styles =
StyleSheet.create(
Style.(
{
"container":
style([
@peterpme
peterpme / bsconfig.json
Created February 27, 2018 18:33
React Native + ReasonML bsconfig.json
{
"name": "altos-react-native",
"reason": {"react-jsx" : 2},
"bsc-flags": ["-bs-super-errors"],
"package-specs": [{
"module": "commonjs",
"in-source": true
}],
"suffix": ".bs.js",
"namespace": true,
@peterpme
peterpme / ScrollView.js
Created February 3, 2018 08:00
React Native ScrollView & flexGrow
const Layout = () => (
<ScrollView
contentContainerStyle={{
flexGrow: 1,
justifyContent: 'space-between'
}}>
<Row />
<Row />
<Row />
<Row />