I want to somehow visualize jest tests written with react-native-testing-library, by trying to actually render the rendered component on a real ios simulator. I am tying to think of a ways to do it. I guess it's somewhat like ssr for react native (the component is rendered in the jest process, and need to be sent to the device somehow), but I couldn't find any ways to achieve it.
Is there a way to somehow send the rendered component to the device?
I tried with react-serialize but it didn't work.
Any suggestions?
Related
Can anyone tell me how it is possible to insert a loading screen while a screen is loading. (i am using the React Native Stack Navigator).
There are a couple of ways you can do this. We have a couple of npm libraries to do the task. One is React native loading spinner (This package has been currently deprecated). You can read the documents to see how to implement those. If you want to create beautiful animations, You can use react-native-animated-loader. There are tons of libraries you could find on Github and npm. If you want Instagram-like loading(displaying some placeholder stuff before rendering your react-native component), there is react-native-easy-content-loader. Please go through the docs for more info.
You can also implement your own loading screen from scratch and use the useEffect hook to render the loading screen before the component is loaded
I'm trying to understand how I can do a signature capture in React Native. My App is created with create-react-native-app and Expo and I'd prefer to not have to eject the app to get this functionality to work.
Would it be possible to wrap something like this in a webview? https://github.com/szimek/signature_pad
I've also looked at this project, https://github.com/RepairShopr/react-native-signature-capture but it requires me to eject the app and use react-native link.
Looking for any advice or suggestions on how to implement this feature while keeping my project as straightforward as possible (ideally, using create-react-native-app, but if this isn't possible could someone please explain to me why?)
The way React Native works is that each component available in React Native maps to a native component in the underlying platform.
ie. a <Image /> is an ImageView in Android and a UIImageView.h in iOS.
The Javascript code itself runs in a Javascript thread on each platform and as you use Components in React Native, there's a translation layer that passes information from JS into the React Native bridge that then results in corresponding native components being created.
By default, React Native has included the following components: https://facebook.github.io/react-native/docs/components-and-apis.html#basic-components which means that only those components come out-of-the-box in React Native. If you want other components, then you have 2 options, either create a "composite" component in which your JS component is written into other JS components or, if your feature needs a native component not yet exposed by React Native, write your own "native" component to expose certain native functionality to your React Native code.
The way Expo works is that they have wrapped React Native and a handful of 3rd party components and built it within their application. The reason why you can't use a 3rd party native component they don't support is because when that component is used, the app itself doesn't have translation code to go from JS to a native Android/iOS view.
So, to do what you're asking, you'd need to find either a "native" drawing component that Expo has included in their platform/app. OR you need to find a "composite" drawing component that is built with other default React Native components (or other components Expo supports).
ie. On Android, I might build this with a Canvas view, but from what I can tell React Native doesn't support that object natively, so I would probably write this myself, etc.
It's hard for Expo to support every 3rd party "native" component out there because React Native is open source and it iterates so fast that most community-built components aren't always up to date or they might conflict with one another.
I am using react-native-signature-capture.
Working properly on both Android and iOS.
I know it's been a while, but there is an interesting article here: https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac
Wait, but how?
Using “expo-pixi”, you can add a component that lets you choose your brush’s color, thickness, and opacity. Then when your user lifts her finger, you get a callback. From there you can take a screenshot of the transparent view or get the raw point data if that’s what you’re looking for.
We used to have a Cordova app that, when running on Appium, we could switch to Webview and execute JS commands using execute_script.
I would like to do the same thing on React Native to run some JS code (e.g., exposing a function on global or running something like console.disableYellowBox = true;). However, appium does not shows a Webview context to switch to and it seems to me the execute_script on native app context doesn't work.
Is there a way of doing a similar thing on RN client?
For ReactNative application there is no Webview context as RN is interpreted as NATIVE_APP one.
For finding elements its more interesting: there is no way to set resource-id for Android.
However you can set accessibilityLabel for your Views in React Native app and search for it like:
driver.findElementByAccessibilityId(accessibilityLabel)
Should work for both iOS/Android. Basically you should right your tests like you test Native app, not a Hybrid one.
And of course, you can use Xpath to search by text, but that I strongly do not recommend to do.
I'm starting with react native and I have a little experience with React, Because of that I want to use redux, react-router, and react-router-redux, which I have used in the past for a web React app.
All those packages can be used in react-native, except for react-router, the closest I could find is react-router-native which seems to work much like the browser version. So far so good, I made a quick and dirty app to test the router, redux, etc.
But I'm having some issues I can't figure out how to solve or debug: When changing the visuals like the text or some styles, the HMR seems to work fine, applying the changes in real time, but when I change some other module/file, like the container element (where the redux connect() function is called) or some code on the reducers, the HMR doesn't change anything and I have to reload all the app to see the changes.
Here is my code: https://github.com/DenJohX/test-react-router-native It basically just changes the color of some text by toggling a variable in the redux store. Sorry for just linking it but I think its better to show you all the folders and project structure, maybe I'd just goofed something in there or didn't use the correct folder structure.
I'm using https://github.com/jhen0409/react-native-debugger to debug the app, and by the console messages, the HMR does run and patches something but without affecting the current loaded code.
To test the problem, try to edit the colors in src/screens/pageOneContainer.js, the HMR should change the code, re-render the screen, and show the new colors, but they just stays the same.
Thanks in advance.
Interested in knowing if there is a way of passing an event with some payload to react native components through debugger console in chrome.
My use case is, while debugging I want to send a message to one of my react components.