chourobin

Bridging Native & React for iOS & Android

js -> native

• Simple Example
• Callbacks
• Promises
• Properties

native -> js

nandorojo

I started using React Native in September 2018. I always forget some things when I build new apps, so I'll keep track of the gotchas on this post.

Some topics, such as navigation, will be fundamental to how I think about apps. Others, will be one-line helpers that make apps work more smoothly.

It's gotten to the point where I find my own answers from 6 months before on certain Github issues.

I'll keep adding over time as I think of more. If anyone thinks these topics would be useful, let me know and I'll elaborate.

I have made libraries to address a number of the topics here, from navigation to design.

kelset

4 years as a React Native OSS maintainer: a retrospective

Why writing this, and why now? In January 2018 I started my journey as a maintainer of the React Native (RN) open source repo — it is the longest role I’ve ever kept going in my professional career, in a way — and I think now, at the 4 years mark, it is a very good time for me to pause, and force myself to think about how things have changed since then.

How did I become a maintainer? After a big burnout with react-navigation that led me to learn how to correctly interact with Open Source Software (OSS), I was starting to interact with OSS again by being a good citizen in the RN repository. Seeing me constantly in the issue section, trying to help out, led some Facebook (FB) engineers to decide to ask me to join the OSS repo with write access, so that I could be more proactive in helping its maintenance… and here we are.

Even so, I was never an em

EvanBacon

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.js": "${capture}.js.map, ${capture}.d.ts, ${capture}.d.ts.map",
    "*.ts": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(capture).test.web.ts, $(capture).test.web.tsx, $(capture).test.android.ts, $(capture).test.android.tsx, ${capture}.native.tsx, ${capture}.ios.tsx, ${capture}.android.tsx, ${capture}.web.tsx, ${capture}.native.ts, ${capture}.ios.ts, ${capture}.android.ts, ${capture}.web.ts, ${capture}.native.js, ${capture}.ios.js, ${capture}.android.js, ${capture}.web.js, ${capture}.native.jsx, ${capture}.ios.jsx, ${capture}.android.jsx, ${capture}.web.jsx",
    "*.tsx": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(captur

hirbod

import React, { useState, useEffect, useCallback } from "react";
import { Platform } from "react-native";

import * as VideoThumbnails from "expo-video-thumbnails";

import { Image } from "@showtime-xyz/universal.image";
import Spinner from "@showtime-xyz/universal.spinner";
import { View } from "@showtime-xyz/universal.view";

interface VideoThumbnailProps {

peterpme

const path = require("path");
const fs = require("fs");

module.exports = {
  meta: {
    type: "problem",
    docs: {
      description: "Enforce shared types for multi-platform components",
      category: "Possible Errors",
      recommended: true,

hirbod

import { type ComponentType, createElement, forwardRef } from 'react'
import type { TextProps } from 'react-native'

// uncomment for NativeWind support
//import { cssInterop } from 'nativewind'


const LeanText = forwardRef((props, ref) => {
  return createElement('RCTText', { ...props, ref })
}) as ComponentType<TextProps>

hirbod

import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useCallback, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react'
import { ActivityIndicator, Keyboard, Platform, Text, View, TextInput, useWindowDimensions } from 'react-native'
import Animated from 'react-native-reanimated'

const SearchBar = () => {
  const inset = useSafeAreaInsets()
  const [isFocused, toggle] = useReducer((s) => !s, false)
  const ref = useRef<View>(null)
  const rect = useRef({ width: 0, height: 0, x: 0, y: 0 })