Expo

Get Started
API Reference

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;

Type
enum('visible', 'hidden')

Type
color

Type
color

Type
number

Type
number

Type
number

Type
number

Type
number

Type
color

Type
color

Type
color

Type
number

If the rounded border is not visible, try applying overflow: 'hidden' as well.
Type
number

Type
color

Type
number

Type
color

Type
enum('solid', 'dotted', 'dashed')

Type
color

Type
number

Type
number

Type
number

Type
number

Type
number

Type
number

Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.
Type
number

Type
number