I am new to react native and starting to learn UI design.
I am trying to create wavy background (as in the bottom portion of first card or pink section of the third card) shown in the below image. I searched in multiple react native packages, but haven't found something that implements this.
My question is that
if this type of background design is possible to implement by using some react native packages or the background image has to be designed like
this in some image editing application (like adobe photoshop)?
if this is possible by some react native packages, then any library recommendation or working code will be helpful for me.
Thanks in advance.
Image Source: Google
You could use this package and draw your wavy background with SVG, or set uri of your SVG.
Following code is sample wavy background in React Native
import SvgUri from 'react-native-svg-uri';
export const WavyBackground = () => (
<View>
<SvgUri
width="200"
height="200"
source={{uri:'custom wavy svg url here'}}
/>
</View>
);
Related
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.
In normal css, dimensions like px, %, rem etc. works perfectly. But in react native, it throws an error.
Are there any possible ways to use these dimensions directly in react-native ?
REMs are a way of setting font-sizes based on the font-size of the root HTML element.
react native is purely works on pixels. Different mobile screens have different pixel ratio .
pixelRatio documentation in react native
if you want text normalization in react native
use my custom function in my open source project.
Suppose you want the width to be 50% of the View so you can do <View style={{width:'50%'}} /> .
Hope its clear. Feel free for doubts.
i'm facing a problem in react native
Want to real image is clickable but should not click the alpha background. Please suggest me how can i do this.
In below image i used zIndex to placing the birds ,red color indicate the alpha area of above birdenter image description here
Unfortunately, there's no easy way to do this with React Native. The best solution I've found is by defining SVGs and using react-native-svg, which supports touch events. If you're using Expo, then it is already preinstalled and can be imported like import { Svg } from 'expo'; const { Circle, Rect } = Svg;.
Alternatively, you may be able to use a WebView (mirror) and CSS masking to achieve your desired result.
React Native Victory charts : onPress or onPressIn is not triggered in android. however it is OK in iOS.
Can anyone help me regarding this.
I found out (by reading other stackoverflow issues addressing similar problems) that wrapping the whole VictoryChart in an <Svg>...</Svg> solves this issue on Android and on the other hand keeps the onPress functionality on iOS. The only thing I realized on top was that I had to give the Svg a style={{height: XXX}} where XXX is the same height than the VictoryChart has. Otherwise the wrapping Svg would be gigantic high.
Prelude to the Question:
I am planning to create a super simple SVG editor in React Native, with the following features:
add a new circle to the SVG
resize the circle
move the circle around
remove the circle.
What is not clear, how can I react to SVG events in React Native. (Is an SVG event the same as a DOM event (for React Native) ?)
I Googled "svg editor react native", "svg react native events" and I found:
https://github.com/magicismight/react-native-svg, it seems that it does not have support for events.
https://github.com/brentvatne/react-native-svgkit , also, does not support events yet (has it as plan though).
The Question:
If the user taps or drags the circle in an SVG, how can I react to that event in React Native?
EDIT1:
Further Googling indicates that SVG is not supported in React Native (yet).
Would it be easier to just use SVG + ReactJS + Cordova to accomplish this goal (i.e. write a simple SVG editor using React and deploy it to a mobile phone)?
EDIT2:
After some more Googling, it seems that http://reapp.io/ is the simplest way to go.
https://github.com/magicismight/react-native-svg, it seems that it does not have support for events.
It sure does, e.g.
<Circle cx={10} cy={10} r={20} onPress={()=>{console.log('pressed')}}/>
Check the PanResponder example for more complex touch handling such as dragging.
After some more googling, it seems that http://reapp.io/ is the simplest way to go.
But from what I can tell that isn't React-Native, right?