Class ViewComponent

The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls, and is designed to be nested inside other views and to have 0 to many children of any type. View maps directly to the native view equivalent on whatever platform React is running on, whether that is a UIView,

, android.view, etc.

Hierarchy (view full)

Constructors

constructor

Properties

context props refs state contextType?

Methods

UNSAFE_componentWillMount? UNSAFE_componentWillReceiveProps? UNSAFE_componentWillUpdate? componentDidCatch? componentDidMount? componentDidUpdate? componentWillMount? componentWillReceiveProps? componentWillUnmount? componentWillUpdate? forceUpdate getSnapshotBeforeUpdate? render setState shouldComponentUpdate?

Constructors

constructor

Properties

context

context: unknown

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

Example

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>

See

React Docs

Readonly props

props: Readonly<ViewProps>

refs

refs: {
    [key: string]: ReactInstance;
}

Type declaration

Deprecated

See

Legacy React Docs

state

state: Readonly<{}>

Type declaration

    Static Optional contextType

    contextType?: Context<any>

    If set, this.context will be set at runtime to the current value of the given Context.

    Example

    type MyContext = number
    const Ctx = React.createContext<MyContext>(0)

    class Foo extends React.Component {
      static contextType = Ctx
      context!: React.ContextType<typeof Ctx>
      render () {
        return <>My context's value: {this.context}</>;
      }
    }

    See

    https://react.dev/reference/react/Component#static-contexttype

    Methods

    Optional UNSAFE_componentWillMount

    Optional UNSAFE_componentWillReceiveProps

    Optional UNSAFE_componentWillUpdate

    Optional componentDidCatch

    • componentDidCatch(error, errorInfo): void

    • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

      Parameters

      Returns void

    Optional componentDidMount

    • componentDidMount(): void

    • Called immediately after a component is mounted. Setting state here will trigger re-rendering.

      Returns void

    Optional componentDidUpdate

    • componentDidUpdate(prevProps, prevState, snapshot?): void

    • Called immediately after updating occurs. Not called for the initial render.

      The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

      Parameters

      Returns void

    Optional componentWillMount

    Optional componentWillReceiveProps

    Optional componentWillUnmount

    • componentWillUnmount(): void

    • Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

      Returns void

    Optional componentWillUpdate

    forceUpdate

    • forceUpdate(callback?): void

    • Parameters

      • Optional callback: (() => void)
          • (): void

          • Returns void

      Returns void

    Optional getSnapshotBeforeUpdate

    • getSnapshotBeforeUpdate(prevProps, prevState): any

    • Runs before React applies the result of Component.render render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before Component.render render causes changes to it.

      Note: the presence of this method prevents any of the deprecated lifecycle events from running.

      Parameters

      Returns any

    render

    setState

    • setState<K>(state, callback?): void

    • Type Parameters

      • K extends never

      Parameters

      • state: null | {} | ((prevState, props) => null | {} | Pick<{}, K>) | Pick<{}, K>
      • Optional callback: (() => void)
          • (): void

          • Returns void

      Returns void

    Optional shouldComponentUpdate

    • shouldComponentUpdate(nextProps, nextState, nextContext): boolean

    • Called to determine whether the change in props and state should trigger a re-render.

      Component always returns true. PureComponent implements a shallow comparison on props and state and returns true if any props or states have changed.

      If false is returned, Component.render, componentWillUpdate and componentDidUpdate will not be called.

      Parameters

      Returns boolean

    On This Page