Using custom gif as a loading icon within <ActivityIndicator> using react-native - react-native

I am currently attempting to code an app in react native for an android device. I have created a custom loading component and am using the to show a loading icon.
But, I want to use a custom gif loading icon that contains my app's colours. I have looked but I cannot seem to find anything, is it possible to do this?

react native does not support gif feature in its raw form. However, in order to reach what you want and use gifs in the application, you can take a look at the accepted answer on the subject;
How do I display an animated gif in React Native?
Then all you need to do is to use Image component instead of ActivityIndicator. And passing the relevant gif information to the image component.

Related

How to show progressive changing of image from one to another with loading indicator above the image in react-native

I need to show an image (eg:blur image) with loading indicator shows
the image is loading in UI. For eg) In facebook app feed posts are shows as loading before it fetch from server. I need the same.
Any suggestion or any package in react-native?
We have opacity prop and blurRadius prop for image in react native.
so what you can do is....
you can use async function to check if image is completely downloaded ...if yes then setState({downloaded:true}) and then if downloaded is true , based on your choice you can change the opacity to 100% for addon..you can even use activityindicator on top of that.
i hope it solves your problem...
you can also refer to this link : https://medium.com/the-react-native-log/progressive-image-loading-in-react-native-ecc88e724343

React native Library to take bitmap

I am Working on react native camera library to taking bitmap.
For example, when we capture a image it return image path, height, width etc.
Instead of these i need bitmap.
The best way to achieve what you're looking to do is likely going to be to use the Native UI Components API for iOS and Android to implement a custom native image view that applies the effects you are looking for.
React Native doesn't give the option of accessing access the raw bitmap data of the React Native (aka. RCTImage) component.

React Native Camera Image with Text

I want to do image capture and pass text along with the image in react native app, just like whatsapp does. When you invoke the camera to take a picture it will just capture the image and there is no way to add the text. Is there any component available for this kind of requirement.
Something like this Sample Example
No component can achieve that at the moment, you can simply add text on the picture juste like: https://medium.com/#mheavers/vertically-centering-text-over-images-in-react-native-with-flexbox-935e822751f3
and use this package to save it as an image
https://github.com/gre/react-native-view-shot
You can use react-native-camera.

How would a slideable list control like this be achieved with React Native?

The Yelp app for iOS is designed such that after you enter and send a search query, something like this comes up:
The screen consists of a map control in the background, with a screen on top displaying a list view that you can swipe up/down depending on whether you want to see the list/map (respectively).
How would something like this be accomplished using React Native? For example, would the React Navigation or React Native Swiper libraries help me superimpose a list view on top of the map control?
You can use PanResponder.
Here is a good article which ay help you. Click here.

How to access UINavigationController in react native?

I have created a View where the NavigationBar comes from Obj-c(Native code) and the rest of the view comes from React Native.
Now in the react native view, i have a link which should show the content in a new screen with the navigation experience. I am able to show the content but unable to find a way to change navBar title and show back button on the navBar.
Can you please let me know how we can get access to NavigationBar(Obj-c) in ReactNative?
I don't believe React Native supports this. You cannot take an object created in one language and access it in another. It would be a better idea to create your navigation bar in your JS and use it throughout your app. That even allows you to propagate that UI to your android apps.