I want to make a custom loader that showcases the logo of my company and runs a line across the border of that logo, that or show different images icons during loading, the icons which I want are relevant to my company's business model which I can make, but I want to know how do I go about making a custom loader in react-native or react...
May be this https://medium.com/#kelleyannerose/react-native-activityindicator-for-a-quick-easy-loading-animation-593c06c044dc will help.
Once you know how to play around with the animation, you can add more complex animations, the way you want it. Or probably play with svg and images later with animation.
Related
I want to create some animation rich charts in a dashboard, I have attached some images on how I want,
Where onclick of pie chart section, that section gets separated, and with loader animation, like its loading pie chart.
Some beautiful barchart with loader animation and such.
Before I used react-chartjs-2 library and I was able to build basic dashboard, but I was very static and I was unable add animations as such. If anyone could suggest me some libraries, that is rich in animation or some sample dashboard that includes these features.
Check out Victory Charts (https://formidable.com/open-source/victory/), I've used them in the past for react native projects and loved the API, but it's really a web charts library (the mobile version has performance issues).
I want to use a loader such as the one on Youtube before the content is loaded. On youtube, every piece of content uses a light gray color loader before rendering the actual content. It is made of squares and circles to simulate the actual content about to be rendered.
Do you know what it is ? Surprisingly, I couldn't find it neither on material-ui nor via a google search.
ok, I found the solution to my problem.
What I was looking for is called "placeholder UI", or "skeleton screen".
In my case, I want to use it with ReactJS. Semantic UI React has the placeholder part of the library :
https://react.semantic-ui.com/elements/placeholder/#content-line
Material-UI, and other styling libraries do not. There are however external packages for that, such as :
https://github.com/buildo/react-placeholder
https://github.com/danilowoz/react-content-loader
https://github.com/dvtng/react-loading-skeleton
It's also possible to implement skeleton screens oneself using a combination of html, svg and css.
The issue I am facing is that I want to interact(animated) with 2 images and some text objects... I want to fade the images from one to the other and I also want to animate text at the same time.
I can do this in the DOM but I can't find ANYWHERE how to export this collection of animations to a video format and save it to the user's device.
I would love to integrate Lottie since it is so robust, but there is no way to export anything to video. All I've found is screen recorders but what if a notification pops up, it'll ruin the experience. Also, framerate is an issue with the screen recording.
I know you can do this on a server or with native ios functions, but it'd like to do this strictly with react native. But I'm open to hearing other suggestions I may have not thought of.
I have an iOS app in which, we take user pics, and then allowed them to put some random custom images above the pics.
While placing these custom pics above real image, they can rotate, scale these custom image. ( See this StickerViewIOS )
Now I am looking for exact same solution while making ReactNative.
Tried lot of Googling but no results found.
Just want to ask community if any of the ReactNative component available for the same.
Thanks,
There's no rotation support, but I did something similar for an app I made for Chain React.
Here's the image component that supports gestures: https://github.com/cball/ChainReactPhotobomb/blob/master/App/Components/TransformableImage.js
To overlay them on top, just use the ImageBackground Component
Ok. Starting over with this. I see that the SocialBoo theme has something similar in what I want to achieve. If I find that I can work and improve. I Added a new socialboo theme and created blank GUI. Assumed it would be a Commandbehavior but that didnt do the trick, so did adding tabs. Seems like those components are not for that specific bar... However did notice another issue.
How do I get the social actionbar as displayed in the socialboo theme? (Screen shot). Assuming those images etc are part of the default theme, right.
Also, If I create a TouchCommand = bar, title or native. It displays fine in Gingerbread but not ICS. DO you know why is that? (screen shot)
Thanks, in advance.
Those images aren't a part of the theme, they are a part of the specific demo. If you add a Tabs component to the center of the border layout UI you will get thee tabs where the "icon" property will allow you to customize the unselected icon and you can customize the selected icon as well. You can see the full source/resource file of the social boo demo in the docs and demos zip in the download section.
Generally customizing commands is a bit complex because of platform specific constraints, when running on an Actual Android 4 device we use the native ActionBar by default to provide the experience Android users are used to. This is hard for us to simulate so you will only see this properly in the device build. I suggest not relying on commands, it seems that what you are trying to achieve is easily doable with tabs and its possible that's why you had difficulties in your other question.