Introduction

React Native Border Style refers to the property which helps in the styling of element’s four borders. The value of this property varies from 1 to 4. Border Style property can be used to specify a border around a box in the uniform style, with 1 value. And with the help of 2, 3 or 4 values, the sides around the box can be defined independently.

Installation

Only for IOS

npm install react-native-dashed-border --save

Android Don’t Need any Extra installation

Example

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{ justifyContent:'center', alignItems:'center', flex:1 }}>

        <TouchableOpacity style={styles.container}>
                    <Text>Add Entry</Text>
        </TouchableOpacity>      
        </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        borderWidth: 1,
        borderRadius: 8,
        borderStyle: 'dashed',
        borderColor: 'black',
        alignItems: 'center',
        padding:10
    },
})

Tutorial

Coming Soon…