Create multiple curve points in react native component

Question

I am currently developing a react native app, and for my login screen it has a background that has two points where the component changes its curve. Attached is the image as it can better show what it looks like then I can explain it. I was wondering if it would be possible to recreate this screen in React Native. I have access to react-native-svg but I am using expo.

As you can see, there is two curves to the blue background/component part of the screen. (This is a mockup created in Figma, not yet implemented in an App) How would I go about designing this in react native?

score 3 · Accepted Answer · answered Mar 04 '19 at 21:47

To use SVGs you have to use react-native-svg. Expo has it built in, though you can install it in any react-native package. You can read more about react-native-svg here.

It is fairly straight forward to use the library. As you already have a path for the SVG you can just use the Path property to draw the path on the screen.

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, TextInput } from 'react-native';
import { Constants, Svg } from 'expo';

const WIDTH = Dimensions.get('screen').width;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Svg height={300} width={WIDTH}>
          <Svg.Path
            d="M-17.5 378.5C31.5 32.5 302.5 463 375 89C447.5 -285 375 644 375 644H0C0 644 -66.5 724.5 -17.5 378.5Z" // put your path here
            fill="blue"
            stroke="blue"
          />  
        </Svg>
        <View style={{backgroundColor: 'blue', flex: 1}}>
          <View style={{width: WIDTH - 60, height: 60, backgroundColor:'white', borderRadius: 30, margin: 30, justifyContent: 'center', paddingLeft: 10}}>
              <TextInput
                placeholder='email'
              />
          </View>
        </View>
      </View>
    );
  }
}

You can see it working in the following snack https://snack.expo.io/@andypandy/svg-example

This is what it looks like on an iPhone X

Hi Andrew. First, wanted to say thank you as it works flawless on an iPhone X, but the only problem is scaling. On an iPad, the svg only takes up half the screen. I'll link you a picture to show you: https://imgur.com/gallery/4Ujpx5o — Nick D, Mar 04 '19 at 21:52
Yeah I can see it on my iPad. https://stackoverflow.com/questions/48602395/how-can-i-automatically-scale-an-svg-element-within-a-react-native-view — Andrew, Mar 04 '19 at 21:57
Okay. I don’t really know why the svg wouldn’t scale. Would you know? — Nick D, Mar 04 '19 at 21:58
I think it is a combination of requiring the correct `viewbox` and the right `width` and `height` and setting `preserveAspectRatio='none'` on the Svg. So something like ` — Andrew, Mar 04 '19 at 22:15
Thank you Andrew! Setting my height to 600 and the preserveAspectRatio to none was key. It is working great now, thanks! — Nick D, Mar 04 '19 at 22:40

Subhendu Kundu · Answer 2 · 2019-03-04T20:49:37.917

0

Umm I would do this few different way such a svg (react-native-svg) but why do that much hard work when this can be achievable just using an background image. Use ImageBackground (https://facebook.github.io/react-native/docs/imagebackground) and fix this easily. Then add the logo and the login container as children. Let me know if this works for you. :)

EDIT: You might want to look at https://github.com/vault-development/react-native-svg-uri as well.

edited Mar 04 '19 at 20:49

answered Mar 04 '19 at 20:22

Subhendu Kundu

3,618
6
26
57

Maybe because the SVG can escalate without problem between different device screens and pixel ratio while the image must be bigger enough to cover all the cases resulting on a much more heavy app? – Jose Vf Mar 04 '19 at 20:32
Subhendu, Jose said exactly what my problem is. The background image scales very poorly with different app sizes, so I was thinking SVG's would be much better, but I don't know how to go about the SVG here. – Nick D Mar 04 '19 at 20:33
Umm ya, I hear what you guys are saying, worth trying this approach though, you can always play with the image using `resizeMode: 'cover'` or `resizeMode:"contain"`. I put together a small example take a look at https://snack.expo.io/BJq33-s8V If this doesnt workout you can always try out the svg approach. – Subhendu Kundu Mar 04 '19 at 20:40
There gonna be so many challenges with svg approach honestly. First get the right design, unless you are a pro in svg, then make it as background. – Subhendu Kundu Mar 04 '19 at 20:43
I have tried the image background but it just doesn't scale like it should. In figma, I ca convert my image to an svg, but I still cannot figure out how to get it to work in react native using svg's and path's. Here is the svg if you may be able to do this: – Nick D Mar 04 '19 at 20:58

Create multiple curve points in react native component

2 Answers2