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.
Related
I have been having some trouble getting the Material-UI expansion panels on my React application to expand once the "expand more" icon has been clicked. I have used the documentation on the Material UI website and set up the react application using npx create-react-app. Below I have attached the code of my component and my package.json. The website displays the panel with the correctly mapped data, but the panel does not expand once clicked. Through some research I read that the latest MacOS update has been having some bugs with css frameworks and animation. Has anyone else experienced this issue? I'm not sure at this point what is causing the error.
package.json
component imports and styling
website display
component render
I think you need to change the onClick props in <ExpansionPanel /> for onChange.
But i have a problem like
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
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 want to show SVG icons but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I tried to do that with native way but it's really hard work to show just SVG icons.
Example code:
<Svg width="80" height="80">
<Image href={require('./svg/1f604.svg')} />
</Svg>
Initially, I had the same problem when I had SVG icons in my machine or saved in web URL.
I explored the react-native-svg library, but it does not allow you to include source of SVG icon already created. We can only create new icons using that library.
Later I found react-native-svg-uri which does allow us to use a given path to the icon.
You can use it like this:
import SvgUri from 'react-native-svg-uri';
<SvgUri
width="200"
height="200"
source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
/>
The top statusbar always shown, when I use iOS native theme. I search around and found no solution for my javascript build apps. This is because javascript build use iOS as its default theme.
Any solution to hide the top statusbar on iOS theme?
Kindly advice.
You can add a constant to your theme "paintsTitleBarBool=false" and it will remove the StatusBar