CODEWITHSUNDEEP
react-native
Akash Gorai
Akash Gorai

Reputation: 671

Custom shaped buttons on react-Native

How to add custom shape buttons , for example a pentagon shaped button on react native application. Any help or input would be appreciated.

Upvotes: 3

Views: 7353

Answers (1)

Henning Hall
Henning Hall

Reputation: 1457

Here is one way to achieve it (View Snack): 

export class PentagonButton extends Component {
  render() {
    return (
        <TouchableOpacity onPress={() => { }}>
          <View style={styles.pentagon}>
            <View style={styles.pentagonInner} />
            <View style={styles.pentagonBefore} />
          </View>
        </TouchableOpacity>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  pentagon: {
    backgroundColor: 'transparent'
  },
  pentagonInner: {
    width: 90,
    borderBottomColor: 'red',
    borderBottomWidth: 0,
    borderLeftColor: 'transparent',
    borderLeftWidth: 18,
    borderRightColor: 'transparent',
    borderRightWidth: 18,
    borderTopColor: 'red',
    borderTopWidth: 50
  },
  pentagonBefore: {
    position: 'absolute',
    height: 0,
    width: 0,
    top: -35,
    left: 0,
    borderStyle: 'solid',
    borderBottomColor: 'red',
    borderBottomWidth: 35,
    borderLeftColor: 'transparent',
    borderLeftWidth: 45,
    borderRightColor: 'transparent',
    borderRightWidth: 45,
    borderTopWidth: 0,
    borderTopColor: 'transparent',
  }
});

This example is using views in different shapes to build your button. Credit to @browniefed who has made a lot of different shapes here.

Another way to solve it is using React ART wich is a great way of creating shapes in React Native. Here are the unofficial docs.

Upvotes: 2

Related Questions