jsartisan / react-native-magnus Goto Github PK
View Code? Open in Web Editor NEWA Utility-First React Native UI Framework 🚀🧩
Home Page: https://magnus-ui.com
License: MIT License
A Utility-First React Native UI Framework 🚀🧩
Home Page: https://magnus-ui.com
License: MIT License
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.
https://magnus-ui.com/docs/customization/
Could you provide an object of all theme customization settings? How the developer can change the default font your UI is using?
Add example of how to change default fontFamily settings.
Placed an item to the right side of the screen and then added a tooltip to it
<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>
https://magnus-ui.com/docs/getting-started/
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"
},
I tried to add font-weight to a text element and it didn't work. I'm not using any custom fonts.
import { Text } from 'react-native-magnus';
<Text fontWeight="bold" fontSize="4xl" mt="md">
Iphone 11
</Text>
https://magnus-ui.com/docs/
https://magnus-ui.com/docs/button/
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>
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?
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.
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..
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>
[What happened]
[SyntaxError: No identifiers allowed directly after numeric literal]
User CRNA to create a default app
import anything from react-native-magnus
Add steps to reproduce this behaviour, include console / network logs & screenshots
https://magnus-ui.com/docs/overlay/
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.
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
Awesome library... does this work with react-native-web?
All component hasn't tests, but component Div
has test. It would be better if we add test for all components.
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.
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)
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 :)
Since magnus works on web too, adding responsive props to handle media query both on web and mobile devices is must-have feature.
It would be really nice if we can somehow configure the default props of components.
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.
warning " > [email protected]" has incorrect peer dependency "react-native-vector-icons@^6.6.0".
warning " > [email protected]" has incorrect peer dependency "react@^17.0.1".
warning " > [email protected]" has unmet peer dependency "react-dom@^17.0.1".
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
.
Great library! It would be nice to support something like react-native-web-modal for use with react-native-web.
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 ...
RTL support is currently missing from the library. It's a must-have feature for wider adoption.
If we could handle the date picker in Magnus, it would be awesome!
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'?
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
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
Can we have a component wrapper around react-native-fast-image
that supports magnus theming and styling guidelines.
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.
I just found this project and kudos!
I really love the idea of bringing a utility first system to react-native!
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.
Example 3 from the example page has 'explor' instead of 'explore' as a heading.
https://github.com/jsartisan/react-native-magnus/issues
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.
Perhaps you could remove the link, or attach that link to a valid Discord account?
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.
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.
Be able to change ThemeProvider setup to dark mode, globally
Modern, lots of users tend to expect it since many pages and apps already implemented it.
Be able to detect the user's mobile / web settings and change it automatically before the app loads.
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).
It seems there is a state race/something like that. Thank you...
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.
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
The default component or custom component for renderNoResultsView
in the Select
component is not displayed when the search returns no data.
renderNoResultsView
is not displayedThe Portal component seems super useful. @jsartisan WDYT about extracting it into its own package?
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)
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;
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.
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
[What happened]
Add steps to reproduce this behaviour, include console / network logs & screenshots
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.