danilowoz

mport { Sandpack } from "@codesandbox/sandpack-react";

const App = () => {
  const files = {}
  
  return (
    <SandpackProvider
      files={files} 
      theme="light" 
      template="static"

danilowoz

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",

danilowoz

[...new Set(Array.from(document.querySelectorAll("[class]")).flatMap(e => Array.from(e.classList)))]

danilowoz

query blogPosts {
  allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
    edges {
      node {
        frontmatter {
          title
          category
          date
        }
        html

danilowoz

const BlogPost = ({ data, pageContext }) => {
  const { markdownRemark } = data
  const { prev, next } = pageContext

  return (
    <>
      ...

      {prev && (
        <Link to={prev.node.fields.slug}>

danilowoz

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: {

danilowoz

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

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

const countCategories = categories.reduce((prev, curr) => {
  prev[curr] = (prev[curr] || 0) + 1
  return prev
}, {})

danilowoz

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,