Is there a way to directly manipulate styles in the chrome dev tools while debugging in React-Native like there is for manipulating the styles of a webpage (like below)?
Yes, given the fact, that style is just a property in react-native and you can edit props on the fly with React chrome extension, it should be possible. Should, because I've had hard time making it work, maybe you'll have a better luck :) However I've seen it work in some video...
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Try this: https://github.com/jhen0409/react-native-debugger
Go to debugger integration and look for elemental inspector, and there i believe you can change style in runtime.
Related
I'm using the MGT with React. I am trying to style the component in the same fashion as the rest of my application (reactstrap).
I've found the custom CSS properties you can set, which has got me 90% of the way there, but I need to be able to adjust the margins of the control (margin-left: -3px) and I can't seem to do this no matter what I try.
I think the answer to my problem lies in using the templating functionality but the documentation is a bit lacking for this.
Any ideas where I should start with this? Am I on the right track? Does anyone know of an example of using templates with the PersonPicker component?
Without specifics, there definitely might some css properties that we haven't exposed yet. I don't think there would be any recommended code to use here, instead I'd highly suggest opening a an issue on our github repo as a feature request. We can then work with you on improving the toolkit with these properties.
LayoutAnimation is a part of React Native that automatically animates components when the view is rendered.
The official documentation is here:
https://reactnative.dev/docs/layoutanimation
However, the examples in the docs do not work. Objects in the examples that are supposed to animate just jump from the starting position to the end position.
Here is an example of one of the Snacks in the documentation that does not appear to animate:
https://snack.expo.io/91MUQd5IH
This would lead one to the conclusion that this API is just not supported or no longer functional.
Is it the case that Layout Animation just does not work? Or if it does work under some circumstances, please share a link containing a working Snack / Gist with an extremely simple but working LayoutAnimation example.
UPDATE: LayoutAnimation possibly does not support web. Does anyone have any knowledge of this or who can refer the reader to an explanation in the docs?
LayoutAnimation is currently not supported properly in react-native-web. You can see that here: https://github.com/necolas/react-native-web#modules and here https://github.com/necolas/react-native-web/issues/1613, https://github.com/necolas/react-native-web/issues/1056. It doesn't seem to be a priority for the project at the moment so I wouldn't count on it being implemented.
On iOS/Android it's a different story. If we look here: https://reactnative.dev/docs/layoutanimation/ you can actually see this working properly by pressing play and selecting iOS for example.
On Android we have support as well but it might not work/crash. If you look over the issues open for react-native, you will see a lot of them mention issues with LayoutAnimation and Android. E.g. it crashes under certain conditions on Android: https://github.com/facebook/react-native/issues/27552 and https://github.com/facebook/react-native/issues/29919.
I don't recommend using LayoutAnimation, especially on Android, as it is highly experimental and might crash on some devices without warning.
If you want to try some more interesting animations with better performance, I recommend you try using the Animated API from ReactNative or the newer react-native-reanimated which is faster, more modern but still in alpha (I'm talking about the current, v2, version).
By my test the given link in the question post works properly:
Also, I test it on my friend's iPhone and it's worked properly too. But many of React Native features don't work properly on Web export. For example animations on RNW (React Native Web) works on Android/iOS exports but not on Web exports.
For such web situations, you should decouple the web component and make a separate file then write the desired animation on it.
Now that things are sort of getting stable, I am still doing the codename one todo app demo and got to the point where I added underlines under the label/checkbox. My git repo is
https://github.com/deanhiller/codenameOneExamples
****EDIT
I just published my build and ran on android phone and the basic todo app is not working either. I am not sure what's wrong, and if I can't fix this it may be time to jump ship and create two apps(one swift and one android studio...bleck ). I really like this concept and at 70/month, codeone was not a bad deal for what we need.
****END EDIT
If I click + 3 times though, the screen looks like this (settled on using intellij 2019.1.4 with codename 6.5.1 on MacOS Catalina 10.15.4). This is not what the demo should look like though.
and thanks at the amazing support Shai.
It seems you only defined the styles for the unselected theme. This means that when an entry is selected or pressed it's unstyled. You can see this by opening the theme in my repo and comparing it to your theme.
Since I wrote that book we've slowly moved to styling with CSS which isn't very different from the content of the book (slightly different syntax). That makes things like that easier since CSS implicitly defines all the 4 styles in the same way and changes things for a specific style explicitly. This is a bit more convenient. It's also easier to treat styling as code even though I'm not a fan of CSS.
The nice thing if you can "live edit" CSS which means changes instantly show in the simulator without interaction.
I have a react-native project that's built using Metro and Native Base and I'm trying normalize the UI by extracting a styleguide out of it. I would like it to be documented so I can share it and work along with the designers.
Cheers!
I already tried Storybook, Docz and React-Styleguidist.
React-Styleguidist: This one I liked the fact that it could be placed outside the project.
Docz: seems to be the easiest but it seems to have a problem with Native-Base
Storybook: Seems to require the you have an emulator running to display any documentation.
Anyway, I couldn't make any of them work. So if you guys have some suggestions regarding these or other tools, I'd be glad to hear them.
The best would be to have a browser based that lifts the documentation from outside the repo and parses something that's browsable and I can share with the designers.
You can use react-native-web package that compiles native components to HTML.
https://github.com/necolas/react-native-web
I just started learning ReactXP and I want to use React-Navigation-https://reactnavigation.org/ in ReactXP. Is React-Navigation is supported in ReactXP? If yes, Then we have any working example?
I found one example but its not working. https://github.com/LeJPR/reactxp-navigation-example
Referring to this link (https://microsoft.github.io/reactxp/docs/extensions/navigator.html) the default way of reactXP is currently not using React-Navigation but might do in the future.
The current implementation of Navigator on React Native makes use of the deprecated “Navigator Experimental”. We will look at moving away from this implementation to the now-recommended “react-navigation” in the near future. Some of the more advanced interfaces may need to change. These are listed at the end of this article. Use these with caution.
I read somewhere in the reactXP issue list on gitHub that your example (https://github.com/LeJPR/reactxp-navigation-example) does not just use react-navigation but had to change the annimation system used in reactXP and seems to not beeing updated anymore.
The core of react-navigation works fine with reactxp, to get it running as is you just need to create reactxp versions of the views used by the different navigator types such as stack/drawer/tab. In doing this though i ran into some challenges with the parity of reactxp animation vs react-native. Unless i'm mistaken it seems there's some quite fundamental limitations with reactxp animation currently - from what i can see you can only have a single interpolation off an animated value (add another and it will overwrite the first), only two values in an interpolation array (as opposed to multiple steps). This functionality is used extensively in the react-navigation views for native like experience. To get around this (driven by a lack of time to consider how to reimplement with reactxp animation) i ended up patching in animatedjs for use on reactxp web navigation views, which provides parity with react-native. Kind of leads me to believe considering animation might be a precursor to react-navigation/more important question. Happy to put up a sample of the above approach to getting react-navigation working with reactxp if of benefit - definitely just for awareness and not production use though!
The example does actually come from this reactXP issue: https://github.com/Microsoft/reactxp/issues/9#issuecomment-303717309
Options I found for Navigation without writing an Extention on your own
contained in reactXP https://microsoft.github.io/reactxp/docs/extensions/navigator.html
also from reactXP team but not in use? https://github.com/Microsoft/react-native-experimental-navigation
an other navigation package I found https://github.com/ymzuiku/react-router-hash-history