How do I create a diagonal border in React Native?

Question

I'm working on building a React Native app based on designs from our designer. The design has several places where there are buttons or shapes with one diagonal line (see the following example). I've tried using SkewX but that just seems to rotate the whole shape (and doesn't seem to work on Android anyway). How can I draw a rectangle/button with a diagonal border on one side?

http://browniefed.com/blog/the-shapes-of-react-native/ scroll down to parallelogram. — James Brierley, Jul 13 '17 at 16:58

score 33 · Accepted Answer · edited Jul 19 '17 at 09:17

You can apply css to View class and create the desired output, Heres a small demo code edited version

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>

        <View style={styles.triangleCorner}></View>
        <View style={styles.triangleCornerLayer}></View>
         <View style={styles.triangleCorner1}></View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },triangleCorner: {
    position: 'absolute',
    top:105,
    left:0,
    width: 300,
    height: 100,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 50,
    borderTopWidth: 80,
    borderRightColor: 'transparent',
    borderTopColor: 'gray'
  },triangleCorner1: {
    position: 'absolute',
    top:100,
    left:0,
    width: 130,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 50,
    borderTopWidth: 90,
    borderRightColor: 'transparent',
    borderTopColor: 'green'
  },triangleCornerLayer: {
    position: 'absolute',
    top:107,
    left:0,
    width:297,
    height: 100,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 47,
    borderTopWidth: 75,
    borderRightColor: 'transparent',
    borderTopColor: 'white'
  }
});

Result:

thanks! this is really interesting. In the design in my original post, the second part of the button (the gray part in yours) is actually white with a gray border. since this method requires use of the border to actually create the diagonal edge, how would I achieve the border? would I have to create an identical `triangleCorner1` except 2 points less tall and 1 point less wide with a white background and overlay it on top of the gray one? seems really tedious! >_ — user2719094, Jul 14 '17 at 18:03
i know its a bit tedious but overlay is the only option that i know of — harshal jadhav, Jul 17 '17 at 05:17

How do I create a diagonal border in React Native?

1 Answers1