I'm seeing ReactClass<*> in code for React-Navigation. I have two questions:
Why does ReactClass not need importing at the top of the file? Is it some kind of global constant in React Native?
What is the meaning of ReactClass<*>?
It is an existential type in Flow of a React Component.
In short, they're saying expect that tabBarComponent may or may not be there (note the question mark at the end of tabBarComponent?, and that it will be a React component class, with arguments of a type that flow will infer.
Flow is a tool for making JavaScript strongly typed.
Related
The DataDog docs states that
Starting with version 2.16.0, with the actionNameAttribute initialization parameter, you can specify your own attribute that is used to name the action.
Thus you can have something like this in the DD configuration constructor:
DD_RUM.init({
...
trackInteractions: true,
actionNameAttribute: 'itemID',
...
})
Now both attributes itemID and data-dd-action-name can be used to name tap/click actions; data-dd-action-name is favored when both attributes are present on an element.
However that seems to be the case only for the browser SDK, and not the React Native SDK. Is this really the case?
data-dd-action-name is currently the only way to specify the target name of an action using the RUM React Native SDK.
Depending on your use case you may can also use the DdRum.addAction() and DdRum.startAction() methods for manual action tracking and provide the desired target name. There is an example of calling these methods in the Manual Instrumentation section of the RUM React Native SDK documentation.
I am almost done with my chat application in React native with Firebase. At the end, typing indicator needs to be updated with the app. Since I searched I don't get any proper reference code to implement it.
Is there any Reference/Sample code for typing indicator in react-native-gifted-chat?
Thanks in Advance!
Referencing https://github.com/FaridSafi/react-native-gifted-chat/issues/1565
Comment by shamilovtim // fixed typo
I'm using the latest version of the plugin. I simply have it set to a stateful variable coming from my Redux store. and my working example would simply be that. There's something you're doing wrong with how you manage state. I'd start out with make sure you're using this plugin inside of a function component because that's where I can confirm the typing indicator works. Not sure if it's broken in class components but those are legacy at this point so you might need to refactor.
import { useDispatch, useTrackedState } from 'reactive-react-redux';
const state = useTrackedState();
<GiftedChat
...
...
isTyping={state.isTyping}
/>
I would also make sure that your screen didn't mount with state already set to true. If you set it to true after it's already true your state hasn't changed and React isn't going to rerender a component. (e.g. your defaultValue should be false).
Hopefully this helps.
We are working on a React application (using Create React App without ejecting it) and we decided to use Ant as our base component library.
Now that we are near the end of the project, we discover that the application will be integrated into a corporate portal (WebSphere) as a "portlet", so we inherit all the CSS files from the main page.
Both frameworks seem to have their own reset styles, but they use different values.
So far, I have not been able to find a LESS variable in Ant that can be used for prefix all Ant's CSS rules.
Has anyone ever tried to make them live together?
We don't own the parent development, we can only make change on the React part, so only things related to Ant.
We finally go with a specific CSS patch file, and we add rules when needed.
Not really perfect, but none of the suggested path did the job we expected.
Here you can see some of the default antd variables.
One of them is #ant-prefix: ant;. I think you can change it and apply different styles.
That is a tough one, and at the end of development no less!
As #froston mentions, and which you seem to have tried the #ant-prefix: ant; in addition to this you will need to se prefixCls as a prop on every component instance you create, which will definitely be an exercise in self-flagellation.
Even if you set a global CONSTANT and import and use this with your components, you still have to thread it through to all the places, and will need to be appended with the component name.
By way of example, the defaultProps for an anchor is prefixCls: 'ant-anchor'.
Hope this helps and good luck!
While experimenting with React Native and using States. I came against super(props). I searched here in the forum for a useful explaination, but I didn't find any.
Here is a look on the function, where I am using super and constructor...
1
I tried to delete props parameter in constructor, but it gave me an error. Then I tried to delete super(props), it gave me again an error. However, the code perfectly work, when I just used super() without parameter.
My conclusion is, in constructor i am saying we are using props and with super I am allowing an access over all props globally in code?
I am not really sure, correct me please If I am wrong.
I appreciate any comments with advises. Thanks in advance!
Edit:
I also added the rest of the code...For a clear undestanding..
2
I appreciate your help..
In React Native when using super(props) you can immediately access the props via this.props in the constructor while with only super() you can't.
In other methods like render however you can always utilize this.props.
Here is a complete examples of the explaination above:
https://stackoverflow.com/a/34995257/4293498
I'm playing around with React Native and attempting to write some native code that communicates over bluetooth. I'm confused by the type annotations that I need to use in order for it to work. Could someone please explain why I have to have the "resolver" and "rejecter" bits in the following two code snippets? Is there a way to write this without those unused parts?
My implementation, MyAsyncModule.swift:
#objc(MyAsyncModule)
class MyAsyncModule: NSObject {
#objc func echoAsync(
input: NSNumber,
resolver resolve: RCTPromiseResolveBlock,
rejecter reject: RCTPromiseRejectBlock
) -> Void {
resolve(input)
}
}
From my bridge file, MyAsyncModuleBridge.m
RCT_EXTERN_METHOD(echoAsync:
(nonnull NSNumber *)input
resolver:(RCTPromiseResolveBlock *)resolve
rejecter:(RCTPromiseRejectBlock *)reject
)
I am coming from scripting land so types are foreign to me, but it seems too weird that React Native refuses to identify my the echoAsync method unless both the implementation and the bridge include the resolver and rejecter bits...
The resolver and reject calls are needed to have the framework generate a "promise". A promise can be thought of as a placeholder for a value that will be made available in the future. The resolver is called when the native code is done doing its work and is ready to pass the results back to the JavaScript land. reject is used when the native side detects an error and is used to report that error from native to JavaScript land.
To get a bit deeper, when you're JavaScript calls a native function, it doesn't pause and wait for native to finish up like a normal function call. It instead just goes on executing the next line of code (notice how React-Native prevents you from setting a return value for your exported functions meaning they are explicitly making sure you don't try and wait for a return value).
So then how does native code ever report the results back to JavaScript? There are two options
callbacks (in native these have the type RCTResponseSenderBlock) when called, cause a JavaScript function to run with the passed arguments
promises (with the types RCTPromiseResolveBlock and RCTPromiseRejectBlock) which causes you success handler to run with the passed arguments when resolver is called or causes your error handler to run when reject is called.
As for async function you MUST use promises.
For more info on JavaScript promises checkout:
http://www.html5rocks.com/en/tutorials/es6/promises/
https://facebook.github.io/react-native/docs/native-modules-ios.html#promises