I'm trying to make an ActivityIndicator like this
In the oficial docs of ActivityIndicator it works like I want for the web, I was trying with animated api but I didn't make it works.
You can try make a Lottie animation.
it works to web and react-native
Sources:
Web: https://airbnb.io/lottie/#/web
React-native: https://airbnb.io/lottie/#/react-native
React-native Lib: https://github.com/react-native-community/lottie-react-native
LottieFiles: https://lottiefiles.com/
And, here's a lottie animation wich is kinda simillar with the one you posted:
https://lottiefiles.com/50-material-loader
Related
The Problem:
I have a react native project which uses react-native-svg for importing my logos. I created my custom Bottom Tab Bar with react-navigation and it looks like this:
So the problem is just I exported my svg when it looks like this in my adobe xd file (just the purple button):
So you can see, there is clearly a shadow but not in my project. What am I doing wrong?
I use the component like this:
import Logo from "../assets/icons/add_icon.svg"
And then render it with <Logo />
Here is the svg (btw when I open it with browser it shows the shadow): https://pastebin.com/w9YZysgS
Why is there no shadow in my app? (also shadow styles won't work when applied directly).
Specs:
Android
Windows
React-Native 0.62 (latest)
Thank you very much in advance
This is not really a coding fix, but before you could make the shadow a radial gradient object of the same shape as opposed to a shadow in the design.
Context
New electron user here. I just cloned and installed the recommended React + Electron repo: https://github.com/electron-react-boilerplate/electron-react-boilerplate
Now I want to use Material-UI. So I thought I just follow the instructions here:
https://material-ui.com/getting-started/installation/
After I did this, the app doesn't show me anything from Material-UI. I created a Component with a simple App Bar. But it does show nothing.
So I found out that there is another package.json in the folder /app/package.json
I cd'd into it and redid the installation. Restart the dev server but still nothing shows up (no appbar, just white screen).
Here is a screenshot:
Also according to the docs I should add a link for the roboto font to the html file. Where is this supposed to go? I put it into the only html file I found in app/app.html.
How can one set up Material-UI with Electron or rather this specific boilerplate?
I couldn't find anything up to date for this question.
I found the error. Turns out I imported MenuIcon but material doesn't export it. So when I get rid of it, the appbar renders correctly.
I use Material-ui-pickers in my react project. I use v2.2.4, becouse of Material ui v3 used in my project template. Everything is fine, but i cannot localize it. I follow the example
https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/localization/moment
I import moment/locale/pl
and then globally set
moment.locale('pl')
but console.log still shows locale is 'en' and picker didn't change
Pass moment instance to the MuiPickersUtilsProvider libInstance prop
Make sure you are using lib npm i #date-io/moment moment instead of pure moment lib.
Post your code to smooth the solution.
I need to use respectively the default iOS and Android Picker in a React web app. I've found a Picker component in React Native which apparently does what I need: https://facebook.github.io/react-native/docs/picker.html Is there any way to import the component in React? Alternatively is it possible to toggle the default picker within React?
There is a project on Github to do exactly what you want called react-native-web which can be found at: https://github.com/necolas/react-native-web
I looked through the repository and found it has the component you want to use.
Currently I am using Highcharts for my web app, but now I am building an android app using react-native. Will Highcharts work with React-native.
HighCharts works with the DOM. You cannot use HighCharts or charting libraries that depend on the DOM directly in React Native, but you can use charting libraries in a WebView with React Native. I have not use High Charts specifically, but have used other charting libraries with WebView and it works great.
Here you can use this component to send the config json to the componente and it will be displayed
https://github.com/TradingPal/react-native-highcharts
Two main ways you can utilise Highcharts in React Native app are :
WebView component. I used this technique on other platforms (Appcelerator Titanium) as well.
Official minimal Highcharts wrapper for React : highcharts-react-native.
As of now pre-requisite for this are:
node 11.2+
npm 6.7.0+ or similar package manager
React 16.4+
React native 0.59.3+
To install:
npm install #highcharts/highcharts-react-native
NOTE: There are other un-official wrappers as well like react-native-highcharts but I have not used them.
You can use this module:
react-native-highcharts.
It works using the web engine on Android or iOS and the Highcharts JavaScript module to render dynamic charts.
Example:
<ChartView style={{height:300}} config={conf}></ChartView>
Add this line to the ChartView component : originWhitelist={['']}
Example:
<ChartView style={{height:300}} config={conf} originWhitelist={['']}></ChartView>