RN Firebase dynamic link, how to resolve embedded link - react-native

I'm scanning QR code containing FB Dynamic Link inside from withing my app. I get something like this https://myapp.page.link/S8rq8wTHFE1KYj8D8.
The question is how do I resolve the underlying URL/link that was used when this link was created?

// add import
import dynamicLinks from '#react-native-firebase/dynamic-links';
// use this line in your code
// `deepLink` is your `https://myapp.page.link/S8rq8wTHFE1KYj8D8`
const resolvedLink = await dynamicLinks().resolveLink(deepLink);
Docs: https://rnfirebase.io/reference/dynamic-links#resolveLink

Related

How do I customize the a generated-index page in Docusaurus?

I have a generated-index page and I can see how to customize the on page title and description in the category.json for the directory, but is there a way to customize the items that are generated by the files that are in the same directory? for example:
tutorials
_category_.json
01-first-tutorial.md
02-second-tutorial.md
I want to be able to have an icon for each of the files and different text than what is pulled from those files first paragraph like seems to be the default. What I want perhaps looks something like this page, but the icons and text need to be links to the tutorial pages.
I have tried using a DocCardList, adding in descriptions, adding in items (failed), and changing each of my tutorial files, but so far no love.
EDIT:
They've come up with a new component called DocCardList which you can use in version 2.3.0.
Create an index.mdx file in your category folder.
Add the following:
import DocCardList from '#theme/DocCardList';
<DocCardList />
Swizzle or otherwise override this component in your src/theme folder to add custom styling, etc.
ORIGINAL ANSWER:
Maybe you could try swapping the generated index component using the docCategoryGeneratedIndexComponent prop (link to reference). That would replace all auto-generated index pages which might be what you want.
In docusaurus.config.js, in the presets section, add
presets: [
[
"classic",
/** #type {import('#docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve("./sidebars.js"),
docCategoryGeneratedIndexComponent:
"#site/src/components/CategoryIndexPage",
},
// etc.
}),
],
],
And then try adding the following custom component under src/components/CategoryIndexPage.tsx:
import React from "react";
export default function CategoryIndexPage(props) {
return (
<pre>
<code>{JSON.stringify(props, null, 2)}</code>
</pre>
);
}
This will just show you what the prop structure is in the component.
When I looked in the theme component which generates this page, it uses
const category = useCurrentSidebarCategory();
But when I try that to get the list of items, I get the following error:
Hook useDocsSidebar is called outside the .
Maybe you can figure out the next steps, I was not able to. 😅
Alternatively, you can create an index.mdx file in your category folder and import a custom React component into that. That gives me the same context violation error, though.
# My custom category page
Some Markdown content here.
import CategoryIndex from "#site/src/components/CategoryIndex.tsx";
<CategoryIndex />

How to add an extra module for bridge on iOS?

I have created a new native module in my React Native application (It's called RCTAVAudioSessionModule).
When looking in the AppDelegate I found this code snippet:
- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
{
NSArray<id<RCTBridgeModule>> *extraModules = [_moduleRegistryAdapter extraModulesForBridge:bridge];
// If you'd like to export some custom RCTBridgeModules that are not Expo modules, add them here!
return extraModules;
}
I want to add my native module to the extraModules array.
I tried to do something like that:
- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
{
NSArray<id<RCTBridgeModule>> *extraModules = [_moduleRegistryAdapter extraModulesForBridge:bridge];
// If you'd like to export some custom RCTBridgeModules that are not Expo modules, add them here!
return [extraModules arrayByAddingObject:(RCTAVAudioSessionModule.new)];
}
However, when I try to call a method from module I get an error that says:
TypeError: null is not an object (evaluating 'RCTAVAudioSessionModule.getCurrentRoute')
How can I correctly add my native module and use it on iOS?

react native Redux:Even though I have used useDispatch I still do not have access to methods in the action

I've used dispatch in my component like following but I get the error modifySeatMap is not defined .But I do have modifySeatMap function defined in one of my action files. Why is this showing modifySeatMap not defined yet?
const dispatch = useDispatch();
const changeStatus=(seat)=>{
console.log("change status called with seat",seat)
seat.status="selected"
dispatch(
modifySeatMap(props.seatMap))
}
I'm attaching the screenshot of the directory structre and the method inside the action here
Why is modifySeatMap undefined here?
From your code, I do not see any issues.
I expect the issue is in how you apply your middleware.
It should look something like this.
export default store = createStore(rootReducer, applyMiddleware(thunk))

What does the variable "window" represent in react native?

I'm looking at some code for react native fetch blob https://github.com/joltup/react-native-fetch-blob and I see in their example to call window.Blob, etc..
Is Window a global variable like you would see in a browser web environment? Or does it represent the current viewable screen in some way? Is the below code example just replacing/overriding a global object?
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;
React Native defines a few globals (all under global) that are polyfilled so certain libraries that were originally developed for the browser can be used without failing. Most of the polyfills for familiar browser APIs are empty. You can see them all in InitializeCore.js.
window though is not empty. It's set to global:
if (global.window === undefined) {
global.window = global;
}
So the next question is, what is Blob in global?
Blob is a property that is added to global using the polyfillGlobal function. If you're curious about how that works, you can look at the PolyfillFunctions.js file. Blob itself is defined in Blob.js.
polyfillGlobal('Blob', () => require('Blob'));
So now that we see what React Native is doing, we can loop back to your questions:
Is Window a global variable like you would see in a browser web environment?
Yes, it's a global variable that is a property of global that is set to equal global.
Or does it represent the current viewable screen in some way?
Nope. It represents whatever React Native wants it to represent.
Is the below code example just replacing/overriding a global object?
Yes. It's replacing window.XMLHttpRequest and window.Blob with react-native-fetch-blob's own implementation.

Module `Html` does not expose `beginnerProgram`

I'm trying to import Html exposing (beginnerProgram), as it is shown there and there, but the compiler doesn't agree : "Module Html does not expose beginnerProgram".
Thanks in advance.
The above answer is for older versions of ELM. An updated answer is below.
Updated For Elm 0.19:
Add import statement:
import Browser exposing (sandbox)
Use sandbox: Note that we are not using Never - as in old code samples - we are using () instead:
main : Program () Model Msg
main = Browser.sandbox
{ init = initialModel
, view = view
, update = update
}
Works beautifully: and I hope this helps you.
Solved by importing from Html.App instead of Html.