Alternative for #javascriptinterface in react-native for webview addjavascriptinterface() - react-native

I want to implement one of my existing project into react-native, project having webview where the page is loaded and after page loading there are few methods which are invoked at my native end with the help of:
#javascriptbridge (webview.addJavaScriptInterface(bridge,"Android").
Now, want to do same in react native , i have already tried WebViewBridge lib but i am getting problem in using that as unable to resolve:
"import WebViewBridge from 'react-native-webview-bridge'
I have also used invoke like (onMessage={this.invoke.listener}) and invoke.define("myMethod",myMethod) but still my method is not called after page loads.
Can you please help me!

Related

How to build a custom share sheet in react native

I am trying build a custom sharesheet in react-native like how spotify or locket does it (I assume this is a custom sharesheet). I was wondering how you can build a custom one where I only show iMessage and instagram and change the styles. I noticed the react-native-share-sheet and the Share from react native doesn't let you customize it so I was wondering if this is possible to build in react-native?
Also building the "share sheet" from scratch would not work since there is no way to pop up the iMessage. (Linking("sms://) opens a new app)
Exmaple for spotify:
Example for locket:
Any help would be appreciated.
Thanks!

React Native loading screen between pages

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

How to resolve Undefined is not an object (evaluating 'RCTToastAndroid.TOAST')

I want to run a react-native app. Before, it runs normally. An then when I add a sound and I run it again it show Undefined is not an object (evaluating 'RCTToastAndroid.SHORT')
I already open another stackoverflow question like this but it not resolve my problem
Looking at the error, even without any code from you, I have some assumptions.
You are probably trying to implement Android Toast in your app.
In the react-native docs there is an example of how to do it here and you are getting an error because of it.
Please Provide the full code where you are implementing it so we can get an proper solution.
By what you posted in your answer, there is some error in implementing Android's Toast.
OR
You have the Toast module implemented correctly, but your are in an IOS device and in you can't use Android's Toast in IOS.
If this is your case, you can try implementing something different to display and use react native Plataform.select to render the Toast in Android and something else in IOS.

codepush react native new package

I tried react native code push and it works flawlessly. Let's say I modify the text in my buttons to say something else, then with a single command, the update is sent to the users.
Now, lets say I am using a new npm library which requires some native code. Say react-native-image-picker (https://github.com/react-community/react-native-image-picker). Can code push handles this? I want the image picker functionality to be updated too in my users app. Thank you.
No - CodePush can only update JavaScript code and images.
CodePush does not update native code at all so any changes to native code require a full app build and deploy via the relevant app store or app distribution tool (e.g. HockeyApp).
Note: There are some limitations around images - full details here.

ListView section headers don't seem to be working on Android, but they work fine on iOS?

Has anyone had success with ListView section headers on Android? Using the documentation and a few handy tutorials I was able to build this for iOS:
When we run the code on Android (Lollipop and Marshmallow) the ListView just acts like a ScrollView...no section headers :(
Has anyone else run into issues with the ListView on Android? Were you able solve them? We're no against building a separate component for Android so if you know of another react-native component that can be used to achieve this effect that would be great too.