View Style Props

Example

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

const ViewStyleProps = () => {
  return (
    <View style={styles.container}>
      <View style={styles.top} />
      <View style={styles.middle} />
      <View style={styles.bottom} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: '#fff',
    padding: 20,
    margin: 10,
  },
  top: {
    flex: 0.3,
    backgroundColor: 'grey',
    borderWidth: 5,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  middle: {
    flex: 0.3,
    backgroundColor: 'beige',
    borderWidth: 5,
  },
  bottom: {
    flex: 0.3,
    backgroundColor: 'pink',
    borderWidth: 5,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
});

export default ViewStyleProps;

Reference

Props

borderRightColor

backfaceVisibility

borderBottomColor

borderBottomEndRadius

borderBottomLeftRadius

borderBottomRightRadius

borderBottomStartRadius

borderBottomWidth

borderColor

borderEndColor

borderLeftColor

borderLeftWidth

borderRadius

backgroundColor

borderRightWidth

borderStartColor

borderStyle

borderTopColor

borderTopEndRadius

borderTopLeftRadius

borderTopRightRadius

borderTopStartRadius

borderTopWidth

borderWidth

opacity

elevation