Skip to content

Instantly share code, notes, and snippets.

Avatar
🎧

Danilo Woznica danilowoz

🎧
View GitHub Profile
@danilowoz
danilowoz / react-native-gotchas.md
Last active Feb 23, 2021
React Native gotchas
View react-native-gotchas.md

Android gotchas

This document aims to list some "gotchas" in Android development using React Native, or in other words, common problems that a developer might face during the development of Android views and how to solve it.

Shadows

Following the React Native documentation, to set a shadow in an element it needs the following properties: shadowColor, shadowOffset, shadowOpacity and shadowRadius. However, on Android, it needs to use the elevation view style prop from react-native to add shadows, which will also affects the z-index value.

{
  // iOS
  shadowColor: "#000",
View count-classNames.js
[...new Set(Array.from(document.querySelectorAll("[class]")).flatMap(e => Array.from(e.classList)))]
View 1-query-content.graphql
query blogPosts {
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
edges {
node {
frontmatter {
title
category
date
}
html
View 4.1-blog-post.js
const BlogPost = ({ data, pageContext }) => {
const { markdownRemark } = data
const { prev, next } = pageContext
return (
<>
...
{prev && (
<Link to={prev.node.fields.slug}>
View 4-gatsby-node.js
posts.forEach((post, index, arr) => {
post.node.frontmatter.category.forEach(cat => categories.push(cat))
const prev = arr[index - 1]
const next = arr[index + 1]
createPage({
path: post.node.fields.slug,
component: blogLayout,
context: {
View 3.5-blog-category.js
import React from "react"
import kebabCase from "lodash.kebabcase"
import { graphql, Link } from "gatsby"
const BlogCategory = ({ data, pageContext }) => {
const { allMarkdownRemark } = data
return (
<>
<h1>Categories:</h1>
@danilowoz
danilowoz / 3.4-gatsby-node.js
Created Apr 28, 2019
Getting the categories
View 3.4-gatsby-node.js
const kebabCase = require(`lodash.kebabcase`)
const allCategories = Object.keys(countCategories)
allCategories.forEach((cat, i) => {
const link = `/blog/category/${kebabCase(cat)}`
Array.from({
length: Math.ceil(countCategories[cat] / postsPerPage),
}).forEach((_, i) => {
@danilowoz
danilowoz / 3.3-gatsby-node.js
Created Apr 28, 2019
Getting the categories
View 3.3-gatsby-node.js
const countCategories = categories.reduce((prev, curr) => {
prev[curr] = (prev[curr] || 0) + 1
return prev
}, {})
@danilowoz
danilowoz / 3.2-gatsby-node.js
Created Apr 28, 2019
Getting the categories
View 3.2-gatsby-node.js
const categories = []
posts.forEach((post, index) => {
post.node.frontmatter.category.forEach(cat => categories.push(cat))
createPage({
path: post.node.fields.slug,
component: blogLayout,
context: {
slug: post.node.fields.slug,
@danilowoz
danilowoz / 3.1-gatsby-node.js
Last active Apr 28, 2019
Getting the categories
View 3.1-gatsby-node.js
const blogCategoryLayout = path.resolve(`./src/layouts/blog-category.js`)