as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート
アクセスいただきありがとうございます。こちらのページは現在英語のみのご用意となっております。順次日本語化を進めてまいりますので、ご理解のほどよろしくお願いいたします。

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

backfaceVisibility

The property defines whether or not the back face of a rotated image should be visible.

Type Default
enum('visible', 'hidden') 'visible'

backgroundColor

Type
color

backgroundColor

Type
color

borderBottomColor

Type
color

borderBottomEndRadius

Type
number

borderBottomLeftRadius

Type
number

borderBottomRightRadius

Type
number

borderBottomStartRadius

Type
number

borderBottomWidth

Type
number

borderColor

Type
color

borderEndColor

Type
color

borderLeftColor

Type
color

borderLeftWidth

Type
number

borderRadius

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

Type
number

borderRightColor

Type
color

borderRightWidth

Type
number

borderStartColor

Type
color

borderStyle

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

borderTopColor

Type
color

borderTopEndRadius

Type
number

borderTopLeftRadius

Type
number

borderTopRightRadius

Type
number

borderTopStartRadius

Type
number

borderTopWidth

Type
number

borderWidth

Type
number

opacity

Type
number

pointerEvents

Controls whether the View can be the target of touch events.

  • 'auto': The View can be the target of touch events.
  • 'none': The View is never the target of touch events.
  • 'box-none': The View is never the target of touch events but its subviews can be.
  • 'box-only': The view can be the target of touch events but its subviews cannot be.
Type
enum('auto', 'box-none', 'box-only', 'none' )

Last updated: Sep 30, 2025