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?

Andrew · Accepted Answer · 2019-03-04 21:47:01Z

3

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

answered Mar 4, 2019 at 21:47

Andrew

28.7k9 gold badges95 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nick D Over a year ago

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: imgur.com/gallery/4Ujpx5o

Andrew Over a year ago

Yeah I can see it on my iPad. stackoverflow.com/questions/48602395/…

Nick D Over a year ago

Okay. I don’t really know why the svg wouldn’t scale. Would you know?

Andrew Over a year ago

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 <Svg height={300} width={WIDTH} viewBox="0 0 300 300" preserveAspectRatio='none'>. It will probably take some trial and error.

Nick D Over a year ago

Thank you Andrew! Setting my height to 600 and the preserveAspectRatio to none was key. It is working great now, thanks!

Subhendu Kundu · Accepted Answer · 2019-03-04 20:49:37Z

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 4, 2019 at 20:49

answered Mar 4, 2019 at 20:22

Subhendu Kundu

3,8766 gold badges29 silver badges60 bronze badges

5 Comments

Jose Vf Over a year ago

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?

Nick D Over a year ago

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.

Subhendu Kundu Over a year ago

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 snack.expo.io/BJq33-s8V If this doesnt workout you can always try out the svg approach.

Subhendu Kundu Over a year ago

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.

Nick D Over a year ago

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: <svg width="375" height="644" viewBox="0 0 375 644" fill="none" xmlns="w3.org/2000/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" fill="#6282FF"/> </svg>

Collectives™ on Stack Overflow

Create multiple curve points in react native component

2 Answers 2

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related