For standard styled system, there is alot of case use Box as main responsible component.

So, I think it maybe a good idea to alias Box as Div which following styled system convention.

I just found this project and kudos!

I really love the idea of bringing a utility first system to react-native!

Description

Example 3 from the example page has 'explor' instead of 'explore' as a heading.

Documentation Link

https://magnus-ui.com/docs/overlay/

Describe the problem

I was trying to use the <Overlay /> component when I faced an issue to use its props. The docs says that we can use all the <Modal /> props from react-native-modal package. But, I searched in the react-native-magnus source code and I saw that the <Overlay /> component was using the <Modal /> component from ... React Native.

Describe the improvement

I will do a PR to update the documentation and to redirect the user on the right website to help him to use the <Overlay /> component

Description

• Example App mentioned in README requires a login and then returns an 403 when opening it in Expo GO.

• Components Usage Example mentioned in README fails due to undefined error.

Steps to reproduce the behaviour:

Open both examples in Expo Go.

Description

There is a warning about the global.__expo deprecated in Expo SDK 40.
The warning showing due to the usage of global.__expo.Icon in icon.service.tsx.

Thank you ...

Steps to reproduce the behavior:

• Init react native project using SDK 40
• add react-native-magnus
• use Icon component

Important Details

Documentation Link

https://magnus-ui.com/docs/getting-started/

Describe the problem

In documentation

but in your package,json

"peerDependencies": {
    "color": "^3.1.2",
    "deepmerge": "^4.2.2",
    "react": "*",
    "react-native": "*",
    "react-native-animatable": "^1.3.3",
    "react-native-modal": "^11.5.6",
    "react-native-vector-icons": "^6.6.0",
    "validate-color": "^2.1.1"
  },

The documents page for Divs acting weird at the moment

Can you check it?

I got following error when bump updated library.

Tried this example source code.

https://snack.expo.io/@pawankumar2901/dribble-login-page

Maybe related to this change? 1df30b7

Description

Header can't keep same height with and without prefix/suffix without set a fixed height. This can be a problem if you want to hide prefix/suffix and wants to Header to mantain it's height.

Steps to reproduce the behaviour:

Use Header component with and without prefix/suffix.

Summary

Sometimes I need to customize the location of the pointer in the Tooltip component. It would be awesome!

Motivation

Why should this be worked on? What problems or use cases does it solve or
improve?

For a better UI design, we need this custom style.

Additional Context

Why TextInput textAlign prop does not exists on Input?
textAlign="center" works well but it is not included in Input types.

Rather than have just direct style props for components, theme-ui has an sx object prop. I find it to be a really nice design pattern for styles. However, it is a bit more challenging to memoize.

I understand if this isn't the philosophy of this library, and maybe it isn't something you're interested in implementing. But I find it to be a really nice way to decouple styles from other props.

Either way, great work with the library! Nice to see a design system with React Native as a first-class citizen.

Documentation Link

https://magnus-ui.com/docs/
https://magnus-ui.com/docs/button/

Describe the problem

In trying to use Magnus UI for the first time in a React Native app that does not include Expo, Input, Div, Text, etc. all seem to work without error. The problem I have is with Button.

Button complains that the children are undefined despite trying both <Button>some text</Button> and <Button><Text>some text</Text></Button>

Describe the improvement

If this error I'm seeing is a result of not including Expo in my project, perhaps you could note that on the documentation Introduction page and/or the Button documentation page?

Documentation Link

https://magnus-ui.com/docs/customization/

Describe the problem

Could you provide an object of all theme customization settings? How the developer can change the default font your UI is using?

Describe the improvement

Add example of how to change default fontFamily settings.

Hey, I found an error in a lot of types as "shadow" that requires a number, but on docs it require a String and minW also asks for a number, when it should be asking for a string.

It works but I have to put // @ts-expect-error on every prop with wrong type declaration.

Description

[What happened]

Steps to reproduce the behaviour:

Add steps to reproduce this behaviour, include console / network logs & screenshots

Important Details

• Version: [Cloud / Self-Hosted vx.x]
• OS: [e.g.MacOSX]
• Browser [e.g. chrome, safari]

Awesome library... does this work with react-native-web?

Description

Latest npm package seems to be 1.0.62 which seems to match with repos 1.0.60 tag (also latest release according to repository). This causes confusion about what changes are in which packages.

The Portal component seems super useful. @jsartisan WDYT about extracting it into its own package?

Summary

Can we have a component wrapper around react-native-fast-image that supports magnus theming and styling guidelines.

Motivation

Currently Image component we have with magnus is wrapper around React native Image component. Which doesn't not support many features fast-image offers and is pretty reliable and useful for many case.

Hey, just wanted to start of thanking you for this awesome library!

The problem I'm facing right now is that I can't find how to change the default font. Is there a recommended way of doing that?

And also, is there a way to specify another font-family as the "bold"? For example, when using expo-google-fonts, I import RobotoSlab_400 and use that as the "normal" weight, and RobotoSlab_700 as the "bold" weight.

Also, as a side note: Is there any way to import the default theme, so I can use the colors somewhere outside the library, like in the StyledComponents Theme provider? Maybe a useTheme hook?

Thank you for the awesome library.
I am using this lib, for my personal projects (web and mobile.)

I want to use the tooltip component for my web layout.
But there is a weird behavior that happens when I try to close the tooltip (click anywhere).

• Click once -> toolip showing back
• Double click -> tooltip hidden

It seems there is a state race/something like that. Thank you...

Description

When you are searching in a Select input, when you go to select an Option the keyboard is dismissed. Then it requires another tap to select the Option.

Steps to reproduce the behaviour:

1. Render a Select that has searchable options
2. Search in the input field
3. Try to select one of the displayed options

Important Details

• Version: v1.0.62
• OS: macOS Big Sur
• Browser iPhone 12 Pro Simulator

Summary

It would be really nice if we can somehow configure the default props of components.

Motivation

In most cases, developers will not use the out of box styling of the components. Instead, they will pass some props to get the desirable UI result. Providing a default props possibility will really save developers from a lot of repetition.

Summary

Be able to change ThemeProvider setup to dark mode, globally

Motivation

Modern, lots of users tend to expect it since many pages and apps already implemented it.

Additional Context

Be able to detect the user's mobile / web settings and change it automatically before the app loads.

• this is just a minor feature since the developer can do the detection itself and change it manually (in case dark mode switcher will be implemented)

Hi! Found a nasty bug today, it seems that hidden options inside a FAB can be pressed at any time.

Description

I wanted to create an Input component with a specif appearance, but the pressable area of the input is smaller than expected. I can't press the button, but if I press the textArea, the it works (more details bellow)

Steps to reproduce the behaviour:

The first screenshot here is supposed to be the Input usable (we can see a bit of padding inside it)

The actual pressable Area can be seen in the second Screenshot. For now, there's no way to customize this part.

Here's the code of the component (the attributes here match the ones of ForwardRef in the React Native Inspector) :

import React from 'react';
import { Input as MagnusInput } from 'react-native-magnus';

const Input = React.forwardRef(({ ...otherProps }, ref) => {
  return (
    <MagnusInput
      ref={ref}
      pl={20}
      focusBorderColor="blue700"
      bg="gray100"
      rounded="circle"
      fontSize={18}
      fontWeight="400"
      h={57}
      w="100%"
      borderWidth={0}
      {...otherProps}
    />
  );
});

export default Input;

Important Details

• OS: Android and iOS (not matter the version)

Summary

All component hasn't tests, but component Div has test. It would be better if we add test for all components.

Motivation

Why should this be worked on? What problems or use cases does it solve or improve?

You'll want to validate that each unit of your React Native code performs as expected, and you’ll want to test each unit’s impact on the behaviour of your system.

Additional Context

https://callstack.github.io/react-native-testing-library/

Have you heard about this extension for Github?
You can use it and publish Example App to Expo, then put the link on README for get easy to people to give a look on what this project can do.

https://github.com/expo/expo-github-action#publish-on-any-push-to-master

I'm using "borderRight" properties on Div component and borderRightColor don't work. But borderLeftColor do.

This is my code:

and the result:

Description

[What happened]
[SyntaxError: No identifiers allowed directly after numeric literal]

Steps to reproduce the behaviour:

User CRNA to create a default app
import anything from react-native-magnus
Add steps to reproduce this behaviour, include console / network logs & screenshots

Important Details

• Version: [Cloud / Self-Hosted vx.x]
• OS: [e.g.MacOSX]
• Browser [e.g. chrome, safari]

Description

The default component or custom component for renderNoResultsView in the Select component is not displayed when the search returns no data.

Steps to reproduce the behaviour:

1. Render a Select that has searchable options
2. Search in the input field so no results are found
3. The default component or custom component for renderNoResultsView is not displayed

Important Details

• Version: v1.0.62
• OS: macOS Big Sur
• Browser iPhone 12 Pro Simulator

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

With this change I am able to use the (unused?) count prop to set the avatar badge contents when the avatar is a child of Badge. Was it meant for exactly this usecase?

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-magnus/src/ui/badge/badge.component.tsx b/node_modules/react-native-magnus/src/ui/badge/badge.component.tsx
index c8d099f..e8a7a92 100644
--- a/node_modules/react-native-magnus/src/ui/badge/badge.component.tsx
+++ b/node_modules/react-native-magnus/src/ui/badge/badge.component.tsx
@@ -73,6 +73,7 @@ const Badge: React.FunctionComponent<BadgeProps> = (incomingProps) => {
   } = props;
   const { theme } = useTheme();
   const computedStyle = getStyle(theme, props);
+  const badgeContent = count || children
 
   return (
     <RNView style={computedStyle.container}>
@@ -80,12 +81,12 @@ const Badge: React.FunctionComponent<BadgeProps> = (incomingProps) => {
         {typeof children !== 'string' && children}
 
         <RNView style={computedStyle.div} {...rest}>
-          {typeof children === 'string' && (
+          {(typeof badgeContent === 'string' || typeof badgeContent == 'number') && (
             <Text
               {...getSpecificProps(props, ...textProps)}
               style={computedStyle.text}
             >
-              {children}
+              {badgeContent}
             </Text>
           )}
         </RNView>

This issue body was partially generated by patch-package.

<Badge count={2}>
   <Avatar source={{ uri: item.avatar }}>
      Avatar Initials
   </Avatar>
</Badge>

I am missing the option to use direction aware style props such as marginStart or borderEndWidth.
I would be happy to PR it but not sure how your dev workflow is going.

Since magnus works on web too, adding responsive props to handle media query both on web and mobile devices is must-have feature.

Description

Placed an item to the right side of the screen and then added a tooltip to it

Steps to reproduce the behaviour:

<Div row justifyContent="space-between">
  <Text>Hello</Text>
  <Tooltip text={tooltip} ref={ref}>
          <Button bg="transparent" onPress={() => ref.current!.show()}>
            <Icon name="info" fontFamily="Feather" />
          </Button>
  </Tooltip>
</Div>

Important Details

• Version: "react-native-magnus": "^1.0.62",
• OS: MacOS Big sur
• Browser Chrome

Summary

If we could handle the date picker in Magnus, it would be awesome!

Motivation

Why should this be worked on? What problems or use cases does it solve or
improve?

Adding date pickers in iOS and Android is terrible for me. Can we have an input form that has type='date' or type='datetime'?

Additional Context

Any other context or screenshots or link that you
pertain to the feature.

There are some works out there: https://github.com/pohsiu/react-native-date-ranges

Great library! It would be nice to support something like react-native-web-modal for use with react-native-web.

Setting multiple to false still renders the footer button, I had to fix this way.. Can i go on and send a PR?

And also i cant seem to set an height on the select container..

Also render title too react node doesnt work with it, gives error of object is not valid as a react child..

Worked after This

Ill send the Pr soon..

A great part of chakra-ui and theme-ui is that you can use an array of design tokens to give different styles for different breakpoints.

// chakra example

<Box
  height="40px"
  bg="teal.400"
  width={[
    '100%', // base
    '50%', // 480px upwards
    '25%', // 768px upwards
    '15%' // 992px upwards
  ]}
/>

If this library supported this kind of styling, it would be the first of its kind for React Native. It would mean using the @expo + next.js integration (or any React Native Web project) could have universal, responsive styles.

I think the solution would be to use @expo/match-media to polyfill the browser's matchMedia API, and then and conditionally render styles based on a certain breakpoint, using react-responsive to know what the current media query is.

Example

Here is an example by @EvanBacon using matchMedia and react-responsive: https://snack.expo.io/@bacon/4e2f09

...and a great article by Evan explaining it: https://blog.expo.io/media-queries-with-react-native-for-ios-android-and-web-e0b73ed5777b

RTL support is currently missing from the library. It's a must-have feature for wider adoption.

Documentation Link

https://github.com/jsartisan/react-native-magnus/issues

Describe the problem

If you go to create a "New Issue" here in GitHub, you get taken to https://github.com/jsartisan/react-native-magnus/issues/new/choose. If you click on "Open" next to "Questions and Help" you get taken to a Discord account. One of the members of that Discord account says they doesn't have any relationship to Magnus UI.

Describe the improvement

Perhaps you could remove the link, or attach that link to a valid Discord account?

Summary

Sometimes we use reversed flex-direction, so it's better to support props like padding-start, border-end, and similar props to respect reversed flex direction.

Pressable is a Core Component wrapper that can detect various stages of press interactions on any of it's defined, children.
will be glad to send in PR for this, let me know what you think :)

Description

I tried to add font-weight to a text element and it didn't work. I'm not using any custom fonts.

Steps to reproduce the behaviour:

import { Text } from 'react-native-magnus';

  <Text fontWeight="bold" fontSize="4xl" mt="md">
          Iphone 11
        </Text>

Important Details

• Version: "react-native-magnus": "^1.0.59", "react-native": "0.63.4",
• OS: Mac
• Browser: iOS simulator

Description

Searchable Select can resolve custom objects, but can't resolve simple objects.

Steps to reproduce the behaviour:

Use Select component - passing string array as data - and 'searchableProps' prop as [""]

A global component that can be triggered with either React Hooks or with a ref. Just like: https://github.com/arnnis/react-native-fast-toast#global-example

Example Snack: https://snack.expo.io/@jesse_dejonge/1a3b99 (this however uses the same countdown values in multiple instances)