grapp-dev / stacks Goto Github PK

View Code? Open in Web Editor NEW

958.0 15.0 23.0 42.41 MB

A set of components for building layouts in React Native. Powered by React Native Unistyles.

Home Page: https://stacks.grapp.dev

License: MIT License

JavaScript 5.11% TypeScript 82.32% Ruby 3.64% Objective-C 0.37% Kotlin 5.25% Objective-C++ 3.07% Swift 0.13% C 0.12%

react-native react typescript stacks layout view ui user-interface react-native-web

stacks's People

Contributors

Stargazers

Watchers

stacks's Issues

Link to expo or snack for demos?

Cannot run latest version in expo web

👋 I have an issue with the latest expo for web, I get
Can't import the named export 'Children' from non EcmaScript module (only default export is available)

I added the plugins: [["react-native-web" /* { commonjs: true } */]] (with or without commonjs) but for some reason it doesn't seem to work.

Steps:

upgrade to last expo cli (6.0.6)
run expo init ( I chose the tabs template)
add babel plugin for expo as per docs
try to import Box in any file

Any ideas ? 🙏

horizontal padding/margin seems to be ignored in react-native-web

I tried to create a react-native-web setup to build a storybook for react-native components that use stacks for layouting.
First and foremost: This library solves layouting screens very very well and avoids a ton of headache (and code), so thank you for this 🙏

Now the problem I am facing surfaces when rendering a component that uses padding/margin from a styled (as in styled-components) stacks component (Box) in my case.

This is the component in question

import styled from "styled-components/native";
import { Box } from "@mobily/stacks";

const BaseComponent = styled(Box)({
  backgroundColor: "red",
  margin: 12,
  padding: 12,
});

which renders with a clean react-native-web app (no storybook included yet) as

Note that there IS vertical padding and margin but no horizontal (explicitly defining `marginTop/Bottom/Left/Right did yield the same result).

Inspecting the rendered html reveals that indeed only vertical values are applied:

Here's my webpack config (built after https://mobily.github.io/stacks/docs/react-native-web#webpack)

// ...
rules: [{
  test: /\.m?[t|j]sx?$/,
  exclude: {
    and: [
      /node_modules/,
      {
        not: [/@mobily\/stacks/],
      },
    ],
  },
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env", "@babel/preset-react"],
        plugins: [
          ["react-native-web"],
          require.resolve("../node_modules/@mobily/stacks/babel"),
        ],
      },
   },
},
// ...

I am using [email protected].

Edit: I tried to put together a code sandbox illustrating the problem https://codesandbox.io/s/react-native-web-stacks-reproducer-dth8h

Thanks in advance 🙏

What about "stretch"?

First of all: nice work, I'm considering using Stacks, I'm still a bit concerned with cloning every child all the time though.

Any particular reason why you don't support the stretch alignment?

I mean, it's the default alignment in ReactNative and you don't even have it as an option.

Inline and Stack + horizontal won't let their children grow

Description

Children of Stack (+ horizontal prop) and Inline components with a flexGrow: 1 style won't grow horizontally.

Minimal, Reproducible Example

import * as React from 'react';
import {Text, View} from 'react-native';
import {Stack, Inline, StacksProvider} from '@mobily/stacks';

function HorizontalStackSample() {
  return (
    <Stack space={0} horizontal style={{flexGrow: 0, backgroundColor: 'gray'}}>
      <View style={{width: 40, height: 100, backgroundColor: 'red'}} />
      <View style={{flexGrow: 1, height: 100, backgroundColor: 'purple'}} />
    </Stack>
  );
}

function InlineSample() {
  return (
    <Inline space={0} style={{flexGrow: 0, backgroundColor: 'gray'}}>
      <View style={{width: 40, height: 100, backgroundColor: 'red'}} />
      <View style={{flexGrow: 1, height: 100, backgroundColor: 'purple'}} />
    </Inline>
  );
}

function HorizontalViewSample() {
  return (
    <View style={{flexGrow: 0, backgroundColor: 'black', flexDirection: 'row'}}>
      <View style={{width: 40, height: 100, backgroundColor: 'red'}} />
      <View style={{flexGrow: 1, height: 100, backgroundColor: 'purple'}} />
    </View>
  );
}

export default function App() {
  return (
    <StacksProvider spacing={5}>
      <Text>
        Horizontal Stack, expected to display a red box of width 40, and a
        purple box spanning the remaining horizontal space.
      </Text>
      <HorizontalStackSample />
      <Text>
        Inline, expected to display a red box of width 40, and a purple box
        spanning the remaining horizontal space.
      </Text>
      <InlineSample />
      <Text>
        Horizontal View, expected to display a red box of width 40, and a purple
        box spanning the remaining horizontal space.
      </Text>
      <HorizontalViewSample />
    </StacksProvider>
  );
}

Test conditions

@mobily/[email protected]
[email protected]
Platform: Android (Emulator)
OS: Android 10

PS: Your project is awesome!

Expo Snack cannot import 1.1.5 or 1.1.6

Just try to create a snack.expo.io with any of 1.1.5/6 and it will fail

Allow user to override Stack styles

Since you declare the user-defined style before the default for each component (style={[style, ...]}), we can never override any styles.

For example, I would like my Stack to be 200px wide, but since the default style says it should be 100% I have to add a container View that is 200px wide and put the Stack inside it (https://snack.expo.io/@gfpacheco/stacks-style).

This could be easily fixed by moving the user-defined style to the end of the style array (style={[..., style]}. And not only in the Stack component, but all of them actually.

Second to last child keeps bottom margin after last child is removed

Repro: https://snack.expo.io/@gfpacheco/stacks-bug

maxHeight issue in Rows

I have a component which use Rows and it has two child Row. Inside the second child row i have three box elements with flex value as "content", "fluid", "content" respectively.Basically it is to render a fixed header and footer, and the middle one will be flexible (depending on the content). Now, i am setting style={{maxHeight: 0.7*WINDOW_HEIGHT}} in the parent Rows.
The issue is even if that middle content is having lesser content, the height is still remaining at 70% of window height.
Ideally it should be flexible depending on the content.

`resolveResponsiveProp` can be undefined?

Hey man, thanks again for this amazing lib. We're using it for quite some time now and it works really well.
There is one thing though that I was wondering:

Why can the output of resolveResponsiveProp be undefined?
From your code it seems that it always provides a default.
We're using it with Typescript and that forces us to always write something like that:

const columns = resolveResponsiveProp([2, 3, 4]) || 2;

It's not a big deal but can lead to errors over time. I wish I could just leave the fallback out :)

Stack issue when using Flashlist component

Hi , first of all thanks for this awesome library.
I am facing an issue where the Flashlist is not showing when using the Flashlist component from shopify( we are using for our purpose as refactor) , although Flatlist works fine. as per that library, there is a issue which can be solved using flex: 1 in the parent (in this case Stack ) https://shopify.github.io/flash-list/docs/known-issues/#1-flashlists-rendered-size-is-not-usable-warning .

If I use View from react-native that works but I need Stack for the spacing .

Code simplified(not working):

<Stack space={4} padding={4}>
     <AnotherComponent />
      <FlashList
        data={vehicles}
        renderItem={({ item }) => (
          <MultiVehicleSelectionCard
            vehicle={item}
            onChange={handleChange}
          />
        )}
        keyExtractor={item => item.value}
        estimatedItemSize={100}
      />
     <AnotherComponent />
  </Stack>

Issues with testing-library, jest, and react native web

Hi, im currently running into issue with running snapshot tests using react testing library and react native web. I am trying to have separate tests for both native and web by having two different jest configs. The native tests (with jest preset react-native) run fine with Mobily components but seems to break when running under the web configuration (jest preset react-native-web).

Here is an example repo with the issue: https://github.com/gciluffo/react-native-web

➜  ReactNativeWeb git:(main) yarn test:web
yarn run v1.22.17
$ PLATFORM=web jest --config jest.web.config.js --forceExit
 FAIL  src/screens/NoteDetail/__tests__/NoteDetail.web.test.tsx
  ✕ renders correctly (55 ms)

  ● renders correctly

    thrown: Object {
      "Error": [Error],
      "RE_EXN_ID": "Not_found",
    }

       8 | import {render} from '../../../../jest/createMockWebApp';
       9 |
    > 10 | it('renders correctly', () => {
         | ^
      11 |   const NoteDetailScreen = render(<NoteDetail />);
      12 |   expect(NoteDetailScreen).toMatchSnapshot();
      13 | });

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Object.<anonymous> (src/screens/NoteDetail/__tests__/NoteDetail.web.test.tsx:10:1)

  console.error
    Error: Uncaught {
      RE_EXN_ID: 'Not_found',
      Error: Error: 
          at getExn (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:97:12)
          at resolveCurrentBreakpoint (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:435:10)
          at useCurrentBreakpoint (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:635:10)
          at Stacks_component_Box (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:1062:27)
          at renderWithHooks (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:14985:18)
          at mountIndeterminateComponent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:17811:13)
          at beginWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
          at HTMLUnknownElement.callCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
          at invokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
          at workLoopSync (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
          at renderRootSync (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
          at performSyncWorkOnRoot (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
          at scheduleUpdateOnFiber (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
          at updateContainer (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26021:7
          at unbatchedUpdates (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
          at legacyRenderSubtreeIntoContainer (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
          at Object.render (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@testing-library/react/dist/pure.js:101:25
          at batchedUpdates$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
          at act (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
          at render (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@testing-library/react/dist/pure.js:97:26)
          at customRender (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/jest/createMockWebApp.tsx:12:6)
          at Object.<anonymous> (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/src/screens/NoteDetail/__tests__/NoteDetail.web.test.tsx:11:28)
          at Object.asyncJestTest (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:45:12
          at new Promise (<anonymous>)
          at mapper (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:75:41
          at processTicksAndRejections (node:internal/process/task_queues:96:5)
    }
        at reportException (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
        at invokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at beginWork$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
        at performUnitOfWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22779:12) {
      RE_EXN_ID: 'Not_found',
      Error: Error: 
          at getExn (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:97:12)
          at resolveCurrentBreakpoint (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:435:10)
          at useCurrentBreakpoint (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:635:10)
          at Stacks_component_Box (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:1062:27)
          at renderWithHooks (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:14985:18)
          at mountIndeterminateComponent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:17811:13)
          at beginWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
          at HTMLUnknownElement.callCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
          at invokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
          at workLoopSync (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
          at renderRootSync (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
          at performSyncWorkOnRoot (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
          at scheduleUpdateOnFiber (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
          at updateContainer (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26021:7
          at unbatchedUpdates (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
          at legacyRenderSubtreeIntoContainer (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
          at Object.render (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@testing-library/react/dist/pure.js:101:25
          at batchedUpdates$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
          at act (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
          at render (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@testing-library/react/dist/pure.js:97:26)
          at customRender (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/jest/createMockWebApp.tsx:12:6)
          at Object.<anonymous> (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/src/screens/NoteDetail/__tests__/NoteDetail.web.test.tsx:11:28)
          at Object.asyncJestTest (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:45:12
          at new Promise (<anonymous>)
          at mapper (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:75:41
          at processTicksAndRejections (node:internal/process/task_queues:96:5)
    }

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)

  console.error
    The above error occurred in the <Stacks_component_Box> component:
    
        at Stacks_component_Box (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:1032:24)
        at Stacks_component_Stack (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:1218:21)
        at NoteDetail
        at Stacks_component_Provider (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:2339:26)
        at AllTheProviders (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/jest/createMockWebApp.tsx:5:31)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)

Im not sure if this is an issue with Mobily + test-library + react native web or im just not configuring my jest.web.config.js file correctly. Any insight would be appreciated!

This package itself specifies a `main` module field that could not be resolved

After updating to 0.9.3 I started getting this error:

Metro has encountered an error: While trying to resolve module `@mobily/stacks` from file `PROJECT_ROOT/src/components/OptionPicker/OptionPicker.js`, the package `PROJECT_ROOT/node_modules/@mobily/stacks/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`PROJECT_ROOT/node_modules/@mobily/stacks/dist/index.js`. Indeed, none of these files exist:

  * PROJECT_ROOT/node_modules/@mobily/stacks/dist/index.js(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * PROJECT_ROOT/node_modules/@mobily/stacks/dist/index.js/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

Indeed, there's no dist folder when you install the package in your project.

If I go back to 0.9.2 (before this commit) everything works fine

[Box] forward ref of view

Hi,

I'm using more and more your lib (and delete tons of styles), and I am often annoyed when I want to use a ref on a Box

I would like to measure it using https://reactnative.dev/docs/direct-manipulation#measurecallback

For the moment I wrap my Box with a view but I would like to measure the Box directly

What do you think ? Could we have a forward ref on Box ?

Won't run on expo: Can't import the named export 'Children' from non EcmaScript module (only default export is available)

To see this error in "action", check the package.json file of this snack and hover @mobility/stacks entry:

https://snack.expo.io/@jsamr/stacks-webpack-issue

This issue happens with the Webpack bundler v4 (it works just fine with metro) when resolving index.mjs. I believe the issue comes from incompatibilities between ESM and CommonJS modules. The index.mjs ESM cannot import non-ESM named exports.

So I guess replacing

import {
  createElement
} from "react";

with

import React from "react";
const {
  createElement
} = React;

would do the trick.

Workaround (expo)

Create / edit your webpack.config.js and add:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // Allow named imports from CJS into ESM modules
  config.module.rules.push({
    type: 'javascript/auto',
    test: /\.mjs$/,
    use: []
  });

  return config;
};

Failure to build JS bundle on react native expo

Hello. Wonder whether anyone has faced this issue and may be able to help? I have followed instructions on adding Stacks to my expo react native ReScript project. The code compiles when running bsb -make-world -w
However when running yarn start i get the following error:

Unable to resolve module ./Stacks_utils from /home/tomo/Development/Native/Milo/node_modules/@mobily/stacks/src/Stacks_utils.bs.js:

None of these files exist:

node_modules/@mobily/stacks/src/Stacks_utils(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
node_modules/@mobily/stacks/src/Stacks_utils/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

6 | import * as Belt_Option from "bs-platform/lib/es6/belt_Option.js";
7 | import * as ReactNative from "react-native";

8 | import * as Stacks_utils from "./Stacks_utils";
| ^
9 | import * as Style$ReactNative from "rescript-react-native/src/apis/Style.bs.js";
10 |
11 | function normalizeResponsiveProp(prim) {

PACKAGE.JSON
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"re:build": "bsb -make-world",
"re:watch": "bsb -make-world -w",
"re:build-clean": "bsb -clean-world -make-world"
},
"dependencies": {
"@mobily/stacks": "^1.1.5",
"@rescript-bindings/expo": "^40.3.2",
"@rescript/react": "^0.10.3",
"expo": "~41.0.1",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-web": "~0.13.12",
"rescript-react-native": "^0.64.3",
"wonka": "^4.0.15"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"bs-platform": "^9.0.2",
"gentype": "^3.48.0",
"rescript": "^9.1.2"
},
"private": true
}

BSCONFIG.JSON
{
"name": "my-rescript-expo-app",
"reason": {
"react-jsx": 3
},
"bsc-flags": ["-bs-super-errors"],
"bs-dependencies": [
"@mobily/stacks",
"@rescript/react",
"rescript-react-native",
"@rescript-bindings/expo",
"wonka"
],
"sources": [
{
"dir": "src"
}
],
"suffix": ".bs.js",
"refmt": 3,
"package-specs": {
"module": "es6",
"in-source": true
},
"gentypeconfig": {
"language": "typescript",
"shims": {
"ReasonReact": "ReactShim"
}
}
}

useCurrentBreakpoint not updating at root of application

Im wondering if it is possible to show/hide certain components based on the current break point from the root of the application. Example:

App.tsx

function App() {
  const currentBreakpoint = useCurrentBreakpoint();
  console.log('Current breakpoint in app.tsx', currentBreakpoint);

  return (
          <StacksProvider
            breakpoints={[
              ['mobile', 0],
              ['desktop', 992],
            ]}
            spacing={4}>
            <NavigationContainer
              linking={linking}
              fallback={<Text>Loading...</Text>}>
                <Stack.Navigator>
                  {currentBreakpoint === 'desktop' ? <Stack.Screen name="DesktopTabView" component={DesktopTabView} /> :  <Stack.Screen name="MobileView" component={MobileView} />}
                </Stack.Navigator>
            </NavigationContainer>
          </StacksProvider>
  );
}

export default App;

When the app first bootstraps it shows a console log. But when re-adjusting the screen size the currentBreakpoint value does not update in App.tsx. It works fine in lower components. But I think this makes sense because we are using useCurrentBreakpoint before we declare the StacksProvider.

Any idea on how to get around this? One solution is to make a Navigation child component where we can handle that logic in there instead of at the root of the application, but it would be nice to have this logic where we define the navigation stack as well. Thoughts?

Rendering issue when switching screen using react-navigation in combination w/ react-native-web

When switching to the page it looks like this:

When refreshing the page it looks like this (and this is how it supposed to be):

Code:

      <Text style={tw`mt-4 mb-1`}>Nodes</Text>
      <Tiles style={tw`max-w-lg`} space={4} columns={10}>
        <Icon name="at-line" />
        <Icon name="code-s-slash-line" />
        <Icon name="double-quotes-l" />
        <Icon name="heading" />
        <Icon name="h-1" />
        <Icon name="h-2" />
        <Icon name="h-3" />
        <Icon name="h-4" />
        <Icon name="h-5" />
        <Icon name="h-6" />
        <Icon name="indent-decrease" />
        <Icon name="indent-increase" />
        <Icon name="list-check" />
        <Icon name="list-check-2" />
        <Icon name="list-ordered" />
        <Icon name="list-unordered" />
        <Icon name="paragraph" />
        <Icon name="table-2" />
        <Icon name="text" />
      </Tiles>

This seems like a general issue with the library. I also noticed it on other pages. Any ideas?

Docs returns 404

Hi. I'm a big fan of mobily stacks.
your Docs are not working.

useCurrentBreakpoint()

Hello, and thank you for making this library :)

Yesterday I started using it and I realized that useCurrentBreakpoint() hook doesn't work properly on iPads. The hook as a value returns "mobile" instead of "tablet". On Android tablet the hook works as expected.

Kind regards!

Update from 1.3.1 fails to render

Hi,

I have a weird issue where if I update to any version from 1.3.1 ( even 1.4.0) the app will simply stay on the splash screen.
It won't render anything and it behaves like it doesn't even load any other file.

Any idea what it might be ?

Thank you.

(I can't really provide a test case because I can't reproduce this outside my repo :( )

Allow for more than 2 custom breakpoints?

Thanks for an awesome easy-to-use package!

Any chance it would be a quick non-breaking change to allow for more breakpoints, in addition to just customizing the existing? I'm working on a universal app that runs the gamut from small devices to large screens, so the one issue I've found myself running into recently is having a few more options along the way instead of just relying on flex/percentages, etc.

In a couple quick searches, it looks like other design systems like Microsoft's Fluent UI also allow for 6 or more. Interestingly, Braid also seems to indicate they wish they had avoided tying theirs so closely to hard-coded names in a comment, as opposed to treating it a bit more like a variable-length, ordered array, which is I guess more my preference too (but by all means keep the human-readable custom aliases too).

Looks like the current number is hard-coded to 3 currently, and it's not possible to override that, even with a typed object to replace it, so I get capped out there. I would think this shouldn't add too much logic, since presumably you could just kind of map up through the values until there are no more left (and just take the highest value) if you're out of values and haven't run out of screen yet, which I think is what you do now). Anyway maybe I'm missing something, but those were my 2 cents anyway.

I'll try to play with a hack/patch if I can despite my limited exposure to ReScript and happy to share whatever I come up with if I do as well if of interest.

Stack doesn't play nice with Fragment

If you have some complex conditionals in your render function you're likely to have something like this:

function MyComponent({ count }) {
  function renderChildren() {
    if (count === 1) {
      return <Text>One</Text>;
    }

    if (count === 2) {
      return <Text>Two</Text>;
    }

    return (
      <>
        <Text>Too</Text>
        <Text>Many</Text>
      </>
    );
  }

  return (
    <Stack space={1}>
      {renderChildren()}
    </Stack>
  )
}

But Stack doesn't work that way, it'll try to apply the spacing on the Fragment instead of its children.

Currently, the only way to make this work is replacing the Fragment with an array:

return [
  <Text key={0}>Too</Text>,
  <Text key={1}>Many</Text>,
];

Any thoughts? Maybe another workaround, ideally a fix

Grid not working as expected

First of all thank you so much for this awesome library.
We're starting to use it in our production app and we're already loving it.

We notice some unexpected behaviour while playing around with the Grid component.

Unfortunately it does not use the same multiplied values as all the other components so you have to pass in the 'real' values.
Another thing is that the margin prop only adds to the right edge. The left edge is using the gutter value.
It would also be very useful to provide multiple values for all three breakpoints (e.g 4 columns on mobile, 8 on tablet, 12 on desktop as well as margins and gutters)

That makes it a bit hard to work with. Maybe you could have a look.

We use it like that:

<StacksProvider spacing={4} breakpoints={{ tablet: 600, desktop: 940 }}>
  {... Navigators & Stuff}
  <Grid columns={4} gutter={8} margin={16} />
</StacksProvider>

As you can see it applies 16px of margin to the right side but uses 8px of gutter for the left side.
We were expecting margin to be applied to both sides.

Thanks in advance!

Horizontal stack component (HStack?)

Hi again, have you considered the possibility of having a horizontal version of the Stack?

We can do that with Columns+Column, but we have to create a Column component for each child.

We can almost do that with Inline, but I miss the vertical alignment prop.

It would be something as easy to use as the Stack, but horizontal.

`align` prop has no effect when used in combination with `horizontal` prop on Stack component

Given the example stack

<Stack space={4}>
  <Box style={{ backgroundColor: 'red', height: 30, width: 30 }} />
  <Box style={{ backgroundColor: 'red', height: 50, width: 50 }} />
  <Box style={{ backgroundColor: 'red', height: 20, width: 20 }} />
  <Box style={{ backgroundColor: 'red', height: 60, width: 60 }} />
</Stack>

Applying align="center" has the same effect as adding style={{ alignItems: 'center' }}, this is expected. However when you add horizontal, the align prop no longer seems to have an effect.

I would expect it to either have the same effect as adding style={{ justifiyContent: 'center' }}, or have a separate alignX & alignY props similar to the other components.

Box won't accept style (at least in react-native-web)

It seems that if I pass a style that's not flatten (with StyleSheet.flatten) then Box will complain with Invalid style with id '230'. Skipping ...

In RN work be cause RN accepts objects but RNW won't

I'm using 0.9.4

Any idea? Thank you 🥰

SSR: responsive styles doesn't resolve on initial render

Hey, wanted to say thank you for the cool lib :)

I want to try it out with universal app (RN + RNW with Nextjs) but run into the issue where responsive styles are not applied properly on initial render, for example on desktop
<Box flex="fluid" alignX="center" alignY={['center', 'top']}>
will still render element in the center of the screen and only after I toggle back and forth responsive mode it renders on top.
Currently the workaround is to load element dynamically like this:
import dynamic from 'next/dynamic';
const Box = dynamic( () => import('@mobily/stacks').then((mod) => mod.Box), { ssr: false, }, );

I set up a quick example here

Let me know if description is not clear or you have any questions.

Thanks

What about breakpoints?

hey there,

really nice work and I look forward to test it...

Just to know :
is there a way to use breakpoints for having grids with other screens sizes?

thanks

Stack component should not apply spacing around empty components

If a children of Stack renders conditionally, e.g. returns null on some instances, it would be expected that spaces are not added between this component and its siblings. However I don't know how easy it would be to feature given the current implementation. You would certainly have to inspect the children of the element.

function Empty() {
  return null;
}

Feature proposal: Allow divider to be a component too

For array.map operations inside a Stack it would be nice if the divider could also be a component that is rendered instead of the default line.

Missing "between" for "alignY"

Currently alignY props not accepting between, how to achieve that ?

Why not allow padding/margin props on Stacks?

I suspect there is a reason for this but I'm curious - why not allow margin/padding props to be passed to stacks and other components?

Often you're required to add additional clutter to the tree:

<Box paddingY={4}>
  <Stack space={2}>
     ...
  </Stack>
</Box>

<Stack space={2} paddingY={4}>
 ...
</Stack>

What's the bundle size?

No sure why it can't be built on bundlephobia :)
https://bundlephobia.com/result?p=@mobily/stacks

I'm thinking of using this on the web (react-native-web). That's why I wanna know :)
Potentially fixing the bundlephobia issue could help others finding out :)

Error in Next.js (fixed but need assistance merging)

When used in Next.js, this error is thrown:

./node_modules/@mobily/stacks/dist/index.mjs Attempted import error: 'react-native-web/dist/index' does not contain a default export (imported as 'ReactNative').

I was able to fix it by going into node_modules/@mobily/stacks/dist/index.mjs and updating every instance of import ReactNative with import * as ReactNative.

I would create a PR, but I'm not familiar with ReScript. Some help would be appreciated.

FillView props are not exported

All other components export their props from the root, but FillView isn't exporting his.

A lot of undefined styles in styles array

I noticed a lot of undefineds in the style array of the rendered components (e.g. FillView). I have converted a layout to stacks (which makes things much much easier btw 👌 ) and was confused when a snapshot showed a lot of new additions.
I then checked the actual rednered output with the RN Debugger and found that Box rendered by the FillView component look like this:

It already has a couple of undefineds. When I checked the View that is rendered by the Box I found even more:

The source just look like this: <FillView alignY="center">...</FillView>.
This is also the case for other components such as Stack.

So I guess my question is: Am I doing something wrong, is this something that does not matter or is something wrong with the way styles are attached/read?

Also: Great work, love the project. Makes things so much more consistent and is a breeze to work with ❤️

Column (and Stack) won't expand to it's content in 1.1.5/6

Without any code change from 1.1.4 to 1.1.5/6 it seems that Columns and Stack lost the ability to expand to its content in React-Native-Web.

This however works: <Column style={{ flex: 1 }}>